首页 > 其他 > 详细

[XState] Track Infinite States with with XState Context

时间:2020-01-19 23:58:37      阅读:158      评论:0      收藏:0      [点我收藏+]

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" });

 

[XState] Track Infinite States with with XState Context

原文:https://www.cnblogs.com/Answer1215/p/12215812.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!