zoukankan      html  css  js  c++  java
  • [XState] Track Infinite States with with XState Context

    Consider a text input. It would be impossible for anyone to model every value you could possibly put into it, because the number of possible values is infinite. This is an infinite state.

    Infinite state can be tracked and utilized by XState machines as "extended state". This extended state is called context. Context is passed to every function that is triggered by the machine: actions, activities, guards, and more.

    In this lesson we learn how to set context and update it through assign actions.

    const { Machine, interpret, assign } = require("xstate");
    
    const inputMachine = Machine(
      {
        id: "inputMachine",
        initial: "input",
        context: {
          value: "Please enter a color"
        },
        states: {
          input: {
            on: {
              CHANGE_VALUE: {
                actions: ["changeInput"]
              }
            }
          }
        }
      },
      {
        actions: {
          changeInput: assign((context, event) => {
            return { value: event.color };
          })
        }
      }
    );
    
    const service = interpret(inputMachine)
      .onTransition(state => {
        console.log(state.context); // red
      })
      .start();
    service.send({ type: "CHANGE_VALUE", color: "red" });
  • 相关阅读:
    Lake Counting
    部分和问题
    迷宫最短路
    sublime 的使用技巧
    数组
    Factorial Trailing Zeroes
    Top K Frequent Elements
    Number of Connected Component in An Undirected Graph
    Zigzag Iterator
    Single Number III
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12215812.html
Copyright © 2011-2022 走看看