计数器

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

  • 'INC' - an intent to increment the current count by 1
  • 'DEC' - an intent to decrement the current count by 1

The count is stored in context.

  1. import { createMachine, interpret, assign } from 'xstate';
  3. const increment = (context) => context.count + 1;
  4. const decrement = (context) => context.count - 1;
  6. const counterMachine = createMachine({
  7.   initial: 'active',
  8.   context: {
  9.     count: 0
  10.   },
  11.   states: {
  12.     active: {
  13.       on: {
  14.         INC: { actions: assign({ count: increment }) },
  15.         DEC: { actions: assign({ count: decrement }) }
  16.       }
  17.     }
  18.   }
  19. });
  21. const counterService = interpret(counterMachine)
  22.   .onTransition((state) => console.log(state.context.count))
  23.   .start();
  24. // => 0
  26. counterService.send('INC');
  27. // => 1
  29. counterService.send('INC');
  30. // => 2
  32. counterService.send('DEC');
  33. // => 1

Modeling Min and Max

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

  1. // ...
  3. const isNotMax = (context) => context.count < 10;
  4. const isNotMin = (context) => context.count >= 0;
  6. const counterMachine = createMachine({
  7.   initial: 'active',
  8.   context: {
  9.     count: 0
  10.   },
  11.   states: {
  12.     active: {
  13.       on: {
  14.         INC: {
  15.           actions: assign({ count: increment }),
  16.           cond: isNotMax
  17.         },
  18.         DEC: {
  19.           actions: assign({ count: decrement }),
  20.           cond: isNotMin
  21.         }
  22.       }
  23.     }
  24.   }
  25. });
  27. // ...
  29. // assume context is { count: 9 }
  30. counterService.send('INC');
  31. // => 10
  33. counterService.send('INC'); // no transition taken!
  34. // => 10