Implement a simple State Machine using NGRX Signal Store

Tomasz Ducin
InstructorTomasz Ducin
Share this video with your friends

Social Share Links

Send Tweet

The withMethods call that we're using for our HTTP service logic is starting to get complex with logic that deals with both high and low level details.

It'd make sense at this point to move some of the low-level logic into it's own withMethods call and make it available via private methods.

[00:00] In case our implementation gets dirty, we can break it up into more pieces like with methods or with computed. In our case, the load employees method is mixing the responsibilities as it is responsible for the reactivity along with the RX method, the RX JS pipe, and all the [00:19] operators available here. And it also deals with updating the local state of the store, not to mention that it knows all the details about all the properties available on the store. So in order not to make a rather simple pipeline look really complex [00:39] and have the high level overview and low level details at the same time, we can try to extract some low level pieces into a separate with state, with method, with computed call, and keep the things that are high level separate from everything that is low level. [00:59] So for this reason, let's introduce one more with method call just for the sake of readability and easier maintenance in the future. And what we're going to put here is, of course, the score. And we're just going to encapsulate the state updates. [01:20] So this is actually setting our store into the loading state. So let's just call it set loading. So we need no parameters over here. So we know what to do. Right? So we know that loading is true, error is null, and there are no [01:39] items. And we want to make this method private since only the internals of the store can walk into the loading state, but no components or services from the outside should be doing it since this is basically the internal implementation details. So this is a perfect [02:00] place where the underscore convention, the private elements of the store match. So what we can do here is simply store dot set loading. And that's it. So we don't even need any comment over here because the code is self documenting. Now the 2 [02:19] other method that we can introduce is basically the set error. And of course, here we are going to put whatever the error is here. Note that I'm not going to put the null over here since this basically means that we are walking into the loading state or walking into the error state. So we cannot walk into the [02:39] error state if the error was null. So only this one makes sense. The same as we've got over here. So we don't put the error to be null, like the error needs to be here anyway. So let's just cut it away from here, and let's just do the patch state. [02:59] And let's also do the very same thing when we can set items or whatever we call it. Now the loaded items that we've got over here are going to be of type employee array, the same type that we've been using so far. And the set items [03:19] is going to use what we had here in the next tap use, and this is going to be the loaded items. And since we have the underscore set error and underscore set items, our implementation is going to simplify. The app store is [03:39] going to run the set items or the items themselves and store dot set error with whatever is the error. So this way, we can further simplify and encapsulate the internal items, internal functionalities, [03:59] and elements of the store, which is absolutely recommended, especially with big and complex stores.