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

Nereus

Answer 1

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

Ah an easy miss, in my case it was automatically added by VS Code... – Oakleil

Answer 2

If the object is empty.

 export  default  combineReducers({

 })

This error will show.

Cherin

Answer 3

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

Answer 4

store.js

FALSE

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

TRUE NOT USING {}

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

Nowak

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

Answer 5

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

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 here – Nereus

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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