How can I setup Xstate to use Redux Dev Tool in angular

Question

I am using xstate for state management in a angular project. I did the

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

when starting up my machine but the redux dev tool is not picking up any event from my project. are there any additional setup required other than adding the redux extension.

I was able to resolve this problem by using the xstate inspect package and following the instruction on the quick start https://xstate.js.org/docs/packages/xstate-test/#quick-start — 2cool4school, Jan 21 '21 at 21:06

score 0 · Answer 1 · edited Mar 30 '21 at 08:43

Redux devtools is not usable for xstate. But they provide a great package:

npm i @xstate/inspect

or

yarn add @xstate/inspect

in your code, wherever you interpret the machine:

 // 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();

This will automatically start XState Inspector and will show you transitions while doing them, provided that you wrote the rest of the machine code correctly.

How can I setup Xstate to use Redux Dev Tool in angular

1 Answers1