angular - 如何设置 Xstate 以在 Angular 中使用 Redux Dev Tool

Question

我在 Angular 项目中使用 xstate 进行状态管理。我做了

this.service = interpret(machine, { devTools: true }).start();

启动我的机器时，但 redux 开发工具没有从我的项目中获取任何事件。除了添加 redux 扩展外，是否需要任何其他设置。

Answer 1

Redux devtools 不适用于 xstate。但他们提供了一个很棒的包：

npm i @xstate/inspect

或者

yarn add @xstate/inspect

在您的代码中，无论您在哪里解释机器：

 // add this statement before interpreting   
inspect({ iframe: false });

const machine =  Machine<DefaultContext, StateSchema, EventObject>(machineConfig as MachineConfig<DefaultContext, StateSchema, EventObject>).withConfig(machineOptions);
const interpreter = interpret(machine, { devTools: true}).start();

这将自动启动 XState Inspector 并在执行时向您显示转换，前提是您正确编写了机器代码的其余部分。