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

Question

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

每次应用程序加载时，我都会尝试在 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.

Action :

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-thunk 包，并在创建 redux 存储时将其包含在中间件数组中。