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.Iterable
.
When createStore
is invoked with initialState
that is an instance of Immutable.Iterable
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.
Create a store with initialState
set to an instance of Immutable.Iterable
:
import {
combineReducers
} from 'redux-immutable';
import {
createStore
} from 'redux';
const initialState = Immutable.Map();
const rootReducer = combineReducers({});
const store = createStore(rootReducer, initialState);
react-router-redux
routeReducer
does not work with Immutable.js. You need to use a custom reducer:
import Immutable from 'immutable';
import {
LOCATION_CHANGE
} from 'react-router-redux';
const initialState = Immutable.fromJS({
locationBeforeTransitions: null
});
export default (state = initialState, action) => {
if (action.type === LOCATION_CHANGE) {
return state.merge({
locationBeforeTransitions: action.payload
});
}
return state;
};
Pass a selector to access the payload state and convert it to a JavaScript object via the selectLocationState
option on syncHistoryWithStore
:
import {
browserHistory
} from 'react-router';
import {
syncHistoryWithStore
} from 'react-router-redux';
const history = syncHistoryWithStore(browserHistory, store, {
selectLocationState (state) {
return state.get('routing').toJS();
}
});
The 'routing'
path depends on the rootReducer
definition. This example assumes that routeReducer
is made available under routing
property of the rootReducer
.