Redux store does not have a valid reducer

Question

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

score 59 · Accepted Answer · answered Apr 04 '16 at 17:14

59

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.

answered Apr 04 '16 at 17:14

dannyjolie

10,959
3
33
28

Ah an easy miss, in my case it was automatically added by VS Code... – Omid Ariyan Feb 04 '22 at 10:46

score 34 · Answer 2 · answered Apr 13 '17 at 04:18

34

If the object is empty.

 export  default  combineReducers({

 })

This error will show.

answered Apr 13 '17 at 04:18

jiexishede

2,473
6
38
54

score 9 · Answer 3 · edited Oct 05 '20 at 06:13

../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

score 4 · Answer 4 · answered Jan 06 '22 at 03:46

4

store.js

FALSE

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

TRUE NOT USING {}

import charactersSlice from "./charactersSlice.js";

answered Jan 06 '22 at 03:46

Berkay Nayman

187
6

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](/help/how-to-answer). – Community Jan 06 '22 at 09:22

score 0 · Answer 5 · answered Apr 04 '16 at 16:29

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 : [] }.

answered Apr 04 '16 at 16:29

markerikson

63,178
10
141
157

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. – markerikson Apr 04 '16 at 16:55
I've updated the code and still getting the same error, updated code here – chrysillo Apr 04 '16 at 17:15

score 0 · Answer 6 · answered Aug 13 '20 at 13:47

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

score 0 · Answer 7 · answered May 31 '23 at 07:40

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";

answered May 31 '23 at 07:40

Mian Aamir Shehzad

21
5

Keshav Gera · Answer 8 · 2019-10-16T05:42:21.957

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

edited Oct 16 '19 at 05:42

answered Oct 10 '19 at 14:57

Keshav Gera

10,807
1
75
53

score -1 · Answer 9 · edited Aug 04 '20 at 21:21

-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.

edited Aug 04 '20 at 21:21

fcdt

2,371
5
14
26

answered Aug 04 '20 at 12:03

Baraja Swargiary

381
2
10

Redux store does not have a valid reducer

9 Answers9

Linked