Creating a Store Practice

[00:00:00]
>> What I'd like you to do is I'm gonna go ahead and commit this code and then you're gonna practice creating a dishStore. And so now we're gonna migrate that over and see how far you can get and then I'll see you all on the other side. I know for me once I started using Pinia like I was just so glad to not have to write mutations anymore and just do the thing I want you to do, thank you and track it for me like all that goodness.

[00:00:27]
Okay so, let me go and make sure I push up the latest 10 exercise branch. I think some people might have done it I didn't make, so what I did do I guess for the purpose of record keeping. Is that if you check out the 10 dash exercise branch you'll notice that restaurant page has been properly like refactored to use all of this store.

[00:00:46]
So basically a couple of things just to point out is that the number of restaurants have actually restored. Because in this case we're doing the filtered restaurant list and I haven't exactly moved that to the store just yet. So this is a different type of number of restaurants versus the store number of restaurants, which is like call it the master copy of all the stores in perpetuity.

[00:01:05]
Okay, so with that your job was to refactor the dishes page so let's go and do that. So creating a new store was the DishStore.ts and then we'll import defineStore. And then once we do that we can export a const called useDishstore, and then define the store and what's the idea gonna be called?

[00:01:29]
We're gonna call it Dishstore, and then we'll pass it an object for the state and so we know that the state is gonna need some shape. So let's go ahead and just define that now, so we'll call that StateShape, and so for those, wondering about like, naming is a hard thing, right?

[00:01:46]
We talk a lot about that in programming, but the one thing I like about keeping some of my states like types, especially in line in my components or files. Is that I don't have to worry about it conflicting with something else, because obviously StateShape is gonna mean a lot of different things across different components.

[00:02:01]
But for this particular store, StateShape is just for this store so you don't have to worry about like, I'm gonna call it DishState, state like store. That's only relevant when you share it across multiple files but don't be afraid to inline your types directly on the file that is working.

[00:02:16]
I'm a big fan of like, I call it like data driven refactoring, where you actually show that you have repeated code across paces. Then that's when you take the time to actually modularize it, start distracting, refactoring. So that said, we do know for a fact that we'll have a list similarly, and we'll have a dish that will be an array, so that's basically all we need to know.

[00:02:35]
So there's my list and then I can grab all of this stuff here bump up about My gosh, it's not scrolling the way I want it to all right, doing it manually. Great cut then we can now define that here great that looks good then filterlist or dishlist, so we say dishlist equal useDishStore like that.

[00:03:06]
Although I realize the dishstore should actually be dishstore first, and we'll use that. And then we'll say DishStore dot list, just for like helping things clean up a little bit there we go. On this list that filter does not exist on property ref dish there's a duplicate reference that's why dish, dish dish, dish,and then dishlist that's fine.

[00:03:30]
The only thing though that's kind of interesting is that it is saying that dish does not match dish, this is an interesting overload okay, why is it yelling at me well that makes sense. I never actually defined the state shape I defined it up here did not use it so now that I've saved it, now this error goes away.

[00:03:53]
Again so what's nice is that as you sprinkle in TypeScript it shows you the errors that makes sense as you go, right? And so as we can see here it's not overly intrusive and it's overall throughout the switcher, you've seen a multi line multiple times catch me. In an area where I might have just moved on and just be like, hey, something's funky here, you might have left something off.

[00:04:11]
And that is really valuable for us as developers so let's keep going number of dishes. We're going to keep this the same because as I mentioned earlier, this is actually contingent on the filter text that's happening. And so we're gonna leave that alone we're not gonna worry about that.

[00:04:26]
But all this stuff, these are actions that we can take so let's actually yes, I can take this, so these actions are gonna get defined here. Actions, boom and then we'll take that and then once again actions should be just like normal functions not arrow functions. Because we're gonna need to access the entire store, and then from here we can basically say state dot this dot list dot push dot payload, lists dot push, that's good.

[00:05:01]
That's not necessary right now then we can say, this dot list is equal to this dot list dot filter that filters everything, they'll go ahead and filter everything. So now when we come to refactor this, we still need this hideform functionality, so it's for that reason that we'll go ahead and just do dishStore.addDish will be dropping the payload.

[00:05:25]
However, for deleteDish, this is basically identical so really we don't need to actually even create a function here. What we can do is inside of word delete dish exists we'll just call it dishstore dot deletedish. And one of the things I really liked about this sort of modular declaration of store because some people will be like, well, I wanna destructure it and I wanna like make it trimmer.

[00:05:50]
But think about it, the fact that immediately on line 31 this is coming from a global store that is incredibly valuable. I think for debugging, especially as we know, as code bases get more complex, the likelihood for name clashing and that kind of stuff happens. So to me, just being a little bit more declarative but knowing instantly what it is, comprehension is huge when it comes to code maintainability, so personally, I'm huge fan of this.

[00:06:13]
Okay, that's that, that's that, that's that I think that's it so now we have everything in here dishlists yeah, dishStore this is great.