How to use Immutable.js with redux?

Taking your good example with Immutable

import {    ACTIVATE_LOCATION} from './actions';import { Map } from 'immutable';const initialState = Map({})export let ui = (state = initialState, action) => {  switch (action.type) {    case ACTIVATE_LOCATION:      return state.set('activeLocationId', action.id);    default:      return state;  }};

Immutable.js ought to be used in each reducer as needed, e.g.

import {    ACTIVATE_LOCATION} from './actions';import Immutable from 'immutable';export let ui = (state, action) => {    switch (action.type) {        case ACTIVATE_LOCATION:            state = Immutable                .fromJS(state)                .set('activeLocationId', action.id)                .toJS();            break;    }    return state;};

However, there is a lot of overhead in this example: every time reducer action is invoked, it has to convert JavaScript object to an an instance of Immutable, mutate the resulting object and convert it back to JavaScript object.

A better approach is to have the initial state an instance of Immutable:

import {    ACTIVATE_LOCATION} from './actions';import Immutable from 'immutable';let initialState = Immutable.Map([]);export let ui = (state = initialState, action) => {    switch (action.type) {        case ACTIVATE_LOCATION:            state = state.set('activeLocationId', action.id);            break;    }    return state;};

This way, you only need to convert the initial state to an instance of Immutable ounce. Then each reducer will treat it as an instance of Immutable and pass it down the line as an instance of Immutable. The catch is that now you need to cast the entire state to JavaScript before passing the values to the view context.

If you are performing multiple state mutations in a reducer, you might want to consider batching mutations using .withMutations.

To make things simpler, I have developed a redux-immutable library. It provides combineReducers function thats equivalent to the function of the same name in the redux package, except that it expect the initial state and all reducers to work with Immutable.js object.

If you're just looking for an easy way to make updates without mutation, I maintain a library: https://github.com/substantial/updeep which, in my opinion, is a good way to do that with redux.

updeep lets you work with regular (frozen) object hierarchies, so you can do destructuring, see objects in logs and the debugger, etc. It also has a powerful API that allows for batch updating. It's not going to be as efficient as Immutable.js for large data sets because it does clone objects if it needs to.

Here's an example (but check those in the README for more):

import {    ACTIVATE_LOCATION} from './actions';import u from 'updeep';export let ui = (state = [], action) => {    switch (action.type) {        case ACTIVATE_LOCATION:            state = u({ activeLocation: action.id }, state);            break;    }    return state;};