Gecurride producers

[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 6: Simplify code by using curried _reduce_

Hosted on egghead.io

Wanneer je een functie als eerste argument aan produce meegeeft, creëer je een functie die produce nog niet toepast op een specifieke state. In plaats daarvan maak je een functie die produce zal toepassen op élke state die er in de toekomst aan wordt doorgegeven. Dit wordt over het algemeen currying genoemd. Bekijk bijvoorbeeld het volgende voorbeeld:

import {produce} from "immer"

function toggleTodo(state, id) {
    return produce(state, draft => {
        const todo = draft.find(todo => todo.id === id)
        todo.done = !todo.done
    })
}

const baseState = [
    {
        id: "JavaScript",
        title: "Learn TypeScript",
        done: true
    },
    {
        id: "Immer",
        title: "Try Immer",
        done: false
    }
]

const nextState = toggleTodo(baseState, "Immer")

Het bovenstaande patroon van toggleTodo is vrij typisch: geef een bestaande state door aan produce, wijzig de draft en retourneer vervolgens het resultaat. Omdat state alleen wordt gebruikt om door te geven aan produce, kan dit voorbeeld vereenvoudigd worden door de gecurride vorm van produce te gebruiken. Hierbij geef je alleen de receptfunctie aan produce, waarna produce een nieuwe functie retourneert die het recept op de basisstate toepast. Hierdoor kunnen we de bovenstaande toggleTodo-definitie verkorten.

import {produce} from "immer"

// curried producer:
const toggleTodo = produce((draft, id) => {
    const todo = draft.find(todo => todo.id === id)
    todo.done = !todo.done
})

const baseState = [
    /* as is */
]

const nextState = toggleTodo(baseState, "Immer")

Merk op dat de id-parameter nu onderdeel is geworden van de receptfunctie! Dit patroon van gecurride producers combineert uitstekend met bijvoorbeeld de useState-hook van React, zoals we op de volgende pagina zullen zien.