xstate-mutative

!Node CI
![npm](https://www.npmjs.com/package/xstate-mutative)
!license

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.

Installation

In order to use the Mutative utilities in XState, you will need to install Mutative and XState as a direct dependency.

``bash npm install xstate mutative xstate-mutative

`Or use any package manager of your choice.`


Usage
Import the Mutative utilities:

`js 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 }`

`$3`

- Strict mode - Auto Freeze - Marking data structure

`Credits`

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.

`License`

xstate-mutative` is MIT licensed.

Or use any package manager of your choice.

Usage

Import the Mutative utilities:

js
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 }

$3