xstate

问题 Take this finite-state machine: { initial: "foo", states: { foo: { on: { BAR: "bar" } }, bar: { on: { FOO: "foo" } } } } And in my component, I do this: import { useMachine } from "@xstate/react"; export default function() { const [current, send] = useMachine(machine); useEffect(() => { send("BAR"); }, []); return ( <> Hello World </> ); } This is perfectly valid code and the machine will switch to the "bar" state. Now, what happens if I do this? useEffect(() => { send("QUX"); }, []); The QUX

问题 Take this finite-state machine: { initial: "foo", states: { foo: { on: { BAR: "bar" } }, bar: { on: { FOO: "foo" } } } } And in my component, I do this: import { useMachine } from "@xstate/react"; export default function() { const [current, send] = useMachine(machine); useEffect(() => { send("BAR"); }, []); return ( <> Hello World </> ); } This is perfectly valid code and the machine will switch to the "bar" state. Now, what happens if I do this? useEffect(() => { send("QUX"); }, []); The QUX

问题 Take this finite-state machine: { initial: "foo", states: { foo: { on: { BAR: "bar" } }, bar: { on: { FOO: "foo" } } } } And in my component, I do this: import { useMachine } from "@xstate/react"; export default function() { const [current, send] = useMachine(machine); useEffect(() => { send("BAR"); }, []); return ( <> Hello World </> ); } This is perfectly valid code and the machine will switch to the "bar" state. Now, what happens if I do this? useEffect(() => { send("QUX"); }, []); The QUX

问题 When thinking on the visual expression for a workflow, a directed-graph may be one of the first solutions that comes to mind. My app already leverage ECharts so I'd like to use it as well to generate a graph for my workflow. Following is a basic example of a nested-directed-workflow: Is there any component in ECharts that can be used as a container? and be linked to/from (similar to the red "container" in the above image? UPDATE: created an issue on ECharts Github repo to help drive this

问题 I am new to xstate, and I'm trying to use it in an application where a user can request different things in an application, based on parent state and/or sub-state. However, there are some requests that the user should be able to make, no matter what state/sub-state the app is in. The response to those events is the same, no matter what the previous state was. How can I configure this event, so that I don't have to repeat define it under all states/sub-states? 回答1: Yes - the algorithm for

问题 I am new to xstate, and I'm trying to use it in an application where a user can request different things in an application, based on parent state and/or sub-state. However, there are some requests that the user should be able to make, no matter what state/sub-state the app is in. The response to those events is the same, no matter what the previous state was. How can I configure this event, so that I don't have to repeat define it under all states/sub-states? 回答1: Yes - the algorithm for

问题 I have a simple chatMachine that invokes a todoMachine. The todoMachine has an event called 'OPENED_TASK_LIST_CREATOR' which I want to invoke from chatMachine. I've managed to figure this out. export const chatMachine = Machine({ id: 'chat', initial: 'idle', context: { message: '' }, states: { idle: { invoke: { id: 'todo', src: todoMachine }, on: { COMMENT_SUBMITTED: { actions: 'addComment' }, COMMENT_STARRED: { actions: [ (ctx, e) => console.log('e.payload', e.payload), send('OPENED_TASK

问题 I am planning to use XState for managing states in the backend of my application. When an api is called, a function will be called on successful state change. The result of the function call has to be returned as response of the api. // Returns a Promise, e.g.: // { // id: 42, // name: 'David', // friends: [2, 3, 5, 7, 9] // friend IDs // } function getUserInfo(context) { return fetch('/api/users/#{context.userId}').then(response => response.json() ); } // Returns a Promise function