Werken met produce

[Onofficiële Beta-vertaling]

Deze pagina is vertaald door PageTurner AI (beta). Niet officieel goedgekeurd door het project. Een fout gevonden? Probleem melden →

egghead.io lesson 3: Simplifying deep updates with _produce_

Hosted on egghead.io

Het Immer-pakket biedt een produce-functie die al het werk doet.

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

produce neemt een basisstate en een receptfunctie die alle gewenste mutaties kan uitvoeren op de meegegeven draft. Het bijzondere aan Immer is dat de baseState onaangetast blijft, terwijl de nextState alle wijzigingen aan draftState weerspiegelt.

In de receptfunctie kun je alle standaard JavaScript-API's op het draft-object gebruiken, inclusief veldtoewijzingen, delete-operaties en muterende array-, Map- en Set-bewerkingen zoals push, pop, splice, set, sort, remove, enz.

Deze mutaties hoeven niet bij de root plaats te vinden; je mag overal diep in de draft wijzigingen aanbrengen: draft.todos[0].tags["urgent"].author.age = 56

Normaal gesproken retourneert de receptfunctie zelf niets. Het is echter mogelijk om wel iets te retourneren als je het volledige draft-object wilt vervangen door een ander object. Voor meer details zie nieuwe data retourneren.

Voorbeeld

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

Terminologie

(base)state: de immutable state die aan produce wordt doorgegeven
recipe: het tweede argument van produce, dat vastlegt hoe de basisstate moet worden "gemanipuleerd"
draft: het eerste argument van elk recipe, een proxy voor de originele basisstate die veilig gemuteerd kan worden
producer: een functie die produce gebruikt, meestal in de vorm (baseState, ...arguments) => resultState

Het is niet strikt nodig om het eerste argument van de receptfunctie draft te noemen. Je kunt elke gewenste naam gebruiken, bijvoorbeeld users. De naam draft is slechts een conventie om aan te geven: "mutaties zijn hier toegestaan".

Voorbeeld​

Terminologie​

Voorbeeld

Terminologie