redux中使用immutable.js

1.immutable.js简介

        Facebook 工程师 Lee Byron 花费 3 年时间打造，与 React 同期出现，但没有被默认放到 React 工具集里（React 提供了简化的 Helper）。它内部实现了一套完整的 Persistent Data Structure，还有很多易用的数据类型。像 Collection、List、Map、Set、Record、Seq。有非常全面的map、filter、groupBy、reduce``find函数式操作方法。同时 API 也尽量与 Object 或 Array 类似。

2.不可变数据（Immutable Data）

        不可变数据指的是一经创建，就不能再被修改的数据。对Immutable对象的修改、添加、删除都会返回一个新的Immutable对象。Immutable实现的原理的是持久化数据结构，也就是使用旧数据创建新数据时要保证旧数据可用且不变。

3.为什么要使用Immutable

        redux中，为了保证reducer是一个纯函数，使用deep copy来拷贝 previous state,再依据action来加工状态，从而返回 new state。但是deep copy（对每一个节点都进行拷贝）会造成内存浪费，对浏览器的性能消耗也比较大，当state中数据过多、过深时这个缺点尤其明显。Immutable就可以很好地解决这个问题，Immutable使用了结构共享，即如果对象树中的一个节点发生变化，只拷贝这个节点和受他影响的父节点，其他节点进行共享。

        总结：immutable的不可变性让纯函数更强大，每次都返回新的immutable的特性让程序员可以对其进行链式操作，用起来更方便

5.在redux中如何使用

        5-1.先在项目内下载安装immutable     

cnpm install immutable --save

        5-2.把初始化state转化为immutable对象，需要用到一个API， Map() => 创建一个Map对象，类似于ES6的map。

import {Map} from 'immutable'

const state = Map({
    num: 10

})

        5-3.reducer函数中做一些修改,创建store对象操作不变

const reducer = (state, action) => {
    if(action.type === 'increment') {
        return state.set('num', action.data)
    }
    
    return state

}

另外：需要注意的是，在组建内获取state，因为当前state已经是一个Immutable对象，获取的时候要用get 或者  getIn（深层次的获取）获取。

6.Immutable常用API(下面写的方法map和list通用) 

7.Immutable.js的优缺点

        优点：

        1）降低mutable带来的复杂度

        2）节省内存空间        

        3） Undo/Redo，Copy/Paste，随意穿越！

                因为每次数据都是不一样的，只要把这些数据放到一个数组里储存起来，想回退到哪里就拿出对应数据即可，很容易开发出撤销重做这种功能。

        4）拥抱函数式编程

                Immutable（持久化数据结构）本身就是函数式编程中的概念。函数式编程关心数据的映射，命令式编程关心解决问题的步骤，纯函数式编程比面向对象更适用于前端开发。因为只要输入一致，输出必然一致，这样开发的组件更易于调试和组装。

        缺点：

          1）学习成本，要花时间学习Immutable.js的Api

          2)   要在项目内下载引入额外的资源

          3）容易与原生对象混