State Management Best Practices

[00:00:00]
>> Ben Hong: As far as some best practice items. So I mentioned before about the whole global stores namespace stores things. One of the things that I think this is an artifact. So I think for most of you, this is at least here, this is not applicable. But like, Eduardo in his course talks about this a lot is that some clients, they got so used to just putting everything in a single state, like a single store, because it was incredibly convenient, right?

[00:00:28]
I need auth everywhere. Might as well just put it in the store and global store, you know, I should track whether or not the cookies are tracked. That's global store. And so, his whole thing, and which I've seen as well, is that don't be afraid to just create like a bunch of small stores.

[00:00:45]
Because it doesn't cost you anything and arguably it makes it easier because you've already modularized these single sources of truth. This is my off store. This is my cookie store. This is my whatever, whatever you want to call it. And then as we saw earlier, actually, I think the magic keys, plus the theme is an example of like, it's so easy to put them together if you're like, there's this like, let's call it on like, you know, the settings page where like the auth and the cookies need to live together.

[00:01:10]
Like, cool, just like grab them, throw them in, no problem. And so if we think, as long as we think more like that about these stories being single sources of truth. Because what's scary is, what a lot of people end up trying to do is they get caught up in storing like auth in multiple places, right?

[00:01:28]
Because they're like, well, I'm updating auth here, and then here is where auth auth updated. And so if they incorrectly cache them and keep them separate source of truth, this is where our issues come in, right? Ultimately, right? That's like a lot of our bugs. And so ensuring that your stores are small helps to ensure that they are a single source of truth, which means ultimately you'll be less bugs over time.

[00:01:51]
And so we've talked about this on different occasions now, but composing stores with other stores is a thing. So, you saw there was a time energy store, there's a tax store. Our exercise later will be to create a weak store. So you all can basically, you're going to convert your composable into like a penny a store and just basically see how you feel about that.

[00:02:10]
And then what's nice is that using other stores within stores is as simple as you would expect, right? So in the event, in my time entry store, I want to use, let's say for whatever reason, I want to collaborate this entry count with my total number of tasks.

[00:02:24]
I could just go import useTaskStore, and then here I would just say, yes, const taskStore = useTaskStore. And then I could say const combine count is computed and it's going to return entry count value plus task store task count. And just like that, you've taken two stores that are seemingly unrelated and then because you've had the logic for it, boom, you've combined them.

[00:03:00]
It pulls the piece you need, it works. And so that was part of Eduardo's thing, is trying to get people to understand that unlike before, it is actually very easy to rip apart stores, piece them together, and then mishmash them in other places as well. If you keep doing that, you'll find yourself with hopefully some pretty elegantly crafted state management solutions for you and your team.

[00:03:29]
Then we walked through the dev tools with Pinia already, so you saw what we could walk through regarding that.