我是 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))
);
我该如何纠正这个错误？
你getChartData是一个异步函数，因为你在你的调用它useEffect返回 a Promise，如你所见， Action 必须是一个普通对象。
您应该await在发送之前承诺结果。
const dispatch = useDispatch();
useEffect(() => {
(async () => {
dispatch(await getChartData());
})();
}, [dispatch]);
或者，如果您正在使用thunk 中间件（在使用 ReduxToolkit 时默认应用）在您的getChartData
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句