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如何使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。