Skip to content
Version: XState v5

Usage with Immer

Immer is a library that makes it more convenient to work with updating data immutably. It can be used with XState to immutably update context in assignments.

Installation​

Install the latest versions of xstate and immer from npm:

npm install xstate immer

See the Immer installation docs for more information.

Immer usage​

XState already allows you to immutably update context partially or completely in assign actions. However, for more complex scenarios, you may want to use Immer to update context in a less verbose way.

import { createMachine, assign } from 'xstate';
import { produce } from 'immer';

const machine = createMachine({
id: 'todos',
context: {
todos: [],
filter: 'all'
},
// ...
on: {
'todo.complete': {
// Using Immer to update a single context property
actions: assign({
todos: ({ context, event }) => produce(context.todos, draftTodos => {
const todo = draftTodos.find(t => t.id === event.todo.id);
todo.completed = true;
})
})
},
'todos.add': {
// Using Immer to update multiple context properties
actions: assign(({ context, event }) => produce(context, draftContext => {
draftContext.todos.push({
id: event.todo.id,
description: event.todo.description,
completed: false
});

if (draftContext.filter === 'all') {
draftContext.filter = 'active';
}
}))
}
}
});