Immer如何使用

今天小编给大家分享一下Immer如何使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

河池网站制作公司哪家好,找创新互联建站!从网页设计、网站建设、微信开发、APP开发、响应式网站等网站项目制作,到程序开发,运营维护。创新互联建站从2013年创立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站

Immer本身也得到了广泛关注和认可,在Redux最新推荐的Redux Toolkit 中就集成了Immer

Immer并不会对原有的状态数据进行直接更改,这样就保持了不可变性,但是在使用语法上却是直接赋值,注意如图所示,直接赋值的对象并不是原有的状态数据,而是另一个Draft对象。

 const nextState = baseState.slice() // 浅拷贝

 nextState[1] = {

     // 替换元素

     …nextState[1], // 浅拷贝位置1的元素

     done: true // 修改

 }

 nextState.push({title: "Tweet about it"})

假如数据结构层次很深,同时又不想做范式化,因为一些业务场景范式化后的数据在使用时也还是要整合起来,不如直接使用树状数据来的方便,此时修改数据简直就是噩梦,所以Immer针对的就是这种情况,它仅仅是处理了复杂数据的更新,并不涉及到副作用,以下例子摘自Immer官网

 import produce from "immer"

 const nextState = produce(baseState, draft => {

     draft[1].done = true

     draft.push({title: "Tweet about it"})

 })

可以看到,现在要得到更新后的状态非常方便了,但如同刚才所说的一样,Immer也仅仅只是半自动化,不涉及副作用,所以一般最后我们还是要调用setState 或者其他的操作来完成最终的业务目的。

安装

 npm install immer

要注意的是如果想要得到额外的支持,还需要调用一些引入API,同时打包结果也会变大

支持 调用

支持ES5 enableES5()

支持Map和Set数据结构 enableMapSet()

支持JSON Patch enablePatches()

以上所有都想支持 enableAllPlugins()

用法

 // 在应用的入口处

 import {enableMapSet} from "immer"

 enableMapSet()

 // …稍后

 import produce from "immer"

 const usersById_v1 = new Map([

     ["michel", {name: "Michel Weststrate", country: "NL"}]

 ])

 const usersById_v2 = produce(usersById_v1, draft => {

     draft.get("michel")。country = "UK"

 })

 const usersById_v3 = produce(usersById_v1, draft => {

     draft.set("michel", {name: "Michel Weststrate", country: "NL"})

 })

使用produce

Immer的要点就在于produce的使用,它的签名如下

 produce(currentState, recipe: (draftState) => void): nextState

注意这些名称

produce

recipe

draftState / draft

producer

这些名称没法硬翻,或者翻译后失去味道,只能靠揣摩和感悟

一个produce的HW代码如下

 import produce from "immer"

 const baseState = [

     {

         title: "Learn TypeScript",

         done: true

     },

     {

         title: "Try Immer",

         done: false

     }

 ]

 const nextState = produce(baseState, draftState => {

     draftState.push({title: "Tweet about it"})

     draftState[1].done = true

 })

对了,HW不是华为,是Hello World

以上就是“Immer如何使用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


当前标题:Immer如何使用
网站网址:http://bzwzjz.com/article/jjijig.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站设计 成都企业网站设计 重庆电商网站建设 成都网站设计 专业网站建设 成都网站设计 成都网站建设 成都网站建设 外贸网站建设 成都企业网站建设 成都企业网站建设公司 成都网站设计 成都网站制作 网站建设 成都定制网站建设 成都营销网站建设 成都网站设计公司 成都网站设计 企业网站设计 手机网站建设 网站建设公司 成都网站设计