Replacing CartService with CartStore

[00:00:00]
>> Alex Okrushko: All right, let's see how can we use this cart store, and now we're going to go into our event details page. We don't have the bookstore anymore, but we'll have something else. OK. All right, this is gone. Now let's do some refactoring, so here we go, we'll just private. We need a private, we don't need private, we can just readonly.

[00:00:31]
Cart store which we won't need the service anymore. Cart store. Inject cart store. All right, we have it, we don't need to add to the providers because the cart store is provided in root. So it's not a local state, it's global state. So we inject it in the event details, and by the way. Yeah, let's do it here first. So then in the cart store, instead of cart services ticket, we'll do cart store at ticket, what do we have here, add to cart, add to cart.

[00:01:21]
And then it'll take strings, not so, yes, so we need to provide, we wrap it a little bit, event ID. That's the event ID. I could have just provided the string directly if I really want to just to come say have the same thing, right. We can't provide the string directly, so we could have had pretty much the same API. So now this adds to the cart, and again, notice there's no load here, right, no load, that was not part of what is allowed to be used.

[00:01:59]
OK, so that's how we add, and now let's go back to our header. Header, and in the header, instead of using the cart service, we're going to use the cart store. Cart store and in the cart store here. We have the count. It's exposed, right? Count is there. Count is part of our computed. All right, let's see it working. One more thing, we can do other things, let's see, in our buy button, for example.

[00:02:52]
Cart. Yeah, before we do that, let's just see how it's working already. So I need to start this, going to start this. To-do store, yes, we don't have to-do store anymore. Event or event details. Here it is. I don't need this, and what else was complaining about this event details, event details. Where's our store? Here it is, OK.

[00:03:34]
Apples, all right, and we don't have any or extras here anymore. Perfect, perfect. All right, looks like it's working. And I get to our network requests, and let's clear this, do do do, here it is. I love waterfall here, so if you don't have waterfall enabled for the, I highly recommend looking at, it's so nice to always see what's exactly happening.

[00:04:08]
So anyhow, let's clear it, let's do the buy event now, buy a ticket, right, we got a ticket, it's going. The first one is a preflight. I was just checking if I can call this. I can see it's going right, so, but if I do multiple clicks, it's not doing anything, right? So now, because we use, we chose the exhaustMap strategy, we can really control that.

[00:04:39]
And even if it's, let's make it fail. Let's make it fail to be very fair to this. When we have the error, this is post at the cart. This is API that we're going to call so. Something like that. Let that it fail. All right, let it burn. There you go, boom, oops. It failed really spectacularly. Now if we click multiple writers, it's still ignoring us and it's only tries, see, it's like 20 to 23, and then it fails.

[00:05:18]
I don't. There you go, right? One thing that I could have done before as well, and I talked about it, we can kind of disable status and change this, we have this part of our store, let's use it, right? So let's just get this guy here to the original state. So we have the pending, let's use that pending as well, so in our add to cart.

[00:05:51]
When we're adding things to cart here where our buy button is, or this is the event details, sorry. Event details, loading up, here's to buy tickets, right? What we can do is this button to click yes, and it can say. If, so this is when we're buying this, we can say, if cart store is pending, and this comes from request status, with request status that added that is pending.

[00:06:33]
Computing. I can say it's syncing, instead I will say buy tickets, and moreover, we can also disable the settlement. So it's not even clickable, disabled when the cart store is pending. All right. And combined to disabled because it should be disabled, should be disabled, oh, disabled, there you go. Perfect. Let's get to our app.

[00:07:14]
It's hot module loaded, so it's good, let's do buy tickets, it's syncing and it's disabled, we need to add some styling to disabled, but I can't click it. There you go. Cool stuff, right, header, we added the header account is there, verification is there. Done all of this. Congratulations, you know, now no part of the signal store.

[00:07:43]
One of the hottest libraries for Angular. Again, really popular, there's always a lot of excitement, I was just talking to Dustin yesterday, the views for NgRx is ridiculous, it's super popular, this app, and downloads are rising very high. All right, so, just to highlight again, what does the signal store allow us to do?

[00:08:12]
It allows us to organize and encapsulate the state, the derived state, and how we operate on that state. It would also allow us, which we don't show right now, but it allows us to take the business logic of the component outside of the component and also organize it in places, right? We can have, we don't have to have a single, single store for the entire application, that's anti-pattern, you can have multiple, as many as you want, right?

[00:08:43]
Each one is responsible for its own state, and that, and it owns that state 100%, it becomes a source of truth for that state. So at any time in the life cycle of the app, you should be able to fetch the state at any point in time. Yes. You could, yes. If you have state only for specific pages that you want to clean up and recreate, then you'll have a signal store that's provided in that specific page.

[00:09:06]
So then when we navigate off that page, everything's gone from the state, the store is gone, right? Something like we use for tab state, which is provided only for tab group.