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

问题描述

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

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

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

解决方法

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,EventObject>).withConfig(machineOptions);
const interpreter = interpret(machine,{ devTools: true}).start();

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