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; }
In this article, we are going to learn about Reducer in Redux. A reducer is a pure function that determines changes to an application's state. Reducer is one of the building blocks of Redux.
In Redux, a reducer is a pure function that takes an action and the previous state of the application and returns the new state. The action describes what happened and it is the reducer's job to return the new state based on that action.
Having multiple reducers become an issue later when we create the store for our redux. To manage the multiple reducers we have function called combineReducers in the redux. This basically helps to combine multiple reducers into a single unit and use them.
A store is an immutable object tree in Redux. A store is a state container which holds the application's state. Redux can have only a single store in your application. Whenever a store is created in Redux, you need to specify the reducer. Let us see how we can create a store using the createStore method from Redux.
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
.
If the object is empty.
export default combineReducers({ })
This error will show.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With