(React/Redux) Redux 操作中的异步问题

Question

无法成功使用过去帖子中的解决方案。

每次useEffect在 app.js 上加载应用程序时，我都尝试运行一个操作，如下所示：

  26 | const App = () => {

  27 |   

  28 |   useEffect(() => {

> 29 |     store.dispatch(loadUser());

  30 |   }, []);

  31 | 

  32 |   return (

我得到的错误：

Error: Actions must be plain objects. Use custom middleware for async actions.

那个行动 ：

export const loadUser = () => (dispatch, getState) => {

      dispatch({ type: USER_LOADING})

      const token = getState().auth.token

      const config = {

          headers : {

              "Content-type": "application/json"

          }

      }

      if (token) {

          config.headers["x-auth=token"] = token

      }

      axios.get("/api/auth/user", config) 

      .then(res => dispatch({

          type: USER_LOADED,

          payload: res.data

      }))

      .catch(err => {

          dispatch(returnErrors(err.response.data, err.response.status))

          dispatch({

              type: AUTH_ERROR

          })

      })

  }

我究竟做错了什么？

Answer 1

默认情况下，redux 中的操作必须返回一个带有type键的对象。您的 redux 操作创建者正在返回一个函数。这是最常与redux-thunk中间件一起使用的模式。如果redux-thunk需要，中间件允许您的操作返回一个函数，该函数接受多次调用的调度方法。创建 redux 存储时，您需要安装该redux-thunk软件包并将其包含在中间件数组中。

Answer 2

Redux 本身就是一个非常简单的工作流程。调度的动作必须是一个对象，通常带有一个类型和一个有效负载。对于需要在操作的各个阶段进行多次分派的异步操作，此工作流程有些痛苦。这就是Redux Thunk或Redux Sagas等其他工具的用武之地。在我看来，您正在使用 Redux Thunk 但尚未连接 Thunk 中间件。无论您在哪里创建商店，都需要像这样应用 redux thunk 中间件。import { createStore, applyMiddleware } from 'redux';import thunk from 'redux-thunk';import rootReducer from './reducers';// Note: this API requires redux@>=3.1.0const store = createStore(rootReducer, applyMiddleware(thunk));

Answer 3

当您在操作中有异步逻辑时，您必须将某种中间件与 redux 集成，即redux-thunk或redux-saga. 我更喜欢 thunk，因为它更易于使用。