Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to use Immer. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Immer itself has received wide attention and recognition, and Immer has been integrated into the latest Redux Toolkit recommended by Redux.

Immer does not directly change the original state data, so it remains immutable, but it uses syntax to assign values directly. Note that as shown in the figure, the object directly assigned is not the original state data, but another Draft object.

Const nextState = baseState.slice () / / shallow copy

NextState [1] = {

/ / replace element

... NextState [1], / / shallow copy of the elements of position 1

Done: true / / modified

}

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

If the data structure is very deep and you don't want to be stylized, because the data after some business scenarios are modeled still have to be integrated, it is not as convenient to use tree data directly. It is simply a nightmare to modify data at this time, so Immer is aimed at this situation. It only deals with the update of complex data and does not involve side effects. The following example is extracted from the official website of Immer.

Import produce from "immer"

Const nextState = produce (baseState, draft = > {

Draft [1] .done = true

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

})

As you can see, it is very convenient to get the updated status now, but as I just said, Immer is only semi-automated and does not involve side effects, so we usually end up calling setState or other operations to achieve the final business goal.

Installation

Npm install immer

It is important to note that if you want additional support, you also need to call some incoming API, and the packaging result will be larger.

Support for calling

Support for ES5 enableES5 ()

Support for Map and Set data structures enableMapSet ()

Support for JSON Patch enablePatches ()

All of the above want to support enableAllPlugins ()

Usage

/ / at the entrance to the application

Import {enableMapSet} from "immer"

EnableMapSet ()

/ / … Later

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"})

})

Use produce

The main point of Immer is the use of produce, which is signed as follows

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

Note these names

Produce

Recipe

DraftState / draft

Producer

...

These names can not be translated hard, or lose their taste after translation, we can only rely on speculation and perception.

The HW code for a produce is as follows

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

})

By the way, HW is not Huawei, it's Hello World.

These are all the contents of the article "how to use Immer". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.