What is the action for a reducer built with createAsyncThunk

Question

I'm not really good at posting an accurate title for my question because I'm still fairly new to Redux, but here's what I'm trying to do:

I'm trying to create a middleware using createListenerMiddleware that basically carries out some logic when a certain action fires. In the actionCreator argument of the middleware, I have to pass in some action as such:

myMiddleware.startListening({
  actionCreator: myAction,
  effect: ...doSomething...
  ...

Currently, I used createSlice to create some functions to handle some redux implementations, and I also used createAsyncThunk with it:

export const logout = createAsyncThunk(
    "auth/logout",
    async () => {
        const res = await serveraxios.post(
            "logout",
            undefined,
            {
                withCredentials: true
            }
        );
        console.log(res);
    }
);

export const authSlice = createSlice({
    name: "auth",
    initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder
            ...
            .addCase(logout.fulfilled, (state, action) => {
                console.log(action);
                return initialState;
            })
    }
});

export const selectAuth = (state: RootState) => state.auth.auth;

I'm trying to figure out what are the actions created in this case. For instance, if we did something without createAsyncThunk those actions (setUser & removeUser) can easily be extracted as such:

export const userSlice = createSlice({
    name: "user",
    initialState,
    reducers: {
        setUser: (state, action: PayloadAction<UserInterface>) => {
            state.user = action.payload
        },
        removeUser: (state) => {
            return initialState;
        },
    },

});

//Action creators generated for each case reducer function
export const { setUser, removeUser } = userSlice.actions;

In the case of authSlice, the actions are CaseReducerActions, how can I get the actions from authSlice?

Answer 1

To be clear: there are action objects ( {type: "todos/todoAdded", payload: "Buy milk"} ), action creator functions (todoAdded("Buy milk"), and reducer functions (todoAdded(state, action) { state.todos.push(action.payload) }).

Both createSlice and createAsyncThunk will generate new action type strings and action creator functions for you. createSlice generates action creators based on the reducer functions you wrote in the createSlice.reducers object. createAsyncThunk will automatically generate action creators for the pending, fulfilled, and rejected actions.

When you use createSlice.reducers, the individual "case reducer" functions such as todoAdded are later available as todosSlice.caseReducers.todoAdded. However, any reducer functions you pass into the builder callback are not exposed that way. extraReducers also does not generate any new action creator functions - it's only meant to listen to existing action types.