immer

Creating the next immutable state by modifying the current state

This feature allows you to pass a base state and a producer function to the 'produce' function. Within the producer function, you can mutate the draft state as if it were mutable. Immer takes care of applying the changes to produce the next immutable state.

import produce from 'immer';

const baseState = [
    {todo: 'Learn typescript', done: true},
    {todo: 'Try immer', done: false}
];

const nextState = produce(baseState, draftState => {
    draftState.push({todo: 'Tweet about it'});
    draftState[1].done = true;
});

Working with nested structures

Immer can handle deeply nested structures with ease. You can update deeply nested properties without the need to manually copy every level of the structure.

import produce from 'immer';

const baseState = {
    user: {
        name: 'Michele',
        age: 33,
        todos: [
            {title: 'Tweet about it', done: false}
        ]
    }
};

const nextState = produce(baseState, draftState => {
    draftState.user.age = 34;
    draftState.user.todos[0].done = true;
});

Currying

Immer supports currying, which means you can predefine a producer function and then apply it to different states. This is useful for creating reusable state transformers.

import produce from 'immer';

const baseState = {counter: 0};

const increment = produce(draft => {
    draft.counter++;
});

const nextState = increment(baseState);