How can I merge multiple reducers?

Question

I have a file structure like below

store

• index.js
• reducers
  • organize
    • index.js
  • user
    • index.js
  • index.js

trying to combine organize and user reducers to reducers/index.js

import { combineReducers } from 'redux';
import organize from './organize';
import user from './user';

const rootReducer = combineReducers({
  organize,
  user,
});

export default rootReducer;

and store/index.js code like below

import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
export const store = createStore(rootReducer, compose(applyMiddleware(sagaMiddleware)));
sagaMiddleware.run(rootSaga);

when I replace store/reducers/index.js with just organize/index.js file, then everything works as expected. However, when I try to combine user/index.js + organize/index.js like that, then the reducer is not called by saga.

Am I missing something else?

Answer 1

I had the same issue the other day. Try add a key before the reducer in the combine reducer. Ie Const rootReducer = combineReducers({ Organize:organize, }) This works for me and when you try to get the state each state will be seperated by that set key.