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')
immutable.js使用总结的更多相关文章
- 深度浅出immutable.js
这篇文章将讲述immutable.js的基本语法和用法. 1.fromJs() Deeply converts plain JS objects and arrays to Immutable Ma ...
- 大话immutable.js
为啥要用immutable.js呢.毫不夸张的说.有了immutable.js(当然也有其他实现库)..才能将react的性能发挥到极致!要是各位看官用过一段时间的react,而没有用immutabl ...
- Immutable.js – JavaScript 不可变数据集合
不可变数据是指一旦创建就不能被修改的数据,使得应用开发更简单,允许使用函数式编程技术,比如惰性评估.Immutable JS 提供一个惰性 Sequence,允许高效的队列方法链,类似 map 和 f ...
- Immutable.js尝试(node.js勿入)
最近做一些复杂html常常需要在页面做一些数据处理,常常在想如果 js有list 这种数据结构多少,今天逛github时 发现有Immutable.js 这个项目https://github.com/ ...
- React+Immutable.js的心路历程
这段时间做的项目开发中用的是React+Redux+ImmutableJs+Es6开发,总结了immutable.js的相关使用姿势: Immutable Data 顾名思义是指一旦被创造后,就不可以 ...
- [Javascript] Creating an Immutable Object Graph with Immutable.js Map()
Learn how to create an Immutable.Map() through plain Javascript object construction and also via arr ...
- [Javascript] Manage Application State with Immutable.js
Learn how Immutable.js data structures are different from native iterable Javascript data types and ...
- [Immutable.js] Working with Subsets of an Immutable.js Map()
Immutable.js offers methods to break immutable structures into subsets much like Array--for instance ...
- [Immutable,js] Iterating Over an Immutable.js Map()
Immutable.js provides several methods to iterate over an Immutable.Map(). These also apply to the ot ...
- [Immutable,js] Immutable.Record() as data models
The Immutable.js Record() allows you to model your immutable data much like you would model data wit ...
随机推荐
- 【Mac AndroidStudio】download gradle fail问题
第一次运行application时,会发现一直在download gradle,而且进度一直卡着.这时,可以直接拷贝download的链接,粘贴到浏览器下载.下载完了.然后,可以用命令行在用户目录下o ...
- C# 说说lock到底锁谁?(2)
摘要 今天在园子里面有园友反馈关于[C#基础]说说lock到底锁谁?文章中lock(this)的问题.后来针对文章中的例子,仔细想了一下,确实不准确,才有了这篇文章的补充,已经对文章中的demo进行修 ...
- selenium + firefox驱动版本对应。
1)selenium 2.51.0====firefox 46 selenium 3.11.0 ====firefox 56 后来发现最新的火狐浏览器好多插件都不能用了.所以果断回到46.对应的2.5 ...
- Strut2页面传参跳转 --Struts2
1.本案例借助struts2框架,完成页面传参.跳转功能 2.代码实现 index.jsp: <form action="helloStruts2.action" metho ...
- Practical Node.js (2018版) 第8章:Building Node.js REST API Servers
Building Node.js REST API Servers with Express.js and Hapi Modern-day web developers use an architec ...
- mapping values are not allowed in this context at line 115 column 10
/opt/vagrant/embedded/lib/ruby//psych.rb::in `parse': (<unknown>): mapping values are not allo ...
- TCP建立连接为什么是三次握手,为什么不是两次或四次?
什么是三次握手 学过网络编程的人,应该都知道TCP建立连接的三次握手,下面简单描述一下这个过程. 如图所示 第一次握手:客户端发送TCP包,置SYN标志位为1,将初始序号X,保存在包头的序列号(Seq ...
- 微信支付---公众号支付和H5支付区别
微信支付分为如下几种:(来源https://pay.weixin.qq.com/wiki/doc/api/index.html) 本文主要讲解公众号支付和H5支付,两者均属于线上支付比较常用的方式: ...
- Linux常用命令汇总集
cd ./ 当前目录 ../ 上级目录 / 代表根目录 or 代表目录和文件之间的分隔符 .. pwd 查看当前路径 LS 查看当前目录下的文件 ls ./a/ 查看目标路径下的文件 tab 自动补全 ...
- Python爬虫之requests
爬虫之requests 库的基本用法 基本请求: requests库提供了http所有的基本请求方式.例如 r = requests.post("http://httpbin.org/pos ...