关于immutable.js的使用

在项目的appleBasketReducer.js中使用了immutable 参考资料：immutable github 参考资料：immutableJS一些API 参考资料：Immutable 详解及 React 中实践

import { fromJS } from 'immutable';
// 这个是state
const state = {
    isPicking: false,
    newAppleId: 3,
    apples: [
        {
            id: 0,
            weight: 233,
            isEaten: false
        },
        {
            id: 1,
            weight: 235,
            isEaten: true
        },
        {
            id: 2,
            weight: 256,
            isEaten: false
        }
    ]
};

// 1. 修改第一层的isPicking, test1和test是两个不同对象
let test1 = fromJS(state).set('isPicking', true).toJS();

/******************************************************************************/

// 2. 多层设置，test2和test是两个不同对象
let test2 = fromJS(state).setIn(['apples', 1, 'isEaten'], true).toJS()
// 备注：这里1指的是第二层中，也就是apples数组中索引为1对象的对象，
// 所以这里更改的是id为1的数据，实际上还是需要先得到数据在数组中的确切索引
// 这里是简化处理，直接将id值关联索引值

/******************************************************************************/

// 3.  链式调用，新增数据
 let newApple =  {
                id: state.newAppleId,
                weight: action.payload,
                isEaten: false
            };
 /** 在apples中新增一个newApple， 将newAppleId增加1， 将isPicking设为false*/
let test3 = fromJS(state).update('apples', list => list.push(newApple))
                                .set('newAppleId', state.newAppleId + 1)
                                .set('isPicking', false)
                                .toJS();
// 备注：这里update可以新增一个数组，第二个参数是个回调函数

fromJS将原生的数据类型转化为immutable的数据类型，Map(对应Object)或者List(Array) 最后通过toJS()在转化回原生对象
set是设置数据，设置第一层的值
setIn的第一个参数数组，指定设置的层级
可以使用链式调用的方式，方法的第二个参数可以制定一个回调函数来处理一些复杂的计算

ckinmind / apple-basket-redux

关于immutable.js的使用 #9