I have the following code with redux-toolkit but i can't find the error
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),
),
);
};
The code above calls the API handler file like this
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);
}
};
};
Maybe I am not seeing the error and it seems easy to fix but haven't found the solution, please help!
I am using redux-toolkit which uses redux-thunk behind the scenes already
/Store config
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 doesn't handle promises out of the book. Check createAsyncThunk.