尝试使用 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 文件，其中有一些电话状态的默认数据，我想用 fetcher 接收到的数据替换它

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 始终是默认值 object，并且 useEffect 似乎不会触发 loadPhones()，而且无论如何我不认为我需要在应用程序中使用 useState，如果我可以直接从 redux 获取，但我不太明白怎么做，我有点迷茫

任何人都可以伸出援手并检查它失败的地方吗？ Afaik actions.js 中的 axios fetch 从未被调用。

Answer 1

再见，如果你想在 redux 中进行异步调用，你应该使用 redux-promise。使用此库，您可以在 dispatch 中调用异步资源以在 redux 中检索和存储数据。您在 redux 中进行异步调用的方式无法正常工作。

作为替代方案，您可以使用 redux-axios-middleware that helps you to use promise in redux using axios. Check this 示例。对我帮助很大。

Answer 2

您应该在 mapDispatchToProps:

中像这样使用 dispatch

loadPhones: () => dispatch(loadPhones)，因此不会在设置时调用调度，而是仅在您使用 loadPhone 时调用。但真正的问题是 loadPhones 没有被调用 dispatch，检查我的 sandbox。应该这样发送：

dispatch(loadPhones());

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

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

Trying to fetch axios data with redux, and load it in a component using useEffect

javascript

reactjs

redux

redux-thunk