'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 |
|---|
