Move calculation and state handling into machine

[pke]

Thanks for writing this example statechart for xState. I am currently putting together an API Server for xState charts and would like to include your calculator as an example.
For that to work, the machine itself must be self contained. That means it should be usable without external dependencies.

In your example here you do the state management and calculations in the react component. Would it be possible to separate the two concerns: state and UI a bit more?
It would make the react component leaner and I could just include your machine.js in my API server.

What do you think?

[mukeshsoni]

I don't understand. There is a machine.js file right now which only has the machine.

[pke]

Where are the actions defined in this machine?

[mukeshsoni]

Actions are defined in the machine as strings. Things keeps the machine more reusable. It can be used in various contexts and environments.

[pke]

I saw that they are defined as strings, which is good. But since the implementation of the actions are in the calculator react component, the machine itself is not re-usable. All the calculations are done in the calculator.js component. One would have to replicate all this code, to convert it to another UI Framework like vue.

You can try to paste your machine.js code into https://xstate.js.org/viz/ to see if the statechart works on its own. I tried and it failed to set the initial state. Not sure if that is a bug in the viz code or the machine. A self contained calculator statechart should work in the viz.

When you try to add tests to this repo you will get a feeling how much coupled the machine and calculator actually are. I could not write one test for your machine to test if it calculates correctly, because all the input and output and the actual calculations are handled in UI code.