immutable.js使用总结

时间:2019-03-19
本文章向大家介绍immutable.js使用总结,主要包括immutable.js使用总结使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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

2.引入redux中,除了

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

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

对于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);