随笔分类 - XState
摘要:import { createMachine } from "@zag-js/core"; type MachineState = { value: "idle" | "focused"; }; type MachineContext = { value: string[]; focusedInde
阅读全文
摘要:Invoke by Promise: import { createMachine, interpret, send } from "xstate"; const machine = createMachine({ initial: "loading", states: { loading: { o
阅读全文
摘要:function countBehavior(state, event) { if (event.type "INC") { return { ...state, count: state.count + 1 } } } function createActor(behavior, initialS
阅读全文
摘要:import { Machine, actions } from "xstate"; const { raise } = actions; // Demostrate `raise` action const stubbornMachine = Machine({ id: "raisedmo", i
阅读全文
摘要:import { assign, createMachine } from "xstate"; type FetchStates = | { value: "idle"; context: FetchContext & { results: []; message: ""; }; } | { val
阅读全文
摘要:import "./styles.css"; import React from "react"; import ReactDOM from "react-dom"; import { createMachine, assign } from "xstate"; import { useMachin
阅读全文
摘要:Invoke not only able to return a promise, but also a callback function with 'sendBack' & 'receive' callbacks invoke: { // nested state with id referen
阅读全文
摘要:Actor, which can invoke a promise to fetch data. import { createMachine, assign, interpret } from "xstate"; const elBox = document.querySelector("#box
阅读全文
摘要:const displayMachine = createMachine( { initial: "hidden", states: { hidden: { on: { TURN_ON: "visible.hist", }, }, visible: { // Add parallel states
阅读全文
摘要:const displayMachine = createMachine({ initial: "hidden", states: { hidden: { on: { TURN_ON: "visible.hist", }, }, visible: { initial: "light", states
阅读全文
摘要: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
阅读全文
摘要:import { createMachine, assign, interpret } from "xstate"; const elBox = document.querySelector("#box"); const elBody = document.body; const assignPoi
阅读全文
摘要:It uses " " as key, by default, this is the inital state, it often uses with 'cond' import { createMachine, assign, interpret } from "xstate"; const e
阅读全文
摘要:Garuded Transitions, it prevents the state goes from current sate to its target state is condition is falsy. const machine = createMachine( { initial:
阅读全文
摘要:import { createMachine, assign, interpret } from "xstate"; const elBox = document.querySelector("#box"); const elBody = document.body; const assignPoi
阅读全文
摘要: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
阅读全文
摘要:Let's say we have a State Machine Model: import { createMachine, interpret } from "xstate"; const elBox = document.querySelector("#box"); const setPoi
阅读全文
摘要:import { createMachine, interpret } from "xstate"; const elBox = document.querySelector("#box"); const machine = { initial: "inactive", states: { inac
阅读全文
摘要: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
阅读全文
摘要: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
阅读全文