Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Issue with Redux – Store does not have a valid reducer

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.

Redux_error_message

DevTools_undefined

Tags:

2

Answers


  1. 0

    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;
    Login or Signup to reply.
  2. 0

    The issue occurs because you are not properly defining your authReducer in rootReducer. The authReducer exported from your slice is not compatible with how you’re adding it to the rootReducer. The problem arises from the fact that authReducer in your slice is a slice object, and you need to export its reducer specifically.

    Here’s hou you can fix it step by step:

    FIX authReducer.js
    Make sure you are exporting the reducer correctly:

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

export const authSlice = createSlice({
    name: "auth",
    initialState: {
        successMessage: "",
        errorMessage: "",
        loader: false,
        userInfo: "",
    },
    reducers: {
        // Define your reducers here if needed
    },
    extraReducers: () => {
        // Handle extra actions if needed
    },
});

export default authSlice.reducer; // Export only the reducer

    FIX rootReducer.js

    In rootReducer.js make sure you are correctly importing the reducer:

    import authReducer from "./authReducer";

const rootReducer = {
    auth: authReducer, // This key must match your state structure
};

export default rootReducer;

    FIX store.js
    Your store.js appears correct, but make sure everthing matches the updates:

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

const store = configureStore({
    reducer: rootReducer, // Combine reducers properly
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
            serializableCheck: false, // Disable serializable check if necessary
        }),
    devTools: true, // Enable Redux DevTools
});

export default store;

    Explanation of the Error

    The error occurs because rootReducer is expected to have values that are Redux-compatible reducers. If authReducer is not exporting the correct reducer (e.g., authSlice.reducer), the structure becomes invalid, resulting in the error Store does not have a valid reducer.

    Redux DevTools Check

    After making these changes, open your Redux DevTools and verify that the state is displayed as expected:

    auth
  successMessage: ""
  errorMessage: ""
  loader: false
  userInfo: ""
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search