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

【问题标题】：(React/Redux) Async issue in a Redux action(React/Redux) Redux 操作中的异步问题
【发布时间】：2020-03-22 19:27:57
【问题描述】：

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

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

  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
          })
      })
  }

我做错了什么？

【问题讨论】：

您的 loadUser 返回一个函数，而不是一个对象。好像你没有正确配置 redux-thunk
dispatch(returnErrors(err.response.data, err.response.status)) returnErrors 是一个动作吗？
是的，它来自一个 errorActions 文件

标签： javascript reactjs redux

【解决方案1】：

默认情况下，redux 中的操作必须返回一个带有 type 键的对象。

您的 redux 操作创建者正在返回一个函数。这是redux-thunk 中间件最常使用的模式。 redux-thunk 中间件允许您的操作返回一个函数，该函数接收调度方法，以便在需要时多次调用。

在创建 redux 存储时，您需要安装 redux-thunk 包并将其包含在中间件数组中。

【讨论】：

【解决方案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.0
const store = createStore(rootReducer, applyMiddleware(thunk));

【讨论】：

你能把代码放到 CodeSandbox.io 上吗？或者添加returnErrors的代码？您是否运行了一个 redux 记录器来查看它在哪个操作之后失败，以便我们可以缩小特定实例的范围？

【解决方案3】：

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

【讨论】：