关于immutable.js的使用
ckinmind opened this issue · 0 comments
ckinmind commented
在项目的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的第一个参数数组,指定设置的层级
-
可以使用链式调用的方式,方法的第二个参数可以制定一个回调函数来处理一些复杂的计算