immutable.js使用总结

1. immutable相当于 JSON.parse 和 JSON.stringify;

2.引入redux中,除了

在最外层 reducer中  import { combineReducers } from 'redux-immutable';

涉及到修改 (1)reducer 两个文件  (2)组件

2.1 对于reducer:

首先对默认状态:

import { fromJS } from 'immutable';
const defaultState = fromJS({
'requireFlag':true
})

对于简单的处理state,直接return即可:

case actionTypes.CHANGE_MORE_FLAG:
return state.set('requireFlag',!state.get('requireFlag'));

对于需要复杂处理的,一般将state传入自定义函数,最后返回:

export default (state=defaultState, action)=>{
switch (action.type) {
case actionTypes.INIT_LISTS:
return handleInitList(state,action);
}
} const handleInitList = (state,action)=>{
state.get('nav').map((item,index)=>{ //所有涉及到获取state,使用get方法,这里改变了state
item.checked = false;
});
state.set('page',1); //后续改变其他值,单个是使用 state.set('page',1)
return state.merge({ //改变多个值,需要使用merge函数,最后一定要 return出 merge函数
activeIndex:action.tabIndex,
cardId:action.cardId,
})
//return state; 不要使用merge之后,在这里return state
}

数组合并:

state.get('lifeRights').concat(action.initData.lifeRights);

2.2 组件:

function mapStateToProps(state, ownProps) {
return {
userStatus:state.getIn(['bottom','userStatus']), //注意此处有 中括号,第一个 reducer的名字
}
}

如果该reducer中 只有一层级,如reducer中的状态定义为:

const defaultState = fromJS([])

则在组件中调用使用 get : rightsList: state.get('hotRight')

上一篇:Ext 4.2以后版本 ComboBox 联动


下一篇:新鲜出炉的一套Java面试题