Immer如何使用

今天小編給大家分享一下Immer如何使用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

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如何使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。