Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Redux-toolkit: Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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;

>Solution :

you could try this

const reducer = combineReducers({
  auth: authReducer,
  users: userReduce
});

https://redux.js.org/api/combinereducers

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading