Things to configure this project with ImmutableJS

[mjangir]

I needed to install two npm packages: immutable and immutable-redux

Then I created a custom routeReducer as below:

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;
};

I modified rootReducer.js as below:

import { combineImmutableReducers } from 'immutable-redux'
import counter from './modules/counter'
import User from './modules/User'
import router from './modules/RouterReducer'

export default combineImmutableReducers({
  counter,
  User,
  router
})

And In main.js I changed the selectLocationState as below:

const initialState = Immutable.fromJS(window.__INITIAL_STATE__)
const store = configureStore(initialState, browserHistory)
const history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState: (state) => state.get('router').toJS()
});

And Its working absolutely fine with immutableJS reducers.

[jokeyrhyme]

All of this is done for you if you use redux-bootstrap :D :electric_plug:

[jenyckee]

Can someone give an update on what needs to be done with the current version?

[marshallford]

Personally I would not make the entire state immutable. IMO it is more trouble than it is worth especially when modules like react-router-redux rely on the ability to update state. Instead I would recommend making state a plain object and have individual reducers return Immutable records, maps, or whatever you need.

[jenyckee]

@marshallford but still you will need a way to combine your individual reducers if they rely on the same data and hence combine immutablejs objects?

[marshallford]

@jenyckee not quite sure what you are getting at but maybe this will help.

let reduxStore = {
  user: Immutable.Record({}),
  settings: Immutable.Map({}),
  todos: Immutable.List([]),
  router: ?
}

[jokeyrhyme]

There are definitely some added conveniences for having the root state be a plain Object instead of an Immutable.Map. However, if you use this approach, then you have to remember this inconsistency, and it means extra work serialising state to storage, etc.

I prefer to keep the whole state either Immutable or plain (or something else). It isn't that difficult to insulate yourself from the inconsistencies with some helper functions, but I'd just rather keep everything the same.

[gschwa]

I suggest seamless-immutable since it is easier to integrate and avoids polluting your code with ImmutableJS syntax.