Hairy Chris Hairy Chris - 6 months ago 184
Javascript Question

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

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

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(newState, action));
}