redux-merge-immutable-reducers

redux-merge-immutable-reducers

redux-merge-immutable-reducers is a tool for refactoring large application states into smaller reducers. It's like redux-merge-reducers, but for Immutable.js.

Usage

Let's say you're building a music player. You store the current song, a table of songs, and a table of artists in your application state.

// reducers/index.js

import Immutable from 'immutable';

const reducer = function(
  state = Immutable.Map({
    currentSong: 1, // song id
    timePlayed: 92, // seconds
    
    artists: Immutable.Map([1, Immutable.Map({
      id: 1,
      name: "The Clash",
    })]),
    
    songs: Immutable.Map([1, Immutable.Map({
      id: 1,
      name: "Heard 'Em Say",
    })]),
  })
) {
  // ...
  
  return state;
}

When you started, you only had to support playing songs, but as you've added features, your state has grown large and unwieldy, and the list of actions has grown correspondingly.

The canonical answer to this problem is to divide your state into smaller reducers and combine them using combineReducers. This works for songs and artists, but how can it work for currentSong and timePlayed? You would need to move them into a new reducer (player). This changes the position of those keys in the state (from state.get('currentSong') to state.getIn(['player', 'currentSong'])) and thus requires changes to all the selectors.

This library provides an alternative, mergeReducers, which allows you to factor out parts of your reducer without changing the position of any state keys.

// reducers/index.js

import artists from './artists';
import { combineReducers, mergeReducers } from 'redux-merge-immutable-reducers'; 
import player from './player';
import songs from './songs';

const reducer = mergeReducers(
  // because player is at the top level, currentSong and timePlayed are still accessible from state.get('currentSong') and state.get('timePlayed')
  player,
  combineReducers({
    artists,
    songs,
  })
);

This makes incremental refactoring very easy. You can factor out parts of your state into independent reducers without requiring changes to the state shape.

Why not use combineReducers from redux-immutable?

combineReducers from redux-immutable validates that the only keys in the state are the ones passed to combineReducers. This prevents it from being used with mergeReducers.