计数器

¥Counter

这些 XState v4 文档不再维护

XState v5 现已推出！阅读有关 XState v5 的更多信息 (opens new window) 和 查看 XState v5 文档 (opens new window)。

¥XState v5 is out now! Read more about XState v5 (opens new window) and check out the XState v5 docs (opens new window).

此计数器应用示例演示了一个具有单个 'active' 状态和两个可能事件的计数器：

¥This counter app example demonstrates a counter that has a single 'active' state and two possible events:

• 'INC' - 将当前计数增加 1 的意图

  ¥'INC' - an intent to increment the current count by 1

• 'DEC' - 将当前计数减 1 的意图

  ¥'DEC' - an intent to decrement the current count by 1

count 是 存储在 context 中。

¥The count is stored in context.

import { createMachine, interpret, assign } from 'xstate';

const increment = (context) => context.count + 1;
const decrement = (context) => context.count - 1;

const counterMachine = createMachine({
  initial: 'active',
  context: {
    count: 0
  },
  states: {
    active: {
      on: {
        INC: { actions: assign({ count: increment }) },
        DEC: { actions: assign({ count: decrement }) }
      }
    }
  }
});

const counterService = interpret(counterMachine)
  .onTransition((state) => console.log(state.context.count))
  .start();
// => 0

counterService.send({ type: 'INC' });
// => 1

counterService.send({ type: 'INC' });
// => 2

counterService.send({ type: 'DEC' });
// => 1

建模最小值和最大值

¥Modeling Min and Max

使用 guards，我们可以通过防止 'DEC' 和 'INC' 事件在某些值上的转换来分别对最小值和最大值进行建模：

¥With guards, we can model min and max by preventing transitions on the 'DEC' and 'INC' events on certain values, respectively:

// ...

const isNotMax = (context) => context.count < 10;
const isNotMin = (context) => context.count >= 0;

const counterMachine = createMachine({
  initial: 'active',
  context: {
    count: 0
  },
  states: {
    active: {
      on: {
        INC: {
          actions: assign({ count: increment }),
          cond: isNotMax
        },
        DEC: {
          actions: assign({ count: decrement }),
          cond: isNotMin
        }
      }
    }
  }
});

// ...

// assume context is { count: 9 }
counterService.send({ type: 'INC' });
// => 10

counterService.send({ type: 'INC' }); // no transition taken!
// => 10