redux toolkit state is not changing

Question

When I send request I got my data back in json and I can see it when console.log(). But when I try to change my state, it's not changing. Can you guys please help me to understand why? Don't judge too hard I am still learning. Thank you

Here is my code

export const login = createAsyncThunk(
     'auth/login',
     async (user) => {
          try {
               const response = await loginUser(user);
               console.log(response.data) /// data present
               return response.data
          } catch (error) {
               console.log(error)
          }
     }
)

export const authSlice = createSlice({
     name: 'auth',
     initialState: { user: {}, status: '', message: '', success: false, error: '' },
     reducers: {
          [login.pending]: (state, action) => (
               state.status = 'loading'
          ),
          [login.fulfilled]: (state, { payload }) => {
               state.user = payload.user
               state.status = 'success'
               state.message = payload.message
               state.success = true
               state.error = ''
          },
          [login.rejected]: (state, { payload }) => {
               state.user = payload
               state.status = 'failed'
               state.success = false
               state.error = payload
          }
     }
})

Answer 1

You need use the extraReducers with builder, something like that :

reducers: {
    //something, we don't care it
  },
  extraReducers: (builder) => {
    builder.addCase(login.pending, (state) => {
      state.status = what you want
    });
    builder.addCase(login.fulfilled, (state) => {
      blabla
    });
    ... and again and again 
  },

see https://redux-toolkit.js.org/api/createAsyncThunk (all is on the doc, no better source for RDK)