A faster and more flexible utilities for using Mutative with XState
xstate-mutative is more than 10x faster than @xstate/immer. Read more about the performance comparison in Mutative.
In order to use the Mutative utilities in XState, you will need to install Mutative and XState as a direct dependency.
npm install xstate mutative xstate-mutative
# Or use any package manager of your choice.Import the Mutative utilities:
import { createMachine, interpret } from 'xstate'; import { assign, createUpdater } from 'xstate-mutative'; const levelUpdater = createUpdater('UPDATE_LEVEL', (ctx, { input }) => { ctx.level = input; }); const toggleMachine = createMachine({ id: 'toggle', context: { count: 0, level: 0, }, initial: 'inactive', states: { inactive: { on: { TOGGLE: { target: 'active', // Immutably update context the same "mutable" // way as you would do with Mutative! actions: assign((ctx) => ctx.count++), }, }, }, active: { on: { TOGGLE: { target: 'inactive', }, // Use the updater for more convenience: [levelUpdater.type]: { actions: levelUpdater.action, }, }, }, }, }); const toggleService = interpret(toggleMachine) .onTransition((state) => { console.log(state.context); }) .start(); toggleService.send({ type: 'TOGGLE' }); // { count: 1, level: 0 } toggleService.send(levelUpdater.update(9)); // { count: 1, level: 9 } toggleService.send({ type: 'TOGGLE' }); // { count: 2, level: 9 } toggleService.send(levelUpdater.update(-100)); // Notice how the level is not updated in 'inactive' state: // { count: 2, level: 9 }
xstate-mutative is inspired by @xstate/immer.
It uses the same API as @xstate/immer but uses Mutative under the hood. The repository is based on the @xstate/immer repository.
xstate-mutative is MIT licensed.