hi I am getting an error about redux-toolkit.I don't know why it is showing me error and I have uploaded
full error: Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.
A non-serializable value was detected in an action, in the path: register
. Value: ƒ register(key) {
pStore.dispatch({
type: constants__WEBPACK_IMPORTED_MODULE_0.REGISTER,
key: key
});
}
Take a look at the logic that dispatched this action:
store.js
import {configureStore} from "@reduxjs/toolkit";
import authReducer from "./authSlice";
import userReducer from "./userSlice";
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import { combineReducers } from "redux";
const persistConfig = {
key: 'root',
storage,
}
const reducer = combineReducers({
reducer:{
auth: authReducer,
users: userReducer
},
});
const persistedReducer = persistReducer(persistConfig, reducer)
const store = configureStore({
reducer: persistedReducer
});
export const persistor = persistStore(store)
export default store;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/font-awesome/css/font-awesome.min.css';
import { PersistGate } from 'redux-persist/integration/react'
import { Provider } from 'react-redux';
import store, {persistor} from './redux/store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
// <React.StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
// </React.StrictMode>
);
authSlice.js
import { createSlice } from "@reduxjs/toolkit";
const authSlice = createSlice({
name: "auth",
initialState: {
login:{
currentUser: null,
isFetching: false,
error: false
},
register:{
isFetching: false,
error: false,
success: false
},
// // LogOut
// logout: {
// isFetching: false,
// error: false
// }
},
reducers:{
loginStart: (state) => {
state.login.isFetching = true;
},
loginSuccess:(state,action) => {
state.login.isFetching = false;
state.login.currentUser = action.payload;
state.login.error = false;
},
loginFailed: (state) => {
state.login.isFetching = false;
state.login.error = true;
alert("Tài Khoản hoặc Mật Khẩu không chính xác!!!!");
},
// Resgister
registerStart: (state) => {
state.register.isFetching = true;
},
registerSuccess:(state) => {
state.register.isFetching = false;
state.register.error = false;
state.register.success = true;
alert("Đăng Ký Thàng Công!!!");
},
registerFailed: (state) => {
state.register.isFetching = false;
state.register.error = true;
state.register.success = false;
alert("Vui lòng nhập tên Đăng Nhập hoặc Email khác!!!!");
},
// Logout
logOutStart: (state) => {
state.login.isFetching = true;
},
logOutSuccess:(state) => {
state.login.isFetching = false;
state.login.currentUser = null;
state.login.error = false;
},
logOutFailed: (state) => {
state.login.isFetching = false;
state.login.error = true;
},
}
});
export const {
loginStart,
loginFailed,
loginSuccess,
registerStart,
registerSuccess,
registerFailed,
logOutStart,
logOutSuccess,
logOutFailed
} = authSlice.actions;
export default authSlice.reducer;
userSlice.js
import { createSlice } from "@reduxjs/toolkit";
const userSlice = createSlice({
name: "user",
initialState:{
users: {
allUsers:null,
isFetching: false,
error: false
},
},
reducers:{
getUserStart: (state) =>{
state.users.isFetching = true;
},
getUserSuccess: (state, action) => {
state.users.isFetching = false;
state.users.allUsers = action.payload;
},
getUserFailed: (state) => {
state.users.isFetching = false;
state.users.error = true;
}
}
})
export const {
getUserStart,
getUserSuccess,
getUserFailed
} = userSlice.actions;
export default userSlice.reducer;
CodePudding user response:
you could try this
const reducer = combineReducers({
auth: authReducer,
users: userReduce
});