Updatepatronen

[Onofficiële Beta-vertaling]

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

Werken met onveranderlijke gegevens betekende voor Immer dat je eerst alle onveranderlijke updatepatronen moest leren.

Om je te helpen deze patronen 'af te leren', volgt hier een overzicht van hoe je de ingebouwde JavaScript-API's kunt gebruiken om objecten en collecties bij te werken:

Objectmutaties

import {produce} from "immer"

const todosObj = {
    id1: {done: false, body: "Take out the trash"},
    id2: {done: false, body: "Check Email"}
}

// add
const addedTodosObj = produce(todosObj, draft => {
    draft["id3"] = {done: false, body: "Buy bananas"}
})

// delete single property
const deletedTodosObj = produce(todosObj, draft => {
    delete draft["id1"]
})

// update
const updatedTodosObj = produce(todosObj, draft => {
    draft["id1"].done = true
})

// replace & update in bulk
const updatedTodosObj = produce(todosObj, draft => {
    Object.assign(draft, {
        id1: {done: true, body: "Take out the trash"},
        id2: {done: true, body: "Check Email"},
        id3: {done: true, body: "Feed my cat"}
    })

// reset/clear/empty
const emptyTodo = produce(todosObj, () => {
    return {};
})

Wanneer een genest veld in een concept een nieuwe referentie of waarde krijgt, zal produce() de onveranderlijke update voltooien en een nieuwe referentie teruggeven. Als je probeerde te muteren maar de waarden bleven identiek, zal Immer afzien van de update en de bestaande referentie van produce() teruggeven.

Arraymutaties

import {produce} from "immer"

const todosArray = [
    {id: "id1", done: false, body: "Take out the trash"},
    {id: "id2", done: false, body: "Check Email"}
]

// add
const addedTodosArray = produce(todosArray, draft => {
    draft.push({id: "id3", done: false, body: "Buy bananas"})
})

// delete by index
const deletedTodosArray = produce(todosArray, draft => {
    draft.splice(3 /*the index */, 1)
})

// update by index
const updatedTodosArray = produce(todosArray, draft => {
    draft[3].done = true
})

// insert at index
const updatedTodosArray = produce(todosArray, draft => {
    draft.splice(3, 0, {id: "id3", done: false, body: "Buy bananas"})
})

// remove last item
const updatedTodosArray = produce(todosArray, draft => {
    draft.pop()
})

// remove first item
const updatedTodosArray = produce(todosArray, draft => {
    draft.shift()
})

// add item at the beginning of the array
const addedTodosArray = produce(todosArray, draft => {
    draft.unshift({id: "id3", done: false, body: "Buy bananas"})
})

// delete by id
const deletedTodosArray = produce(todosArray, draft => {
    const index = draft.findIndex(todo => todo.id === "id1")
    if (index !== -1) draft.splice(index, 1)
})

// update by id
const updatedTodosArray = produce(todosArray, draft => {
    const index = draft.findIndex(todo => todo.id === "id1")
    if (index !== -1) draft[index].done = true
})

// filtering items
const updatedTodosArray = produce(todosArray, draft => {
    // creating a new state is simpler in this example
    // (note that we don't need produce in this case,
    // but as shown below, if the filter is not on the top
    // level produce is still pretty useful)
    return draft.filter(todo => todo.done)
})

// reset/clear/empty
const emptyTodo = produce(todosArray, () => {
    return [];
})

Geneste gegevensstructuren

import {produce} from "immer"

// example complex data structure
const store = {
    users: new Map([
        [
            "17",
            {
                name: "Michel",
                todos: [
                    {
                        title: "Get coffee",
                        done: false
                    }
                ]
            }
        ]
    ])
}

// updating something deeply in-an-object-in-an-array-in-a-map-in-an-object:
const nextStore = produce(store, draft => {
    draft.users.get("17").todos[0].done = true
})

// filtering out all unfinished todo's
const nextStore = produce(store, draft => {
    const user = draft.users.get("17")
    // when filtering, creating a fresh collection is simpler than
    // removing irrelevant items
    user.todos = user.todos.filter(todo => !todo.done)
})

Let op: veel arraybewerkingen kunnen meerdere items tegelijk invoegen door meerdere argumenten door te geven of de spread-operator te gebruiken: todos.unshift(...items).

Let op: bij arrays met objecten die meestal via een id worden geïdentificeerd, raden we aan Map of op index gebaseerde objecten te gebruiken (zoals hierboven) in plaats van frequente zoekoperaties - opzoektabellen presteren over het algemeen veel beter.