immutable js in react redux application

1

votes

How to use immutable js in react redux application ? I'm trying to use, but I'm not able to use it.

I want to use immutable.js in my react application. I'm using redux in my react application. I'm trying to use immutable.js in reducer. I'm not getting how to update the state & delete the data from state.

reactjsreduximmutable.js

If you post the code from one of the reducers, it would make offering help easier. - mason505

import * as types from '../constants'; // Inital stage of Reducer const InitialState = { isLoading:false, data: [], notification: null }; // Reducer export const myReducer = (state= InitialState , action = null) => { switch(action.type) { case types.IS_LOADING: return Object.assign({}, state, {isLoading:true}); case types.GET_DATA: return Object.assign({}, state, {isLoading:false, data:action.payload.data, notification: "Success" }); default: return state; } } - Sunil tc

This is my reducer. - Sunil tc

this is a good place to start toptal.com/react/react-redux-and-immutablejs - Deadfish

teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html is also a good place to start, if you're inclined towards something heavy - Sean Kwon

2

votes

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

0

votes

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

0

votes

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

immutable js in react redux application

3 Answers