An NgRx based State Machine for Angular Components - Part 4

Ok, so I finally got around to the final part in this series. When I came to try and write up how all the parts of the state machine were wired up I decided that a demo was a better approach. So, here it is:


Here you can see a basic example of a component that is using the state machine to set the ui state to processing when an update user action is emitted, and setting it back when an update user success action is received.

There is an @effect in the user.service which adds a delay of 3 seconds to the response to make this more obvious. If you open the console you can see the action being received by the @effect, and if you click the button again while the component state is set to processing you will notice that a second action is not received by the @effect as the the state machine does not see a transition from Processing -> Processing as being valid so it drops this action on the floor.

We are still evaluating if some of the extra boilerplate required to set up the component states is worth the effort. If we decide that it is, we will hopefully refine the process further and try and release it as an open source module. Watch this space!

Comments