Redux 中使用 immutable

初始化

1. 安装依赖

   在 react 中，使用 immutable 需要两个依赖：immutable 和 redux-immutable

   cnpm i immutable redux-immutable -S

2. 配置基础Redux

   Redux入门配置和使用

3. 在 store/index.js 文件中，创建 store 的时候， 将 'redux' 依赖中的 combineReducers 替换成 'redux-immutable' 依赖中的 combinReducers

   import { createStore /*, combineReducers*/ } from 'redux'
   import { combineReducers } from 'redux-immutable'
   // ...
   

   原本 combineReducers 是从 'redux' 依赖中引入的，这样做的目的是为了使用 immutable 对象，就把根目录中的对象替换成 immutable 对象。

4. 在 store/reducers 文件中，引入 immutable 依赖，将 defauleState 改成用 immutable 对象 的方式创建。

   import immutable from 'immutable'
   
   // 用 fromJS 方法深层创建 immutable 对象，保证对象以及对象内所有的东西都是 immutable 对象
   let defaultState = immutable.fromJS({
       name:"Apple",
       list:[]
   })
   
   export default (state=defaultState,action)=>{
       // ...
       return state;
   }
   

   如果还没有掌握 immutable 语法的伙伴，可以先浏览一下这个文档：

   immutable语法入门基础

Redux 中使用 immutable

1. 取值

   在组件中，与以往的取值方式不同，用了 immutable 对象之后，state 已经变成了 immutable 的数据结构，所以取值的方式要使用 get 或者 getIn api

   const mapStateToProps = (state) => ({
       // 从我的 myModule 模块中，取出 name 的值，赋给当前组件的 name
       name:state.getIn(["myModule","name"])
   })
   

2. 操作 immutable 对象

   在 store/reducers 中的文件中，对 immutable 对象的操作也要按照 immutable 的语法。在此时， immutable 的优越性就显现出来了：

   • 直接操作，不需要对 state 进行克隆！
   • 因为返回值一致，可以链式操作！
   • 优化了性能！还能让你少敲几次键盘！

   import immutable from 'immutable'
   
   // 用 fromJS 方法深层创建 immutable 对象，保证对象以及对象内所有的东西都是 immutable 对象
   let defaultState = immutable.fromJS({
       name:"Apple",
       list:[]
   })
   
   export default (state=defaultState,action)=>{
       switch(action.type){
           case "修改name":
               return state.updateIn(["name"],()=>"newName");
           case "把name添加到list里":
               // 连续对state使用了两个updateIn，一行代码完成了对内部的两个值的更新
               return state.updateIn(["list"],(list)=>list.push(state.getIn(["name"])))
                   .updateIn(["name"],(name)=>"")
       }
       return state;
   }
   

小结

至此，immutable 的使用流程已经完成了。我们会发现使用 immutable 数据结构，和直接使用 Redux 的区别好像没有那么大。但是在实际的开发当中，我们对JS的习惯会使我们在对 immutable 对象的操作的时候犯下不少错误。所以真正用它的时候还是要保持细心和耐心啊。

而且，目前 immutable 数据结构对 React 中的一些插件可能会有不兼容的情况，如果使用 fromJS 和 toJS 不断的进行转换从而兼容这些插件的话，那我们用它优化的性能就又浪费掉了。所以要根据实际情况来选择到底要不要使用 immutable。