Redux store does not have a valid reducer
Asked Answered
N

9

50

Haven't been able to find anything around here regarding this error:

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

My reducer

export default function FriendListReducer(state = {friends : []}, action) {
  switch (action.type) {
    case 'ADD_FRIEND':
      return [
        { friends : action.payload.friend }, ...state.friends
      ]     
    default:
      return state;
  }
  return state;
}

Combiner

import { combineReducers } from 'redux';
import { FriendListReducer } from './FriendListReducer';

const rootReducer = combineReducers({
  friends: FriendListReducer
});
export default rootReducer;

My store config

import { applyMiddleware, createStore } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from '../reducers/reducers';

export default function configureStore(initialState = { friends: [] }) {
  const logger = createLogger({
    collapsed: true,
    predicate: () =>
    process.env.NODE_ENV === `development`, // eslint-disable-line no-unused-vars
  });

  const middleware = applyMiddleware(thunkMiddleware, logger);

  const store = middleware(createStore)(rootReducer, initialState);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers/reducers', () => {
      const nextRootReducer = require('../reducers/reducers').default;
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}
Nereus answered 4/4, 2016 at 16:22 Comment(0)
K
60

Your import statement is incorrect. Either you use import { Foo } from 'bar' together with export Foo, or use import Foo from 'bar' if you export with export default Foo.

In other words, change either export default function FriendListReducer to export function FriendListReducer, or change the import statement from import { FriendListReducer } to import FriendListReducer.

Karelian answered 4/4, 2016 at 17:14 Comment(1)
Ah an easy miss, in my case it was automatically added by VS Code...Oakleil
C
35

If the object is empty.

 export  default  combineReducers({

 })

This error will show.

Cherin answered 13/4, 2017 at 4:18 Comment(0)
A
9

../reducers/reducers ? it's a strange naming

Anyway, it seems ../reducers/reducers doesn't return a reducer, if reducers is a directory, put a index.js inside, import each reducer and create a root reducer

import FriendListReducer from "./FriendListReducer"

const rootReducer = combineReducers({
   friendList : FriendListReducer
})

export default rootReducer

Important!! you will have state.friendList in your state.

I hope it will help

Aphrodisiac answered 4/4, 2016 at 16:33 Comment(0)
N
4

store.js

FALSE

  • import { charactersSlice } from "./charactersSlice.js";

TRUE NOT USING {}

  • import charactersSlice from "./charactersSlice.js";
Nowak answered 6/1, 2022 at 3:46 Comment(1)
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.Wed
D
0

It looks like your top-level reducer function is using an array as its default value. Redux expects that the very top of your state will be an object, not an array. Try putting the array at a particular key in that object, like { friendList : [] }.

Dispenser answered 4/4, 2016 at 16:29 Comment(2)
Your "initialState" value you're passing to the store doesn't matching the structure you're creating using combineReducers. You're giving combineReducers a field named FriendListReducer, but the store initial state has friends. You need to make those match one way or the other. Since they don't match, you've still got the same problem.Dispenser
I've updated the code and still getting the same error, updated code hereNereus
M
0

on above your codes

import { FriendListReducer } from './FriendListReducer';

const rootReducer = combineReducers({
  friends: FriendListReducer
});
export default rootReducer;

instead of import { FriendListReducer } from './FriendListReducer';

just say import FriendListReducer from './FriendListReducer';

since FriendListReducer was exported with export default FriendListReducer and not export const FriendListReducer

Mystique answered 13/8, 2020 at 13:47 Comment(0)
O
0

I faced this error because of the wrong import import { tasksSlice } from "./TaskSlice";

Right Way

Then, I did the import like import tasksSlice from "./TaskSlice";

Onrush answered 31/5, 2023 at 7:40 Comment(0)
T
-1
Please check your combine reducer file It's empty......

you have forgot bind reducer here

import {combineReducers, createStore} from 'redux'
import listDataReducer from '../reducers/ListDataReducer'

const rootReducer = combineReducers({
    listDataReducer,         //  Please add your reducer here
});

export default rootReducer;
Threeply answered 10/10, 2019 at 14:57 Comment(0)
P
-1

I also faced the problem. What I did was instead of:

combineReducers(productReducer, cartReducer)

I did:

combineReducers({ productReducer, cartReducer })

and it worked. It expects a valid object for the store.

Pohl answered 4/8, 2020 at 12:3 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.