Giới thiệu về Immer — Phần 2

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

Sử dụng produce

Immer sử dụng một chức năng mặc định thực hiện tất cả công việc.

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

produce có baseState và một công thức (recipe) có thể được sử dụng để thực hiện tất cả các thay đổi trên bản nháp được chuyển vào. Điều thú vị về Immer là baseState sẽ không bị ảnh hưởng, nhưng nextState sẽ phản ánh tất cả các thay đổi được thực hiện đối với draftState .

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ư push, pop, splice, set, sort, remove, v. v.

Bất kỳ sự thay đổi nào trong số đó không nhất thiết phải xảy ra ở gốc, nhưng nó được phép sửa đổi bất kỳ thứ gì ở bất kỳ đâu sâu bên trong bản nháp: draft.todos[0].tags["urgent"].author.age = 56

Lưu ý rằng bản thân hàm recipe thường không trả về bất kỳ thứ gì. Tuy nhiên, có thể trả về trong trường hợp bạn muốn thay thế toàn bộ đối tượng nháp bằng một đối tượng khác, để biết thêm chi tiết, hãy xem trả về dữ liệu mới.

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ữ

  • (базовое)состояние, неизменяемое состояние, передаваемое в produce
  • рецепт: второй аргумент produce, который определяет, как базовое состояние должно быть «изменено».
  • draft: первый аргумент любого рецепта, который является прокси исходного базового состояния, которое может быть безопасно изменено.
  • producer (производитель). Функция, которая использует produce и обычно имеет вид (baseState, …arguments) => resultState

Оцените статью
Procodings.ru
Добавить комментарий