CODEWITHSUNDEEP
reactjsreduxreducers
chrysillo
chrysillo

Reputation: 739

Redux store does not have a valid reducer

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

Upvotes: 50

Views: 84969

Answers (9)

Mian Aamir Shehzad
Mian Aamir Shehzad

Reputation: 198

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

Upvotes: 0

Berkay Nayman
Berkay Nayman

Reputation: 258

store.js

FALSE

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

TRUE NOT USING {}

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

Upvotes: 4

Exayy
Exayy

Reputation: 618

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

Upvotes: 9

ndotie
ndotie

Reputation: 2150

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

Upvotes: 0

Baraja Swargiary
Baraja Swargiary

Reputation: 449

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.

Upvotes: -1

Keshav Gera
Keshav Gera

Reputation: 11244

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;

Upvotes: -1

jiexishede
jiexishede

Reputation: 2613

If the object is empty.

 export  default  combineReducers({

 })

This error will show.

Upvotes: 36

dannyjolie
dannyjolie

Reputation: 11339

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.

Upvotes: 60

markerikson
markerikson

Reputation: 67459

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

Upvotes: 0

Related Questions