XState Store 3.0 版本发布：状态管理的全新升级

2025-06-01 13:29:28作者：郜逊炳

XState 是一个流行的 JavaScript/TypeScript 状态管理库，它基于有限状态机（FSM）和状态图（Statecharts）的概念，为复杂应用的状态管理提供了强大的解决方案。XState Store 是 XState 生态中的一个重要组成部分，专注于提供轻量级、响应式的状态管理能力。

在最新的 3.0 版本中，XState Store 经历了一系列重大改进，这些变化不仅简化了 API 设计，还引入了新功能，使状态管理更加灵活和强大。让我们一起来看看这些令人兴奋的更新。

配置对象统一化

在 3.0 版本中，createStore 函数的参数结构进行了重大调整。现在它只接受一个配置对象作为参数，这与其他 XState API 的设计风格保持一致，提高了 API 的一致性。

// 旧版 API
// createStore(
//   { count: 0 },
//   { increment: (context) => ({ count: context.count + 1 }) }
// );

// 新版 API
createStore({
  context: { count: 0 },
  on: {
    increment: (context) => ({ count: context.count + 1 })
  }
});

这种改变不仅使代码更加整洁，还使得配置结构更加明确，提高了可读性。

状态转换中的副作用处理

3.0 版本引入了一个强大的新功能：在状态转换中排队执行副作用。通过 enq 参数，开发者可以轻松地安排异步操作，而不必担心状态管理的复杂性。

const store = createStore({
  context: { count: 0 },
  on: {
    incrementDelayed: (context, event, enq) => {
      enq.effect(async () => {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        store.send({ type: 'increment' });
      });
      return context;
    },
    increment: (context) => ({ count: context.count + 1 })
  }
});

这个特性特别适合处理需要延迟执行或异步获取数据的场景，使得状态管理逻辑更加清晰。

类型安全的触发器 API

新版本引入了 store.trigger API，提供了一种类型安全、流畅的方式来发送事件：

// 旧方式
store.send({ type: 'increment', by: 5 });

// 新方式
store.trigger.increment({ by: 5 });

这个 API 不仅语法更加简洁，还能在编译时捕获事件类型错误，大大提高了开发体验和代码安全性。

事件发射机制

3.0 版本引入了全新的事件发射系统，允许状态变更时触发外部事件：

const store = createStore({
  emits: {
    increased: (payload: { upBy: number }) => {
      // 可以在这里执行副作用或留空
    }
  },
  on: {
    inc: (ctx, ev: { by: number }, enq) => {
      enq.emit.increased({ upBy: ev.by });
      // ...
    }
  }
});

这个功能使得状态管理与外部系统的集成更加容易，特别是在需要与 UI 框架或其他库交互时。

上下文更新的严格模式

为了提高类型安全性和可预测性，3.0 版本要求上下文更新必须返回完整的新上下文对象：

// 不再支持部分更新
// increment: (context) => ({ count: context.count + 1 })

// 必须返回完整上下文
increment: (context) => ({ ...context, count: context.count + 1 })

虽然这增加了一些样板代码，但它确保了状态更新的明确性和可追踪性，减少了潜在的错误。