immutable js in react redux application

I use redux-immutable. It has pretty straightforward usage instructions right in the README.

This is a very trivial reducer. I think as long as you have an understanding of immutable-js's data structures and their methods, it's not hard to simply use immutable's data structures in conjunction with redux actions. Here's a reducer that acts as a wrapper of an immutable of map. Not that you would every do something like this though, just wanted to show a trivial example.

Note that I'm always returning a a state operation because each state operation returns a "new version" of the state

Hope this helps

import { Map } from ‘immutable’;
function reducer (state = Map(), action) {
  switch(action.type) {
    case 'update':
      return state.set(action.key, action.value);
    case 'delete': 
      return state.delete(action.key)
    default:
      return state
  }
}

You need to do a few things. redux-immutable is nice for a combineReducers that works with immutable.

Basically, the entire state needs to be an Immutable object like Immutable.Map({})

Then you should use a "high ordered component" (HOC) to convert immutables to regular JS objects.

// reducers.js
import { connect } from 'react-redux'

import { toJS } from './toJS'
import DumbComponent from './dumb.component'

const mapStateToProps = state => {
  return {
    // obj is an Immutable object in Smart Component, but it’s converted to a plain
    // JavaScript object by toJS, and so passed to DumbComponent as a pure JavaScript
    // object. Because it’s still an Immutable.JS object here in mapStateToProps, though,
    // there is no issue with errant re-renderings.
    obj: getImmutableObjectFromStateTree(state)
  }
}
export default connect(mapStateToProps)(toJS(DumbComponent))

https://gist.github.com/quangv/52d7cf1b39b0611b4029e309e47944e2

// toJS.js
import * as React from 'react'
import { isCollection } from 'immutable'

/* Pass regular JS objects instead of Immutables to "dumb" components.
 *
 * http://redux.js.org/docs/recipes/UsingImmutableJS.html#use-a-higher-order-component-to-convert-your-smart-components-immutablejs-props-to-your-dumb-components-javascript-props
 */
export default Component => props => {

  const propsJS = Object.keys(props).reduce( function(newProps, key) {
    const value = props[key]

    if (isCollection(value)) {
      newProps[key] = value.toJS()  // convert Immutable to regular JS.
    } else {
      newProps[key] = value
    }

    return newProps

  }, {} )

  return <Component {...propsJS} />
}

Check out: http://redux.js.org/docs/recipes/UsingImmutableJS.html