与 Immer 一起使用

Immer 是一个使不可变数据更新更方便的库。它可以与 XState 一起使用，以不可变的方式更新 context。

建议直接将 Immer 与 XState 一起使用，而不是使用已弃用的 @xstate/immer 包。

安装

从 npm 安装最新版本的 xstate 和 immer：

npm

npm install xstate immer

pnpm

pnpm install xstate immer

yarn

yarn add xstate immer

有关更多信息，请参阅 Immer 安装文档。

Immer 用法

XState 已经允许您在 assign actions 中部分或完全不可变地更新 context。但是，对于更复杂的场景，您可能希望使用 Immer 以一种更简洁的方式更新 context。

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

const machine = createMachine({
  id: 'todos',
  context: {
    todos: [],
    filter: 'all'
  },
  // ...
  on: {
    'todo.complete': {
      // 使用 Immer 更新单个 context 属性
      actions: assign({
        todos: ({ context, event }) => produce(context.todos, draftTodos => {
          const todo = draftTodos.find(t => t.id === event.todo.id);
          todo.completed = true;
        })
      })
        },
        'todos.add': {
      // 使用 Immer 更新多个 context 属性
      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';
        }
      }))
    }
  }
});