How can I combine multiple combineReducers functions in Redux using something like immutable.js

Question

I am using immutable.JS to manage my stores via redux-immutablejs. I would now like to use the redux-form library but I am having an issue combining reducers.

Redux-immutable provides a combineReducers function that will check if all the reducers it is passed return immutable objects.

Redux itself provides a combineReducers function that performs no such checking.

Redux-form requires that you include their reducers but I cannot do so using Redux immutable's combineReducers as it will fail.

So what I'm trying to do is basically combine the outputs of these two functions like so:

import { combineReducers } from 'redux';
import { combineReducers as combineReducersUtils } from 'redux-utils';
import {reducer as formReducer} from 'redux-form';

const mainReducers = combineReducersUtils({
  devices, alarms
});

const extraReducers = combineReducers({
  form: formReducer
});

export default (mainReducers + extraReducers);

The last line obviously doesn't work but illustrates basically what I'm after.

Thanks for taking the time to read this.

Answer 1

Maybe something like this?

function rootReducer(state, action) {
  const newState = combineReducersUtils({devices, alarms})(state, action);
  return combineReducers({form: formReducer})(newState, action);
}

It should work because the return value of combineReducers is just a reducer:

(Function): A reducer that invokes every reducer inside the reducers object, and constructs a state object with the same shape.

https://github.com/rackt/redux/blob/master/docs/api/combineReducers.md

---

Updated to not create a new function on every dispatch:

const mainReducers = combineReducersUtils({devices, alarms});
const formReducers = combineReducers({form: formReducer});

function rootReducer(state, action) {
  return formReducers(mainReducers(state, action), action);
}