임머의 집 - Phần 2

Bài dịch từ trang chủ của Immer:
https://immerjs.github.io/immer/

농산물 생산

Immer sử dụng một chức năng mặc định thực hiện tất cả công viec.
produce(baseState, recipe: (draftState) => void): nextStateproduce baseState 및 một công thức(레시피)는 sử dụng để thực hiện tất cả các thay đổi trênbản nháp được chuyển vào. Điều thú vị về Immer làbaseState sẽ không bị ảnh hưởng, nhưngnextState sẽ phản ánh tất cả các thay đổi được thực hiện 4 v 6 7.

Bên trong công thức (recipe), tất cả các API JavaScript tiêu chuẩn có thể được sử dụng trên đối tượng nháp, bao gồm các phép gán trường, thao tác xóa và thay đổi mảng, các thao tác Map và Set như draftState , push , pop , splice , set , sort , v.v.

bất kự sỳ that that th way ³i nào trong s 그것은 không nh thi thiết phải xảy ra ở gố gốc, nhưng nó được phép sửa đổi bất kỳ thứ gì ở b ất kỳ ³ wâu sâu sâu bên trong bản nháp : remove.

Lưu ý rằng bản thân hàm 레시피 thường không trả về bất kỳ thứ gì. Tuy nhiên, có thể trả về trong trong hờng hợp bạn muốn thế toàn bộ đối tượng nháp bằng một đối tượng khác, để biết thêm chi tiếmt, 6.7 x1.9.

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

// the new item is only added to the next state,
// base state is unmodified
expect(baseState.length).toBe(2)
expect(nextState.length).toBe(3)

// same for the changed 'done' prop
expect(baseState[1].done).toBe(false)
expect(nextState[1].done).toBe(true)

// unchanged data is structurally shared
expect(nextState[0]).toBe(baseState[0])
// ...but changed data isn't.
expect(nextState[1]).not.toBe(baseState[1])

트라 뷔 디오 리에우 모이 Thuật ngữ

(기본)상태, 생산

에 전달된 불변 상태

recipe: 기본 상태가 "변형"되어야 하는 방법을 캡처하는 produce의 두 번째 인수입니다.

초안: 레시피의 첫 번째 인수로, 안전하게 변경될 수 있는 원래 기본 상태에 대한 프록시입니다.

프로듀서. 생성을 사용하고 일반적으로 (baseState, ...arguments) => resultState 형식의 함수