Using both redux-immutablejs and redux-optimist

foo.md

redux-optimist usage

import optimist from 'redux-optimist';
import { combineReducers } from 'redux';
import todos from './todos';

export default optimist(combineReducers({
  todos
}));

redux-immutablejs usage

import { combineReducers } from 'redux-immutablejs';
import * as reducers from './reducers';
export default combineReducers(reducers);

So the question is, how to use them together?

optimist wants to be called on the result of combineReducers from redux.

immutablejs wants to BE combineReducers. ImmutableJS' combineReducers transforms the resulting combined state tree into an ImmutableJS Map, so to get individual state out, you have to use ImmutableJS APIs. So I assumed this would be the way to go:

import { combineReducers } from 'redux-immutablejs';  // <= note this is redux-immut
import optimist from 'redux-optimist';
import * as reducers from './reducers';
export default optimist(combineReducers(reducers));

The error that occurs in the ImmutableJS combineReducers replacement when attempting to deal with state changes. state.get is undefined on the last line. get is a ImmutableJS function. The state passed in is expected to be an ImmutableJS object and in this case it isn't.

The reason it is not an ImmutableJS object is because optimist transforms/rebuilds the state internally which strips it of its ImmutableJS-ness. It turns the state vanilla and, understandably so, redux-immutable breaks attempting to access it.

Solution?

You can choose to not use this combineReducers and just use Immutable reducers. This means that you access each individual reducer by name, and its data using ImmutableJS APIs.

So this

mapStateToProps: (state) => {
  return { 
    initialSettings: state.getIn(['count', 'settings']) 
  };
}

turns into this

mapStateToProps: (state) => {
  return { 
    initialSettings: state.count.get('settings') 
  };
}