Initialize the NGRX Signal Store state from using RxJS Observables and rxMethod

[00:00] One of the most common tasks while working with NGRX signal store is integrating it with other services that can perform HTTP requests. In our case, we could create a new run HTTP request method here within the with methods call, and this would work absolutely okay. However, there is a [00:19] possibility which we're going to use to provide another call to the with methods or with computed, etcetera, that is going to allow us to group together features that are related to each other. So in other words, we can provide another with methods just to provide HTP [00:40] specialized methods. So it's going to work exactly the same, and the result is going to basically merge, as we could see, feature with a, with b, with c, and so on and so forth. So our store is composing the state and computers and methods and some more method, etcetera, etcetera. So, absolutely, we're going [00:59] to need the store itself, and we are also going to need the service that is capable of running HTTP requests. In our case, it's the employees HTTP service that I have created before and which implements the get employees method, which is simply going to shoot an HTTP get [01:19] request. So our new method is going to be called load employees, and this will allow us to remove the hard coded data that we've been using so far. So load employees is a method that is going to have no parameters so far and is going to do something. We'll take a look at this [01:39] later. And absolutely, we're going to need the instance of this employee's HTTP service. So here we're going to run employees HTTP, which is going to inject, again, the same Angular core, inject. And now let's just import [01:58] the employees HTTP service class. And here we've got the same as we had the logger before. So we have the setup up and running. What should the load employees do? We are not going to implement this method manually. And instead, we're going to use what is called the [02:18] rx method, which is imported from ngrx/signals/rxjsinterop. Now rx method is a utility that is going to create a, what is called, reactive method, and it's important for us because of two reasons. 1st is that we have access to all [02:38] things RxJS. So we will create a pipeline that is going to use all the operators and all the feature that we know from RxJS. And second thing is we can call the created method in 2 different ways. 1st, imperatively, where we can just pass a value whenever we [02:58] want with whatever value we want. But we can also make the pipeline re execute in a reactive way. And that is by passing not a value, but a value wrapped in a signal, basically a signal or a reactive stream. So that whenever the value within the signal changes, [03:18] the pipeline is going to be re executed. And analogically, if there is a new value available within the stream, so a new next notification is passed into RxJS stream, the pipeline is again going to be re executed. So this is a really powerful method. Now we mentioned that our load [03:38] employees is going to be a method that accepts no parameters, so we need to specify what is the type of the value. So in our case, this is going to be void since we pass no parameters into the method. Of course, if we included some parameters in order to reload the real [03:57] data, there would be some filtering criteria, some parameters to HTTP call. Now the content of the method, and this is absolutely beautiful, this is the native RX JS pipe, which includes all the operators and all the goodness that we know from RX JS. So [04:17] within the pipeline, we're going to put the switch map just in case if someone wants to click on reload, reload, reload, and we want the old request to be canceled. So we're just going to pause the switch map. Our switch map accepts no parameter. And what we're going to do is, of course, we're [04:37] going to use the employee's HTTP, and we're going to get all employees just like this. Now that we have implemented the switch map operator, we should take into account the fact that our state includes the loaded items property, the is loading indicator of loading or [04:57] not, or that an error has happened or not. So, accordingly, to whatever is going on within our stream, we should update our properties accordingly. So let's now move to our reactive stream back again. And what we're going to use just to keep things simple is the tap [05:17] operator again imported just from our ex JS. And what we need to do over here is to basically take care of the loading state. And here, when we are done with a switch map, whether we succeeded, that would be basically loading the items or an error if there [05:37] was any error that was thrown. So in the original tap, just as we do with the original tap, now we're not interested in whatever the value was, especially that there is no value. So the callback to tap is basically a parameter less function. What we're going to do here is basically to update the state, which we're [05:56] doing using the patch state function imported from n g r x signals. And what we're going to pass here is the store itself, and the function that is going to update our state now, we could use the state, although we don't need it in this very case. So we are just patching all the [06:16] properties that we want to change. So in our case, the is loading is certainly true. And if we are loading, there should be no error at all whatsoever. And if we are loading, then there should be, most probably, no items at this point. Of course, depending on the logic, it could look [06:36] slightly different. So this is the loading scenario. Now let's move to the scenario in which we handle either the success or the failure buffer is the missing comma. And we're going to use the overload of the tap operator, which allows us to use exact types of notification that we're interested in. And [06:56] in our case, this is going to be the next for what is going on when we load the items and the error whenever there is an error going on. So, again, when we get the next notification, we shall run the path state. And, again, store, and we can [07:16] avoid passing the function. So we can immediately define the object literal, which includes only the properties that we want to overwrite. And in our case, this is going to be that the loaded items is what we just received from the server. Now since we [07:36] got the response, we don't have any is loading indicator, so this one is false. And, also, we have no error since well, basically, there is no error at this point. And one more thing, another patch state. So patch state, store, and what we get [07:56] here is that is loading is false since the error is happening. So also the error is here. And also, that the loaded items is basically an empty array or whatever representation we could think of. And let's update the initial state. So [08:16] the initial state is not going to use any mock employees. We're just going to put the empty array or again whatever would be the representation of no data loaded yet. So now let's just call the method. Let's open the employees listing component. And what we [08:36] want to do simply is to put the button, which is going to run the load employees method. So let's just call it load or actually reload button. And whenever we click this button, what we're going to do is to run the store dot load employees, which [08:55] is a reactive method that accepts no parameters. So let's see this in action and let's remove the unnecessary parentheses. And, yep, when we click reload, we can see that there was a loading notification and that the data is over here. Let's also take a look at the network tab. So whenever we [09:15] run the reload function, we can see that there is a new request. And, also, if we carry on clicking the reload, reload, reload, reload, we can see that the previous request is being canceled in favor of another request that proceeds because this is how switch map works.