Hairy Chris Hairy Chris - 5 months ago 101
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.


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.

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));