[英]Error: Actions must be plain objects. Use custom middleware for async actions. React-redux error
[英]Error: Actions must be plain objects. Use custom middleware for async actions. Redux toolkit
我有以下帶有 redux-toolkit 的代碼,但我找不到錯誤
if (token) { // this code dispatches the function below in a different file
const data = {
service: 'stripe',
stripe_payment_id: token.id,
};
dispatch(setPaymentMethod({ data, tenantId: tenant.id }));
}
export const setPaymentMethod = (params: any) => {
const { data, tenantId } = params;
return async (dispatch: any, getState: any) =>
dispatch(
postRequest(
`${API.TENANTS}/${tenantId}/${API.PAYMENT_METHODS}`,
data,
response => console.log(response),
),
);
};
上面的代碼像這樣調用 API 處理程序文件
const postRequest = async (
url: string,
body: any,
onSuccess: (x: any) => void,
onError?: () => void,
params?: any,
) => {
return async (dispatch: any, getState: any) => {
try {
let response = await API.post(url, body, {});
if (response.status === 200) {
console.log(response);
onSuccess(response.data);
}
} catch (error) {
console.log(error);
}
};
};
也許我沒有看到錯誤,它似乎很容易修復,但還沒有找到解決方案,請幫助!
我正在使用 redux-toolkit,它已經在幕后使用了 redux-thunk
/存儲配置
const rootReducer = combineReducers({
/* PLOP_INJECT_EXPORT */
tenantsReducer: tenantsSlice,
receiptsReducer: receiptsSlice,
geoLocationReducer: geoLocationSlice,
storesReducer: storesSlice,
authReducer: authSlice,
exampleReducer: exampleSlice,
uiReducer: uiSlice,
tokensReducer: tokensSlice,
[usersApi.reducerPath]: usersApi.reducer,
});
const persistConfig = {
key: 'root',
version: 1,
storage: AsyncStorage,
// whitelist: ['uiReducer'],
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = configureStore({
reducer: persistedReducer,
middleware: getDefaultMiddleware =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
}),
});
setupListeners(store.dispatch);
Redux-Thunk 不處理書外的承諾。 檢查createAsyncThunk 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.