reactjs - React-Redux - 未处理的拒绝(错误): Actions must be plain objects. 使用自定义中间件进行异步操作

Question

我是 redux 的新手，我正在尝试发送一个 Action ，但它显示

Unhandled Rejection (Error): Actions must be plain objects. Use custom middleware for async actions

这是我的 Action 创建者:

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

reducer :

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;

我正在分派(dispatch)这样的行动:

const dispatch = useDispatch();

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

店铺:

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

我该如何纠正这个错误？

Answer 1

您的 getChartData是一个异步函数，因为您在 useEffect 中调用它它返回一个 Promise ，如您所见，Action 必须是一个普通对象。
您应该 await发送之前的 promise 结果。

const dispatch = useDispatch();

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

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