redux-immutable

redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

When Redux createStore reducer is created using redux-immutable then initialState must be an instance of Immutable.Collection.

Problem

When createStore is invoked with initialState that is an instance of Immutable.Collection further invocation of reducer will produce an error:

The initialState argument passed to createStore has unexpected type of "Object". Expected argument to be an object with the following keys: "data"

This is because Redux combineReducers treats state object as a plain JavaScript object.

combineReducers created using redux-immutable uses Immutable.js API to iterate the state.

Usage

Create a store with initialState set to an instance of Immutable.Collection:

1import {
2  combineReducers
3} from 'redux-immutable';
4
5import {
6  createStore
7} from 'redux';
8
9const initialState = Immutable.Map();
10const rootReducer = combineReducers({});
11const store = createStore(rootReducer, initialState);

By default, if state is undefined, rootReducer(state, action) is called with state = Immutable.Map(). A different default function can be provided as the second parameter to combineReducers(reducers, getDefaultState), for example:

1const StateRecord = Immutable.Record({
2	foo: 'bar'
3});
4const rootReducer = combineReducers({foo: fooReducer}, StateRecord);
5// rootReducer now has signature of rootReducer(state = StateRecord(), action)
6// state now must always have 'foo' property with 'bar' as its default value

When using Immutable.Record it is possible to delegate default values to child reducers:

1const StateRecord = Immutable.Record({
2	foo: undefined
3});
4const rootReducer = combineReducers({foo: fooReducer}, StateRecord);
5// state now must always have 'foo' property with its default value returned from fooReducer(undefined, action)

In general, getDefaultState function must return an instance of Immutable.Record or Immutable.Collection that implements get, set and withMutations methods. Such collections are List, Map and OrderedMap.

Using with react-router-redux v4 and under

react-router-redux routeReducer does not work with Immutable.js. You need to use a custom reducer:

1import Immutable from 'immutable';
2import {
3  LOCATION_CHANGE
4} from 'react-router-redux';
5
6const initialState = Immutable.fromJS({
7  locationBeforeTransitions: null
8});
9
10export default (state = initialState, action) => {
11  if (action.type === LOCATION_CHANGE) {
12    return state.set('locationBeforeTransitions', action.payload);
13  }
14
15  return state;
16};

Pass a selector to access the payload state and convert it to a JavaScript object via the selectLocationState option on syncHistoryWithStore:

1import {
2  browserHistory
3} from 'react-router';
4import {
5  syncHistoryWithStore
6} from 'react-router-redux';
7
8const history = syncHistoryWithStore(browserHistory, store, {
9  selectLocationState (state) {
10      return state.get('routing').toJS();
11  }
12});

The 'routing' path depends on the rootReducer definition. This example assumes that routeReducer is made available under routing property of the rootReducer.

Using with react-router-redux v5

To make react-router-redux v5 work with Immutable.js you only need to use a custom reducer:

1import {
2  Map
3} from 'immutable';
4import {
5  LOCATION_CHANGE
6} from 'react-router-redux';
7
8const initialState = Map({
9  location: null,
10  action: null
11});
12
13export function routerReducer(state = initialState, {type, payload = {}} = {}) {
14  if (type === LOCATION_CHANGE) {
15    const location = payload.location || payload;
16    const action = payload.action;
17
18    return state
19      .set('location', location)
20      .set('action', action);
21  }
22
23  return state;
24}
25