1

I have the following createSlice method. I looked into the documentation of createSlice where they have given an option to use the prepare method to customize the action creation.

I'm trying to make an API call, However the reducer is triggered before the API response. Hence my action.payload remains undefined.

Can prepare be used to make async calls ?

PS: I did not want to maintain my customized action creators in a separate function/file. The purpose of using createSlice is to improve code maintainability.

export const authReducers = createSlice({
    name: "auth",
    initialState: { ...initialState },
    reducers: {
        loginToConsole: {
            reducer: (state, action) => {
                console.log("Reducer Called", action);
                state.isLoggedIn = !state.isLoggedIn;
            },
            prepare: async (credentials) => {
                let response = await axios.post(
                    `${apiEndPoint}/api/auth/login`,
                    credentials
                );

                console.log(response);
                return { payload: { ...response.data } };
            },
        },
    },
});
Mahesh Kumaran
  • 887
  • 2
  • 12
  • 30

1 Answers1

2

No, it cannot. prepare is called synchronously.

You should use thunks for that - see This Chapter of the official Redux tutorial

That said, nothing prevents you from writing your thunks just in the same file. Many people do that.

phry
  • 35,762
  • 5
  • 67
  • 81