React中immutable的使用（优化级深拷贝）

一、作用

immutable 对象是不可直接赋值的对象，它可以有效的避免错误赋值的问题

二、安装

$ npm install immutable

三、使用

在react中，immutable主要是防止state对象被错误赋值。
将js对象转成immutable对象

import { Map } from 'immutable';
const defaultState = Map({
  todoList: []
});

获取属性

state.get('todoList'); // 获取store中的todoList
state.get(['Main', 'todoList']); // 获取Main组件中store的todoList

改变属性

state.set('todoList', action.value);  // 设置单个属性值
// 设置多个属性
state.merge({
  todoList: fromJS(action.value), // 由于action.value是js对象所以要转成immutable对象
});

1、fromJs
将普通JS对象和数组转为Immutable的Map和List。（Deeply）

注：使用Js对象构造Immutable Map时，Js对象的属性总是字符串的。
2、is
判断两个对象是否有相同的值。

3、hash
返回31位整数值，此方法用来决定两个值是否相同以及如何存储这些值。

4、isImmutable
判断对象是否是immutable的。

5、isCollection
判断对象是否是集合(collection)或集合的子类(Map、List、Set等)。

三、List API
let List = Immutable.List;
0、toJS
将List转为JS对象。
1、List
用传递的参数创建一个新的List。

2、isList
判断参数是否是List。

3、of
用传递的参数创建一个新的List。

4、size

5、set
按索引给List设置值，索引为负数时为从后往前数。

6、delete
按索引删除元素，索引为负数时为从后往前数。

7、insert
在指定的位置上插入元素。

8、clear
清空List。

9、push

10、pop

11、shift
返回删除List的第一个元素的新List。

12、unshift
返回在List头部插入一个新元素的新List。

13、update
返回更新了指定索引上元素值的新List，第二个参数（可选）表示当此索引上的元素没有被设置值时的默认值。

14、setIn
按keyPath设置值

15、deleteIn
按keyPath删除元素

16、concat

17、map

18、filter

19、filterNot

20、merge此方法合并是按索引合并，要追加需使用concat。

21、first、last

22、indexOf、lastIndexOf

23、findIndex、findLastIndex

24、max、min

四、Map API
let Map = Immutable.Map;
0、toJS
将Map对象转为JS对象。
1、Map
创建一个新的immutable Map对象。

2、isMap

3、size

4、set
返回新增/修改了属性为key值为value的新Map。

5、delete
返回删除了key的新Map。

6、clear
清空Map。

7、update
类似List的update。

8、setIn

9、updateIn
功能与setIn类似，只是可以通过updater函数更新值。

10、deleteIn

11、merge

12、mergeDeep

13、mergeWith

14、map

15、filter

16、get

17、has

18、getIn

19、hasIn

四、案例

UI组件：

{this.props.shangpinData.get('data').count}
<button onClick={()=>{this.props.increment(1)}}>click me</button>

容器组件：

function mapStateToProps(state) {
  return { shangpinData: state.shangpinReducer }
}
function mapDispatchToProps(dispatch) {
  return {
    increment: (val) => {
      dispatch({
        type: 'increment',
        data: val,
      })
    },
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(shangpin)

reducer：

import { Map } from "immutable";
const defaultState = Map({
  data: {
    count: 0,
    mass:'答对了',
  },
});

export default (state = defaultState, action) => {
  let dataVal = state.getIn(["data","count"]);
  if (action.type == "increment") {
    return state.setIn(["data","count"],dataVal+action.data);
  }
  return state;
};