Vuex for Intermediate Vue 2 Developers Normalizing State

[00:00:00]
>> So the question that was asked was about normalizing state. And we'll look at an example of state and why normalizing state makes sense. So here is a instance of, let's assume this is a state object. So I have a state object of, well, a state array. So I have vending machines in the array.

[00:00:19] And then each vending machine has various properties to it. So it has an ID, it has a name, it might have a location because you might wanna know where it is. It might have an inventory because you wanna know what's in it and so on. And so, as I've annotated, there is location information, there's inventory information and there's machine information.

[00:00:38] And so it's frustrating because it's very deeply nested. It's fine for a very simplistic application. But it's annoying because now if I wanted to access certain properties, I need to essentially filter or map through the entire object in order to get specific things. Here's an example. Let's say that there's a location called Lake View, which is a neighborhood in Chicago.

[00:01:03] And in this particular data set Lake View is spelt Lake-View. But let's say I wanted to rename that specific location right? If I wanted to rename it, I'm going to have to map over the entire vending machine array. Find that specific location and then update it appropriately. So as you can tell, it starts to get really hairy because the location is technically not related to the machine.

[00:01:31] The machine doesn't have to know location specific information. It just needs to know where it is. And so having things nested this way gets really difficult to deal with because you end up having to map, having to filter and do extra things regarding it. So the case for normalization is that data is duplicated and leaves room for error because sometimes you might wanna update location, but then another record doesn't get updated because you missed it or the code messed it up or something.

[00:02:01] So data is also deeply nested and makes it hard to update. Updates to nested data lead to complete re-renders. So if you're going through the entire array updating one attribute that doesn't actually change the render view, it could cause unnecessary re-renders if you're not doing things carefully, so it leaves a lot of room for user error.

[00:02:20] So a better way of doing things, and this is sort of very similar to how I believe redux has a very similar concept. Where they introduced this idea of normalizing state. Normalizing state is sort of removing the nestedness of data. So you're trying to take away the different pieces that can cause errors.

[00:02:39] So let's say we're gona look at inventory and machines, let's say. So I have machines, every machine has an ID and a name and then it has inventory associated. And then I also have this concept of inventory, which has ID and names and so on. So you can start to see that here, instead of having the name of the item, I'm having the actual unique identifier that has extra information of the inventory.

[00:03:06] So that means that when inventory1 gets changed, like I changed this specific item, I don't have to go through every single machine to update it. It just automatically is referencing this, and the name will be called anytime it wants to grab the name, it knows that it's been updated because it's just a single record.

[00:03:25] If you're familiar with databases and how they work, this is exactly how that is. And so that's a really useful, just a high level explanation of understanding why this is useful. It's just a really great way of not only like normalizing data, preventing the deeply nested state, but also like another way of doing it is sort of showing relationships.

[00:03:48] So this is a many to many relationship so it can be a bit confusing, but it's this idea of, let's say I have inventory1 and inventory1 is chips, chips is in machine1 and machine2. And similarly inventory2, which is chips of cookies, is in only machine1 and so on.

[00:04:09] So I can see relationships, in this case it's a many to many. So many machines have many inventory and many inventory have many machines, just from a really high level. And to do that, I'm not gonna go into this because I'll definitely go over time. Vuex ORM is a really great tool that you can use, it allows you to normalize state really easily.

[00:04:30] There's plugins on top of your Vuex ORM that allow you to use Axios with Vuex ORM. So you can do a fetch of an API and then put it into models. So you can query and access data really easily without it being nested.