一、作用

新手使用state时候，容易错误的直接更改state数据，在redux中这是不被允许的。Immutable 来解决这个问题。

Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。

二、immutable在react中的使用

• 安装

• npm install immutable

  第二步：在reducer.js中，将数据转成immutable，返回数据也返回一个Immutable对象，

  该对象中有searchFocused数据

• import * as constants from ‘./constants‘
  import {fromJS} from ‘immutable‘
  // const defaultState = {
  //     searchFocused: false
  // }
  const defaultState = fromJS({
      searchFocused: false
  })
  export default (state=defaultState,action) => {
      if(action.type === constants.SEARCH_FOCUS){
          // return {
          //     searchFocused: true
          // }
          // set是返回了一个全新的对象（这个对象里面的数据是之前对象的数据和现在更改的结合），但是没有更改原来对象的数据
          return state.set(‘searchFocused‘,true)
      }
      if(action.type === constants.SEARCH_BLUR){
          // return {
          //     searchFocused: false
          // }
          return state.set(‘searchFocused‘,false)
      }
      return state
  }

  第三步：使用的时候，不能直接state点下面的属性，因为返回得到是一个Immutable对象，要获取数据得用get方法

• const mapStateToProps = (state) => {
      return {
          // searchFocused: state.header.searchFocused
          searchFocused: state.header.get("searchFocused")
      }
  }

   第四步：使用redux-immutable来统一数据格式

　　　上面代码中，state还不是一个immutable对象，stata.header又是一个immutable对象，这样数据格式不统一，容易写错，最好是state也是immutable对象

　　　写成下面这样统一数据

state.get("header").get("searchFocused")

如何把state也转成state对象，就需要在主store的reducer.js中，将combineReducers方法从redux-immutable中导入，而不是从redux中导入，这样reducer返回的state就是immutable对象了。

先npm i redux-immutable

在项目更目录的store文件夹下的reducer.js中：

// import {combineReducers} from ‘redux‘
import {combineReducers} from ‘redux-immutable‘
import {reducer as headerReducer} from ‘../common/header/store‘

const reducer =  combineReducers({
    // 给这个分支
    header: headerReducer
})

export default reducer

 此时组件组获取数据，就可以写成如下方式了

const mapStateToProps = (state) => {
    return {
        // searchFocused: state.header.searchFocused
        searchFocused: state.get("header").get("searchFocused")
    }
}

immutable还挺提供了其他api，也可以这么写：

//searchFocused: state.get("header").get("searchFocused")
searchFocused: state.getIn(["header","searchFocused"])

immutable保证store state数据不可直接修改

原文：https://www.cnblogs.com/shengjunyong/p/12082737.html