immutable in the redux

What is immutable Data?

Immutable Data that once created, the data can no longer be changed. Immutable objects to add or delete any modifications will return a new Immutable objects. Immutable principle is implemented Persistent Data Structure (persistent data structure), that is, when you create a new data using the old data, old data at the same time to ensure available and unchanged. DeepCopy and to avoid all the nodes are copied over the performance cost, using the Immutable Structural Sharing (Sharing structure), i.e., if a node occurs in the object tree variations, modifications, and only this node affected by it's parent node, other nodes the sharing.

immutable using:

1, the installation

npm i immutable redux-immutable

2, the store / index.js construct store module

import { createStore } from 'redux'
import rootReducers from './rootReducers';

const store = createStore( rootReducers )

export default store 

3, build reducers in the store folder

import { combineReducers } from 'redux-immutable';
import count from './count/reducers'
const rootReducers = combineReducers({
  count
})

export default rootReducers

4, the data packet to create redux

//state.js
//使用从immutable中解构出来的Map模块定义数据
import { Map } from 'immutable'
const state = Map({
  count: 0
})

export default state 


//分片的reducers.js
import state from './state'
import * as type from './type'
const reducers = ( newState = state, action ) => {

  switch ( action.type ) {

    case type.INCREMENT:
      //数据操作
      // newState immutable对象
      return newState.set('count', newState.get('count') + 1 )

      break;
    default:
      return newState
      break;
  }
}
export default reducers



//actionCreator.js
import * as type from './type'
const actionCreators = {
  increment () {
    const action = {
      type: type.INCREMENT
    }
    return action 
  }
}
export default actionCreators

5, used in the assembly

import React ,{ Component } from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import actionCreators from '../store/count/actionCreators'

class Content extends Component {
   render(){
      return (
         <div>
            <button onClick ={this.props.increment} >+</button>
            <p> count: {this.props.count.get('count')}</p>
         </div>
      )
   }
}

//组件通过props获取属性，在connect的第一个参数的回调函数里，需要使用getIn()方法，否则组件内直接获取数据报错
export default connect( state => ({
   count: state.getIn(['count'])
 }) ,dispatch => bindActionCreators(actionCreators,dispatch)
 )(Content)

immutable use of experience

1. When operating store data before the object type is not used in the Immutable not want to modify the original data when the usual practice is to copy, modify do update operations on the data replication; but every deep-copy must put the entire object recursive copy, if you encounter a very complex object type of data, so performance will be poor; but now the Immutable, when we do a set operation time, Immutable.js only modify the nodes and affected by it parent node, other nodes are shared, can greatly improve performance;

2. shouldComponentUpdate react in the method, it is determined whether the component needs to be updated; data type for complex objects, to compare the value of two objects are equal is very troublesome; Immutable and method is provided, two to judge Immutable object value are equal;

3. As Immutable provides a rich API, for the operation of complex data structures has become very easy and intuitive;