React-Redux - 未处理的拒绝（错误）：操作必须是普通对象。使用自定义中间件进行异步操作答案

【问题标题】：React-Redux - Unhandled Rejection (Error): Actions must be plain objects. Use custom middleware for async actionsReact-Redux - 未处理的拒绝（错误）：操作必须是普通对象。使用自定义中间件进行异步操作
【发布时间】：2021-11-02 06:05:27
【问题描述】：

我是对 redux 做出反应的新手，我正在尝试调度一个动作，但它正在显示

未处理的拒绝（错误）：操作必须是普通对象。使用自定义中间件进行异步操作

这是我的动作创建者：

import axios from "axios";
import { GET_CHART_DATA, GET_CHART_DATA_ERROR } from "../actionTypes";

export const getChartData = async () => {
  try {
    const { data } = await axios.get(
      "https://example.com/api"
    );
    console.log("data", data);
    return { type: GET_CHART_DATA, payload: data };
  } catch (error) {
    return { type: GET_CHART_DATA_ERROR, error: error };
  }
};

减速器：

import { GET_CHART_DATA, GET_CHART_DATA_ERROR } from "../actionTypes";

const chartDataReducer = (state = {}, action = {}) => {
  console.log("action", action);
  switch (action.type) {
    case GET_CHART_DATA:
      return { ...action.payload };
    case GET_CHART_DATA_ERROR:
      return { ...action.error };
    default:
      return { ...state };
  }
};

export default chartDataReducer;

我正在调度这样的动作：

const dispatch = useDispatch();

  useEffect(() => {
    (async () => {
      dispatch(getChartData());
    })();
  }, [dispatch]);

商店：

const store = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(thunk))
  );

我该如何纠正这个错误？

【问题讨论】：

您的操作返回一个函数，而不是一个对象。您是否使用任何异步中间件（即 Thunk 中间件）？你能分享一下你是如何创建你的 redux 商店的吗？
@DrewReese 是的，我正在使用 thunk 作为中间件。我已经编辑了问题并添加了商店
这能回答你的问题吗？ React-Redux: Actions must be plain objects. Use custom middleware for async actions
@Timor 我刚刚在 dispatch() 中添加了 await 并且它起作用了
@YogeshwarChaturvedi 很高兴听到！

标签： reactjs redux react-redux

【解决方案1】：

您的getChartData 是一个异步函数，由于您在useEffect 中调用它，它返回一个Promise，正如您所见，Action 必须是一个普通对象。

您应该在发送承诺结果之前await。

const dispatch = useDispatch();

useEffect(() => {
  (async () => {
     dispatch(await getChartData());
   })();
 }, [dispatch]);

或者，如果您使用 thunk middleware（使用 ReduxToolkit 时默认应用），则在您的 getChartData 中返回一个 thunk 操作

【讨论】：