immutable.js使用总结

最新推荐文章于 2024-04-06 11:30:21 发布

weixin_33937913

最新推荐文章于 2024-04-06 11:30:21 发布

阅读量271

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：http://www.cnblogs.com/xiaozhumaopao/p/10559561.html

博客介绍了immutable相当于JSON.parse和JSON.stringify，还讲述了在redux中引入immutable的操作，包括在最外层reducer中引入相关方法，以及涉及修改reducer文件和组件的具体处理方式，如reducer中对默认状态的处理、组件中状态的调用等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/xiaozhumaopao/p/10559561.html