随笔分类 -  XState

摘要:import { createMachine } from "@zag-js/core"; type MachineState = { value: "idle" | "focused"; }; type MachineContext = { value: string[]; focusedInde 阅读全文
posted @ 2023-02-19 03:25 Zhentiw 阅读(26) 评论(0) 推荐(0) 编辑
摘要:Invoke by Promise: import { createMachine, interpret, send } from "xstate"; const machine = createMachine({ initial: "loading", states: { loading: { o 阅读全文
posted @ 2022-11-30 02:07 Zhentiw 阅读(43) 评论(0) 推荐(0) 编辑
摘要:function countBehavior(state, event) { if (event.type "INC") { return { ...state, count: state.count + 1 } } } function createActor(behavior, initialS 阅读全文
posted @ 2022-11-30 01:35 Zhentiw 阅读(28) 评论(0) 推荐(0) 编辑
摘要:import { Machine, actions } from "xstate"; const { raise } = actions; // Demostrate `raise` action const stubbornMachine = Machine({ id: "raisedmo", i 阅读全文
posted @ 2022-11-26 17:50 Zhentiw 阅读(35) 评论(0) 推荐(0) 编辑
摘要:import { assign, createMachine } from "xstate"; type FetchStates = | { value: "idle"; context: FetchContext & { results: []; message: ""; }; } | { val 阅读全文
posted @ 2022-11-23 16:39 Zhentiw 阅读(50) 评论(0) 推荐(0) 编辑
摘要:import "./styles.css"; import React from "react"; import ReactDOM from "react-dom"; import { createMachine, assign } from "xstate"; import { useMachin 阅读全文
posted @ 2022-11-23 03:24 Zhentiw 阅读(57) 评论(0) 推荐(0) 编辑
摘要:Invoke not only able to return a promise, but also a callback function with 'sendBack' & 'receive' callbacks invoke: { // nested state with id referen 阅读全文
posted @ 2020-08-13 15:56 Zhentiw 阅读(259) 评论(0) 推荐(0) 编辑
摘要:Actor, which can invoke a promise to fetch data. import { createMachine, assign, interpret } from "xstate"; const elBox = document.querySelector("#box 阅读全文
posted @ 2020-08-10 15:46 Zhentiw 阅读(190) 评论(0) 推荐(0) 编辑
摘要:const displayMachine = createMachine( { initial: "hidden", states: { hidden: { on: { TURN_ON: "visible.hist", }, }, visible: { // Add parallel states 阅读全文
posted @ 2020-08-07 01:45 Zhentiw 阅读(221) 评论(0) 推荐(0) 编辑
摘要:const displayMachine = createMachine({ initial: "hidden", states: { hidden: { on: { TURN_ON: "visible.hist", }, }, visible: { initial: "light", states 阅读全文
posted @ 2020-07-31 16:22 Zhentiw 阅读(165) 评论(0) 推荐(0) 编辑
摘要:When dragging, we want to have two modes, one in 'normal' mode, another one is 'locked', we enter the locked mode by holde on 'shift' key. To achieve 阅读全文
posted @ 2020-07-31 16:14 Zhentiw 阅读(187) 评论(0) 推荐(0) 编辑
摘要:import { createMachine, assign, interpret } from "xstate"; const elBox = document.querySelector("#box"); const elBody = document.body; const assignPoi 阅读全文
posted @ 2020-07-29 20:02 Zhentiw 阅读(203) 评论(0) 推荐(0) 编辑
摘要:It uses " " as key, by default, this is the inital state, it often uses with 'cond' import { createMachine, assign, interpret } from "xstate"; const e 阅读全文
posted @ 2020-07-29 19:51 Zhentiw 阅读(187) 评论(0) 推荐(0) 编辑
摘要:Garuded Transitions, it prevents the state goes from current sate to its target state is condition is falsy. const machine = createMachine( { initial: 阅读全文
posted @ 2020-07-22 20:50 Zhentiw 阅读(141) 评论(0) 推荐(0) 编辑
摘要:import { createMachine, assign, interpret } from "xstate"; const elBox = document.querySelector("#box"); const elBody = document.body; const assignPoi 阅读全文
posted @ 2020-07-21 18:46 Zhentiw 阅读(182) 评论(0) 推荐(0) 编辑
摘要:Let's we want to keep tracking how many times on element was click inside Machine model. We can use 'context' & 'assign' function. import { assign, cr 阅读全文
posted @ 2020-07-20 22:36 Zhentiw 阅读(186) 评论(0) 推荐(0) 编辑
摘要:Let's say we have a State Machine Model: import { createMachine, interpret } from "xstate"; const elBox = document.querySelector("#box"); const setPoi 阅读全文
posted @ 2020-07-20 22:25 Zhentiw 阅读(167) 评论(0) 推荐(0) 编辑
摘要:import { createMachine, interpret } from "xstate"; const elBox = document.querySelector("#box"); const machine = { initial: "inactive", states: { inac 阅读全文
posted @ 2020-07-16 18:48 Zhentiw 阅读(165) 评论(0) 推荐(0) 编辑
摘要:Trying to structure the state logic of an application as a single machine can begin to become unwieldy when we have too many states. It is often bette 阅读全文
posted @ 2020-01-21 21:18 Zhentiw 阅读(413) 评论(0) 推荐(0) 编辑
摘要:We can invoke a callback as a service when we enter a state in XState. This gives us the ability to trigger various functionality by responding to eve 阅读全文
posted @ 2020-01-21 17:38 Zhentiw 阅读(627) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示