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')