尝试使用redux获取axios数据，并使用useEffect将其加载到组件中

Question

正如标题所说，但我无法做到这一点。这就是我迄今为止所做的。

我首先创建了一个actions.js文件。

import axios from "axios"
export function loadPhones() {
return (dispatch) => {
return axios.get("apiurl").then((res) => {
dispatch(fetchPhones(res.data))
})
}
}
export function fetchPhones(phones) {
return {
type: "LOAD_PHONES",
phones: phones
}
}

据我所知，如果调用loadPhones，这个文件会获取api。

然后我们有了reducer文件，其中有一些处于手机状态的默认数据，我想用提取器接收到的数据来替换它

let defaultState = {
phones: {phone1: "sony" }
}
const mainReducer = (state = defaultState, action) => {
if (action.type === "LOAD_PHONES") {
return {
...state,
phones: action.phones
}
} else {
return {
...state
}
}
}
export default mainReducer;

之后，我有了store.js文件，其中使用中间件thunk创建了存储，以使用异步获取api

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk"
import reducers from "../reducers/reducer.js"
let store = createStore(reducers, applyMiddleware(thunk))
export default store;

之后，我在index.js文件中加载存储

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "react-redux"
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from './redux/store/store.js'

ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);

最后，我转到我的组件，加载数据

import React from 'react';
import './App.css';
import { useEffect } from 'react'
import { connect } from "react-redux"
import { loadPhones } from "./redux/actions/actions.js"
const mapStateToProps = (state) => {
return state
}
function mapDispatchToProps(dispatch) {
return {
loadPhones: () => dispatch(loadPhones)
}
}
function App(props) {
useEffect(() => {
props.loadPhones(); //supposedly we fetch the data
}, []);

return (
<div className="App">
{console.log(props.phones)}
{JSON.stringify(props.phones)} //this part wont show the fetch data
</div>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

但所有东西都在那里。props.phones始终是默认对象，useEffect似乎不会触发loadPhones((，无论如何，如果我可以直接从redux中获取，我认为我不需要在应用程序中使用useState，但我真的不知道如何做到这一点，我有点失去了

有人能帮忙检查一下哪里出了故障吗？之后，actions.js中的axios获取永远不会被调用。

Answer 1

您应该在mapDispatchToProps:中像这样使用dispatch

loadPhones: () => dispatch(loadPhones)，因此在安装时不调用dispatch，而仅在使用loadPhones时调用。但真正的问题是loadPhones没有在dispatch上调用，请检查我的沙箱。应该这样发送：

dispatch(loadPhones());

顺便说一句，你有一些控制台错误，它是onClick而不是handleClick。

Answer 2

Ciao，如果你想在redux中进行异步调用，你应该使用redux promise。有了这个库，您可以在dispatch中调用异步资源来检索和存储redux中的数据。在redux中进行异步调用的方式不起作用。

作为替代方案，您可以使用redux-axios中间件，它可以帮助您使用axios在redux中使用promise。查看此示例。这对我帮助很大。