[Javascript] Simplify Creating Immutable Data Trees With Immer
Immer is a tiny library that makes it possible to work with immutable data in JavaScript in a much more straight-forward way by operating on a temporarily draft state and using all the normal JavaScript API's and data structures. The first part of the lesson explains how to use Immer, and the second part of the lesson shows you how it can be used to simplify, for example, Redux reducers.
Immer has a few unique features:
- Supports arbitrary, deep modifications in immutable data trees
- Strongly typed
- Uses JavaScript native data structures, no new API to learn
- Automatically freezes any data that is produced
The whole point of Immer is that you can wrap you reducer function with the function immer provide, let's call 'produce'. When you call it, if you don't do anything, it just return your previous state, if you do any partial mutation, if will keep original object untouched, instead creating immutable version return to you. therefore make code much simpler.
// Before const byId = (state, action) => {
switch (action.type) {
case RECEIVE_PRODUCTS:
return {
...state,
...action.products.reduce((obj, product) => {
obj[product.id] = product
return obj
}, {})
}
default:
return state
}
}
// After import produce from 'immer' const byId = (state, action) =>
produce(state, draft => {
switch (action.type) {
case RECEIVE_PRODUCTS:
action.products.forEach(product => {
draft[product.id] = product
})
}
})
Or an improved version:
import produce from 'immer' const byId = produce((draft, action) => {
switch (action.type) {
case RECEIVE_PRODUCTS:
action.products.forEach(product => {
draft[product.id] = product
})
}
})
[Javascript] Simplify Creating Immutable Data Trees With Immer的更多相关文章
- [Immutable.js] Using fromJS() to Convert Plain JavaScript Objects into Immutable Data
Immutable.js offers the fromJS() method to build immutable structures from objects and array. Object ...
- [Javascript] Avoiding Mutations in JavaScript with Immutable Data Structures
To demonstrate the difference between mutability and immutability, imagine taking a drink from a gla ...
- 17.1.1.6 Creating a Data Snapshot Using Raw Data Files 创建一个数据快照使用 Raw Data Files
17.1.1.6 Creating a Data Snapshot Using Raw Data Files 创建一个数据快照使用 Raw Data Files 如果数据库是大的, 复制raw 数据文 ...
- 17.1.1.5 Creating a Data Snapshot Using mysqldump 创建一个快照使用mysqldump:
17.1.1.5 Creating a Data Snapshot Using mysqldump 创建一个快照使用mysqldump: 创建一个数据快照的方式是使用mysqldump 工具来备份所有 ...
- Use JavaScript to Export Your Data as CSV
原文: http://halistechnology.com/2015/05/28/use-javascript-to-export-your-data-as-csv/ --------------- ...
- Basic Model Theory of XPath on Data Trees
w https://openproceedings.org/2014/conf/icdt/FigueiraFA14.pdf From a database perspective, however, ...
- [Immutable.js] Converting Immutable.js Structures to Javascript and other Immutable Types
Immutable.js provides several conversion methods to migrate one structure to another. Each Immutable ...
- [Javascript] Querying an Immutable.js Map()
Learn how to query an Immutable.Map() using get, getIn, has, includes, find, first and last. These a ...
- asp and javascript: sql server export data to csv and to xls
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <% //塗聚文 //20131021 functio ...
随机推荐
- 硬核官宣:台积电官宣6nm及7nm加强版工艺!
台积电正式宣布了6nm(N6)工艺,在已有7nm(N7)工艺的基础上大幅度增强,号称可提供极具竞争力的高性价比,而且能加速产品研发.量产.上市速度. 这几年,曾经执行业牛耳的Intel在新工艺方面进展 ...
- leetcode小题解析
描述Given an array of integers, return indices of the two numbers such that they add up to a specific ...
- QT_圆_直线_三角t
MyImgTest.h: #ifndef MYIMGTEST_H#define MYIMGTEST_H #include <QWidget> class MyImgTest : publi ...
- CRM系统 - 总结 (二) stark组件
介绍: stark组件,是一个帮助开发者快速实现数据库表的增删改查+的组件.目标: 10s 中完成一张表的增删改查. 前戏: django项目启动时,自定义执行某个py文件. django启动时,且在 ...
- sql 语句中的 (+) 是什么意思?
在select语句中(+)指的是外连接,是连接查询的一种方法.例:select t1.*,t2.* from dept t1,emp t2 where t1.deptno=t2.deptno(+);其 ...
- HDU 4312 Contest 2
题目要求两点间的最大值作为距离即: 即是切比雪夫距离.而切比雪夫距离与曼哈顿距离的转换却很巧妙. 把平面坐标所有点绕原点逆向旋转45度后,所得点的曼哈顿距离之和除以√2,即是切雪比夫距离.旋转点的公式 ...
- Shuttle ESB实现消息推送
ESB全称Enterprise Service Bus,即企业服务总线.它是传统中间件技术与XML.Web服务等技术结合的产物. ESB的出现改变了传统的软件架构,能够提供比传统中间件产品更为便宜的解 ...
- eclipse 设置代码大小和布局里面代码大小
Eclipse字体大小调整: Window / Preferences / General / Appearance / ColorsAnd Fonts .在右边的对话框里选择Java – Java ...
- Qt Quick Controls 与 Qt Quick Controls 2的区别(详细对照)
Qt Quick Controls 原本是为支持桌面平台而开发的,后来又加入了移动平台和嵌入式平台的支持.它们应用非常广泛,因为它们提供了足够灵活的样式系统,以允许开发具有平台相关或者无关风格的应用程 ...
- php设计模式之责任链模式
php设计模式之责任链模式 实际问题 你的论坛有举报功能,版主能解决粗口方面的举报,警察能解决严重一点的黄赌毒方面的举报,更严重的反政府的举报就需要由国安局来完成. 职场中每个人都有直属的上级,如果到 ...