'state is null - redux toolkit access state with extraReducers but no reducer

I'm using createAsyncThunk from @reduxjs/toolkit to handle my state with extraReducers

export const loginUser = createAsyncThunk(
  "accounts/login",
  async (data, { rejectWithValue }) => {
    const csrftoken = getCookie("csrftoken");
    try {
      let res = await axios({
        url: "mylogin/url",
        method: "post",
        headers: {
          "X-CSRFToken": csrftoken,
        },
        data: {
          username: data.user_name,
          pwd: data.password,
        },
      });
      return res.data;
    } catch (err) {
      return rejectWithValue(err.response.status);
    }
  }
);

const loginSlice = createSlice({
  name: "login",
  initialState: {
    isLoggedIn: false,
    pending: null,
    error: null,
    userInfo: {
      name: "",
      pwd: "",
      email: "",
    },
  },
  reducers: {},
  extraReducers: {
    [loginUser.pending]: state => {
      state.pending = true;
      state.error = false;
    },
    [loginUser.fulfilled]: (state, action) => {
      state.pending = false;
      state.isLoggedIn = true;
      state.userInfo = action.payload;
    },
    [loginUser.rejected]: (state, action) => {
      state.pending = false;
      state.error = true;
    },
  },
});

then in the index_store.js I configured my store:

const store = configureStore({
  reducer: {
    login: loginSlice.reducer,
  },
});

export default store;

I used also the provider in my index.js

<Provider store={store}>
...
</Provider>

then I tried to access my state variable isLoggedIn in my component

const isLoggedIn = useSelector(state => state.auth.isLoggedIn);

but I got this error :

Uncaught TypeError: Cannot read properties of null (reading 'useContext')


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source