How to combine several combReducers functions in Redux using something like immutable.js

Question

I use immutable.JS to manage my repositories through redux-immutablejs. Now I would like to use the library of reduction forms, but I had a problem of combining reducers.

Redux-immutable provides a function combReducers, which checks whether all reducers are passed, return immutable objects.

Redux itself provides a combReducers function that does not perform such a check.

Redux-form requires you to enable your reducers, but I cannot do this using the immutable Redux combux files, as this will fail.

So, what I'm trying to do is basically combine the output of these two functions as follows:

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 does not work, but basically illustrates what I need.

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 combReducers is just a reducer:

(Function): A reducer that calls each reducer inside a reducer object and creates 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 every time it is submitted:

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