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

user_14711009 0
Viewed 2790

Pls tell me what I did wrong? configureStore.js:

import {configureStore, combineReducers} from "@reduxjs/toolkit";
import pokemonSearchSlice from "./slices/pokemonSearch";

const reducer = combineReducers({
pokemonSearch: pokemonSearchSlice
});

const store = configureStore({
reducer
});



export default store;

pokemonSearch.js

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



const pokemonSearchSlice = createSlice({
    name: "pokemonSearch",
    initialState: {
        searchInputValue: ""
    },
    reducers: {
setValue:(state, action)=>({...state, searchInputalue: action.payload})
    }
}) ;



export const {setValue} = pokemonSearchSlice.actions;

export default pokemonSearchSlice;

Full text of error: redux.js:394 Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers. Also I'm not able to get that "searchInputValue" from the store, console says :Cannot destructure property 'searchInputValue' of '(0 , react_redux__WEBPACK_IMPORTED_MODULE_2__.useSelector)(...)' as it is undefined. But I think it's because of combineReducers error. Any suggestions?

redux-toolkit redux reactjs
2 Answers

There's a few issues here:

  • configureStore automatically calls combineReducers for you, so you don't want to do that directly.
  • configureStore's reducer object needs reducers, but you're passing it a slice. (The slice contains a reducer, but the slice itself is not a reducer.)
  • Your setValue is returning a new object, but RTK uses Immer, so you should mutate the state passed into the function and not return anything.

In the end your code should look like this:

// configureStore.js
import { configureStore } from "@reduxjs/toolkit";
import pokemonSearchSlice from "./slices/pokemonSearch";

const store = configureStore({
  reducer: {
    pokemon: pokemonSearchSlice,
  },
});

export default store;

// slices/pokemonSearch.js"
import { createSlice } from "@reduxjs/toolkit";

const pokemonSearchSlice = createSlice({
  name: "pokemonSearch",
  initialState: {
    searchInputValue: "",
  },
  reducers: {
    setValue: (state, action) => {
      state.searchInputValue = action.payload;
    },
  },
});

export const { setValue } = pokemonSearchSlice.actions;

export default pokemonSearchSlice.reducer;
user_2424930

You need to pass the reducer from the slice, like this

const pokemonSearchSlice = createSlice({
  name: "pokemonSearch",
  initialState: {
    searchInputValue: ""
  },
  reducers: {
    setValue: (state, action) => ({ ...state, searchInputalue: action.payload })
  }
});

const { actions, reducer } = pokemonSearchSlice;
export const {setValue} = actions;
export default reducer
user_70609760
Related