Home > Software engineering >  Redux-toolkit: Store does not have a valid reducer. Make sure the argument passed to combineReducers
Redux-toolkit: Store does not have a valid reducer. Make sure the argument passed to combineReducers

Time:12-09

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
});

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

  • Related