# @xstate/immer

> XState with Immer

Latest version **0.3.3** (published 2023-06-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @xstate/immer
pnpm add @xstate/immer
yarn add @xstate/immer
bun add @xstate/immer
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score; high quality score; popular repo.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.3.3 |
| Published | 2023-06-06 |
| First published | 2020-04-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30376 |
| Author | David Khourshid |
| Maintainers | xstate-release-bot, andarist, davidkpiano |
| Keywords | immer, state, state, machine, statechart |

## Links

- npm: https://www.npmjs.com/package/@xstate/immer
- Repository: https://github.com/statelyai/xstate
- Homepage: https://github.com/statelyai/xstate/tree/main/packages/xstate-immer#readme
- Issues: https://github.com/statelyai/xstate/issues
- npm.io page: https://npm.io/package/@xstate/immer

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 0.3.3 (latest) — 2023-06-06
- 0.3.2 — 2023-02-14
- 0.3.1 — 2022-01-27
- 0.3.0 — 2021-11-22
- 0.2.0 — 2021-02-05
- 0.1.0 — 2020-04-17

## README

# @xstate/immer

<p align="center">
  <a href="https://xstate.js.org">
  <br />
  <img src="https://user-images.githubusercontent.com/1093738/79572515-1509e180-808b-11ea-92aa-10958521aa68.png" alt="XState Immer" width="200"/>
  <br />
    <sub><strong>XState with Immer</strong></sub>
  <br />
  <br />
  </a>
</p>

This package contains utilities for using [Immer](https://immerjs.github.io/immer/docs/introduction) with [XState](https://github.com/statelyai/xstate).

- [Read the full documentation in the XState docs](https://xstate.js.org/docs/packages/xstate-immer/).
- [Read our contribution guidelines](https://github.com/statelyai/xstate/blob/main/CONTRIBUTING.md).

## Quick start

Included in `@xstate/immer`:

- `assign()` - an Immer action that allows you to immutably assign to machine `context` in a convenient way
- `createUpdater()` - a useful function that allows you to cohesively define a context update event event creator and assign action, all together. ([See an example](#createupdatereventtype-recipe) below)

1. Install `immer`, `xstate`, `@xstate/immer`:

```bash
npm install immer xstate @xstate/immer
```

**Note:** You don't need to `import` anything from `immer`; it is a peer-dependency of `@xstate/immer`, so it must be installed.

2. Import the Immer utilities:

```js
import { createMachine, interpret } from 'xstate';
import { assign, createUpdater } from '@xstate/immer';

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 Immer!
          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('TOGGLE');
// { count: 1, level: 0 }

toggleService.send(levelUpdater.update(9));
// { count: 1, level: 9 }

toggleService.send('TOGGLE');
// { count: 2, level: 9 }

toggleService.send(levelUpdater.update(-100));
// Notice how the level is not updated in 'inactive' state:
// { count: 2, level: 9 }
```

---
_Source: https://npm.io/package/@xstate/immer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._