[React] immutable.js

//Map() 原生object转Map对象 (只会转换第一层，注意和fromJS区别)

immutable.Map({name:'danny', age:18})

//List() 原生array转List对象 (只会转换第一层，注意和fromJS区别)

immutable.List([1,2,3,4,5])

//fromJS() 原生js转immutable对象 (深度转换，会将内部嵌套的对象和数组全部转成immutable)

immutable.fromJS([1,2,3,4,5])    //将原生array  --> List
immutable.fromJS({name:'danny', age:18})   //将原生object  --> Map

//toJS() immutable对象转原生js (深度转换，会将内部嵌套的Map和List全部转换成原生js)

immutableData.toJS();

//查看List或者map大小

immutableData.size  或者 immutableData.count()

// is() 判断两个immutable对象是否相等

immutable.is(imA, imB);

//merge() 对象合并

var imA = immutable.fromJS({a:1,b:2});
var imA = immutable.fromJS({c:3});
var imC = imA.merge(imB);
console.log(imC.toJS())  //{a:1,b:2,c:3}

//增删改查（所有操作都会返回新的值，不会修改原来值）

var immutableData = immutable.fromJS({
    a:1,
    b:2，
    c:{
        d:3
    }
});
var data1 = immutableData.get('a') //  data1 = 1
var data2 = immutableData.getIn(['c', 'd']) // data2 = 3

getIn用于深层结构访问

var data3 = immutableData.set('a' , 2);   // data3中的 a = 2
var data4 = immutableData.setIn(['c', 'd'], 4);   //data4中的 d = 4
var data5 = immutableData.update('a',function(x){return x+4})

//data5中的 a = 5

var data6 = immutableData.updateIn(['c', 'd'],function(x){return x+4})

//data6中的 d = 7

var data7 = immutableData.delete('a')   //data7中的 a 不存在
var data8 = immutableData.deleteIn(['c', 'd'])   //data8中的 d 不存在

1. fromJS和toJS会深度转换数据，随之带来的开销较大，尽可能避免使用，单层数据转换使用Map()和List()
2. js是弱类型，但Map类型的key必须是string！
3. 所有针对immutable变量的增删改必须左边有赋值，因为所有操作都不会改变原来的值，只是生成一个新的变量
4. 引入immutablejs后，不应该再出现对象数组拷贝的代码
5. 获取深层深套对象的值时不需要做每一层级的判空
6. immutable对象直接可以转JSON.stringify(),不需要显式手动调用toJS()转原生
7. 判断对象是否是空可以直接用size
8. 调试过程中要看一个immutable变量中真实的值，可以chrome中加断点，在console中使用.toJS()方法来查看

项目中的应用

<!--删除一个server同时更新store进行页面更新-->
[DELETE_SERVER]: (app, action) => {
    let servers = app.get('servers');  //获取store中的servers
    let ser = action.payload;  //后台返回的结果
    let index = servers.findIndex(i => {
        return i.get('_id') === ser._id;  //判断是否存在
    });
    if (index === -1) {
        return app;
    } else {
        return app.set('servers', servers.delete(index));  //重新设置删除index后的servers
    }
}

<!--更新一个package同时更新store进行页面更新-->
[UPDATE_PACKAGE]: (app, action) => {
    let packages = app.get('packages');
    let pac = fromJS(action.payload);
    let index = packages.findIndex(i => {
        return i.get('_id') === pac.get('_id')
    })
    if (index === -1) return app;
    app = app.set('package', pac);
    return app.set('packages', packages.update(index, () => {
        return pac
    }));
},