First of all The directory structure is as follows
├─redux
│ │ store.js
│ │
│ └─slices
│ userSlice.js
store.js
import { configureStore, combineReducers } from "@reduxjs/toolkit";
import userSlice from "./slices/userSlice";
const rootReducer = combineReducers({
userSlice,
});
const store = configureStore({
reducer: rootReducer,
});
export default store;
userSlice.js
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
loginState: false,
accessToken: "",
userId: "",
};
const userSlice = createSlice({
name: "userReducer",
initialState,
reducers: {
setLogin: (state, action) => {
state.loginState = true;
state.accessToken = action.payload;
},
},
});
export const { setLogin } = userSlice.actions;
export default userSlice;
Each code is as follows
I need a few more reducers, so I used a combineReducer and, I connected the reducer through configureStore, but the following error continues to occur
Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.
I don't know which one is the problem.
CodePudding user response:
Because you are passing a slice
to the combineReducers(...)
. And slice
!== reducer
.
In your userSlice.js
, you may want to change the last line to:
// export default userSlice;
export default userSlice.reducer;
You can take a look at the docs: https://redux-toolkit.js.org/api/createSlice
The generated reducer function is suitable for passing to the Redux combineReducers function as a "slice reducer".