标签: xstate

我是 XState.js 的新手。

我想在我的上下文中使用一个简单的 ID。如何使用 更新上下文machine.send()？

     const fetchMachine = Machine(
        {
          id: 'test',
          initial: 'init',
          context: {
            id: '',
          },
          states: {
            init: {
              on: {
                LOGIN: 'fetch',
              },
            },
            fetch: {
              on: {
                LOGOUT: 'init',
              },
            },
          }
       })


      const machine = interpret(fetchMachine).start()

如何将 ID 传递给上下文？

这不能解决问题：

      machine.send({ type: 'LOGIN', id })

我是 xstate 的新手，我尝试在应用程序中使用它，用户可以根据父状态和/或子状态在应用程序中请求不同的内容。但是，无论应用程序处于什么状态/子状态，用户都应该能够发出一些请求。无论之前的状态是什么，对这些事件的响应都是相同的。如何配置此事件，以便我不必在所有状态/子状态下重复定义它？

我正在用 xstate 库编写状态图。

状态图代表一个中等复杂的 UI。

我有几个平行的状态，但对于这个问题，让我们只考虑两个：

SelectionStatus，代表选择项，区分子状态SelectedNone，SelectedOne，SelectedMany。

Operation，代表当前正在进行的操作。它有一个名为Idle（当然还有其他一些）的子状态。

有一些事件会触发循环回到Idle子状态的动作，而不会转到另一个状态。让我们将它们视为即时操作，例如removeSelected仅删除所选项目的操作（这就是问题的重点）。

removeSelected如果选择仅限于单个项目（实际上是树中的一个节点）或多个（树的一个分支），我将向事件添加条件以执行不同的操作。

用于描述事件的操作和条件的 xstate 语法将是：

removeSelected: {
    Idle: {
         cond: isSelectedOneGuard,
         actions: ['removeOne']
    },
    Idle: {
         cond: isSelectedManyGuard,
         actions: ['removeMany']
    }
}

问题是我Idle在同一对象嵌套级别编写了两个键，这是无效的。

我已经考虑过重构状态图以将两个操作分支作为选择分支的子状态，但这似乎是一种比问题更糟糕的治疗方法。

我还考虑过使用中间虚拟状态，比如RemovingOne和RemovingMany，这只会触发返回到 的转换Idle，但我对此并不满意。

我可以通过删除保护条件来解决这个问题，在通用removeOneOrMany操作处理程序中进行测试，但是我会在状态图中丢失有关不同处理的信息。

任何人都遇到过类似的问题，可以就此提供一些建议吗？

（注意：这是指当前版本的 xstate，即 3.1.1，3.2 快到了，我不知道是否可以更轻松地处理这种情况）

谢谢！

我已经阅读了调用多个服务部分，它说一个人可以调用多个承诺，但在我自己的测试中，它们看起来不需要等待前一个完成就被调用

// ...
invoke: [
  { id: 'service1', src: 'someService' },
  { id: 'service2', src: 'someService' },
  { id: 'logService', src: 'logService' }
],
// ...

这是一个答案以及创建中间状态的解决方法

states: {
    first: {
      invoke: {
        src: 'one',
        onDone: {
          target: 'second',
        }
      }
    },
    second: {
      invoke: {
        src: 'two',
        onDone: {
          target: 'success',
        }
      }
    },
    success: {
      type: 'final'
    }
}

有没有办法Promise.each用调用进行链接，使 invoke([]) 串行运行？

我只能看到两个选项：

1. 中间状态
2. 调用一个自身进行链接的 promise。

基本上，我有很多不同的状态。我希望机器能够通过事件从外部接收和更新上下文（无论它处于哪种状态）。我发现这个链接说事件如何可以是根级别... 使用 xstate，是否可以配置一个适用于所有状态的事件，并在所有状态和子状态中以相同的方式处理？

但我似乎还记得 new allocates() 在状态改变之前实际上不会生效。

我正在构建一个带有 UI 并TypeScript与UIxState相结合的登录机器React。

我的机器是：

import { LoginResponse } from 'async/authentication/responseModel';
import Data from 'data';
import { AUTH_TOKEN } from 'Machines/authentication/constants';
import services from 'services';
import { assign, DoneInvokeEvent, Interpreter, Machine, MachineConfig, State } from 'xstate';

export type AutomataContext = {
  authentication: {
    oldToken: {
      exists: boolean;
      token: string;
    };
    token: string;
  };
  login: {
    email: string;
    password: string;
  };
};

export interface AutomataStatesSchema {
  states: {
    SEARCHING_EXISTING_AUTH_TOKEN: {};
    VERIFYING_EXISTING_TOKEN: {};
    LOGIN_VIEW: {};
    AUTHENTICATING: {}; …