I am currently facing an issue with Redux coding in which this statement is coming up:

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

I would like to share with you team the codes from the files I have coded and the issue is triggered:

import {configureStore} from '@reduxjs/toolkit'
import rootReducer from './rootReducers'

const store =  configureStore({
    reducer: rootReducer,
    middleware: getDefaultMiddleware => {
        return getDefaultMiddleware({
            serializableCheck: false
        })
    },
    devTools: true
})

export default store

import { authReducer } from "./authReducer";

const rootReducer = {
    auth: authReducer,
}

export default rootReducer; 

import { createSlice } from "@reduxjs/toolkit";

export const authReducer = createSlice({
    name: 'auth',
    initialState:{
        successMessage: '',
        errorMessage: '',
        loader: false,
        userInfo: ''
    },
    reducers: {

    },
    extraReducers: () => {

    }
})

export default authReducer.reducer

I am trying to achieve that the Redux section from browser could display the following:

auth(pin)
  successMessage (pin): "",
  errorMessage (pin): "",
  loader (pin): "",
  userInfo (pin): ""

But the Redux-DevTools is displaying undefined (pin). Please find evidences of the issues from attached pictures and I would be very appreciated for your replies in order to get this issue solved.

I am currently facing an issue with Redux coding in which this statement is coming up:

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

I would like to share with you team the codes from the files I have coded and the issue is triggered:

import {configureStore} from '@reduxjs/toolkit'
import rootReducer from './rootReducers'

const store =  configureStore({
    reducer: rootReducer,
    middleware: getDefaultMiddleware => {
        return getDefaultMiddleware({
            serializableCheck: false
        })
    },
    devTools: true
})

export default store

import { authReducer } from "./authReducer";

const rootReducer = {
    auth: authReducer,
}

export default rootReducer; 

import { createSlice } from "@reduxjs/toolkit";

export const authReducer = createSlice({
    name: 'auth',
    initialState:{
        successMessage: '',
        errorMessage: '',
        loader: false,
        userInfo: ''
    },
    reducers: {

    },
    extraReducers: () => {

    }
})

export default authReducer.reducer

I am trying to achieve that the Redux section from browser could display the following:

auth(pin)
  successMessage (pin): "",
  errorMessage (pin): "",
  loader (pin): "",
  userInfo (pin): ""

But the Redux-DevTools is displaying undefined (pin). Please find evidences of the issues from attached pictures and I would be very appreciated for your replies in order to get this issue solved.

• javascript
• reactjs
• redux
• redux-toolkit

2 Answers 2

Issue

The auth reducer is the default export from the slice:

export default authReducer.reducer;

So it also needs to be default imported. Your code attempts to import a non-existent named authReducer export.

import { authReducer } from "./authReducer";

Solution Suggestion

Update import { authReducer } from "./authReducer"; to import authReducer from "./authReducer"; to correctly import the default exported auth reducer.

Code:

import { createSlice } from "@reduxjs/toolkit";

export const authReducer = createSlice({
  name: 'auth',
  initialState:{
    successMessage: '',
    errorMessage: '',
    loader: false,
    userInfo: ''
  },
  reducers: {
    // ...
  },
  extraReducers: () => {
    // ...
  },
});

export default authReducer.reducer;

import authReducer from "./authReducer";

const rootReducer = {
  auth: authReducer,
};

export default rootReducer; 

This issue is resolved by adding combineReducer as shown below:

import { combineReducers } from "@reduxjs/toolkit";
import authReducer from "./authReducer";


const rootReducer = combineReducers({auth: authReducer, });

export default rootReducer;

Then the contentSlice is displayed in Redux: