Overview of State Management

[00:00:00]
>> With that, we'll dive into the first part of the course, which is the introduction to Vuex. And before that, I think it's useful to talk about what state management is as well. And so, we'll start with the principles of state management. So, when we talk about state management, it's really important for us to start by talking about state, and what exactly state is.

[00:00:20]
So in the context of an application, state is a condition of an object that's stored as data. So, this is sort of an, seems very arbitrary, but we'll use a metaphor to explain what exactly I mean, and with that, it might make a bit more sense and you might get clarity in that way.

[00:00:37]
So, let's imagine a vending machine, which is just a machine that has snacks in it, generally it takes money, and so on. And so there are various ways in which you can interact with a vending machine. You can get items from a vending machine, let's assume you put coins in it and you get something out.

[00:00:55]
So, that's sort of an action and a transaction that happens. And then you can do it however many times, you could do it a hundred times, whatever. However many items that are in the vending machine, you could do it for. But obviously, there comes a point where the vending machine becomes empty, because you can't infinitely take items from it.

[00:01:12]
There's a point in time where it needs to be restocked. So, you have this concept of stocking items in a vending machine. So not only are you taking items away, but there's the possibility of adding to the vending machine. Obviously, there are permissions associated with it. But for demonstration purposes, we wanna look at the actions and transactions that can happen within the context of a vending machine.

[00:01:34]
And so, let's look at the flow of how actions happen and how state changes within this particular case. So let's assume there's a bag of cookies and you want that bag of cookies. In order for you to do that, you would basically be like, hey, I want a bag of cookies.

[00:01:51]
And the cookies, to some extent will emit an event to check the inventory, because it needs to check whether there are cookies to give you. And then the inventory will then allow you to get it, so you'll emit over to the vending machine being like, yes, give this person the cookies they want and then all is well.

[00:02:09]
And of course the vending machine also has the ability to emit to the supplier information with regards to the transaction. So sometimes suppliers and vending machine owners might wanna know how many items are being retrieved, when they're retrieved, and at what frequency for example. So, when that transaction happens, they might wanna know about it.

[00:02:30]
So you can sort of emit various levels of that transaction, you can emit it down to like just the vending machine and giving the item. Or you can go further to emitting it all the way to the supplier, so they know that the transaction happens. And of course there's a flow upwards to some extent which is that stocking or updating the inventory of the vending machine itself.

[00:02:50]
So for instance, if we look at supplier, the supplier is able to change inventory. Because ultimately the supplier is sort of the owner of that particular thing, and so can determine whether or not an item should be restocked or not. And so it passes props essentially up to the inventory, so it can add things to it, it can remove whatever it needs to do.

[00:03:14]
But essentially inventory has to listen to the supplier in order to know what it is. And similarly within the vending machine itself, it has this concept of states, and inventories of child of a vending machine because inventories within vending machine. And so vending machine basically can determine how many how much inventory is within it.

[00:03:35]
So it's pro similar to supplier to some extent. Again, it's a pretty contrived example, but you get the point, which is this flow of events from one to another. And so essentially in view, there's a way of passing state. And I did mention it a little bit earlier, but here's more concretely, the way that you pass the state is through props and events.

[00:03:55]
Props are attributes that you can register on to a component. Generally it follows a parent child relationship. So the parent passes attributes or properties down to the child and so on, so it follows a very specific hierarchy. And that's generally how state is passed. Events are used for communicating between components.

[00:04:19]
So compared to props which are parent child, it has to be the parent that passes things to the child. In the event of events, events like children, are able to tell parents when things happen to them. So for example, if someone is requesting a bag of cookies, that's a child, and then it can tell the vending machine parent that hey, someone's requesting this item.

[00:04:41]
So that's how events are propagated up, you might have heard that term. And so within Vue, that's how state is passed and how state is communicated throughout the application itself. And so, if you are a visual person, which I am, you might want to see how that looks like in terms of a hierarchy.

[00:05:00]
So let's look at, I'm gonna go all the way to the top. So let's assume there's like a corporation of vending machines. And they're basically sort of the supplier, and they own multiple vending machines, and each vending machine has various inventory of stock within it. So you have this multi-tier, and then all the way at the bottom is the consumer, the person who puts money into the vending machine or requests the item.

[00:05:23]
If the person is requesting an item, they are putting money into it. And the supplier might want to know who, at what time, requested what item. And so the way you could do this, is that the child, or the child is essentially the user because they're the lowest level at which the state is propagated.

[00:05:42]
And so when you put money into it, the specific item has been requested. So it knows, hey, this person wanted a bag of cookies or a bag of chips in this case in this particular time, and then the parents vending machine is notified that there's one item being removed.

[00:05:58]
And then the parent vending machine might then tell the supplier, and so there's this concept of events being passed up the chain to the parent. And then of course, you have the concept of passing it down. So props can be passed down to the child element. And so, the supplier can pass the specific inventory down to the vending machine.

[00:06:19]
Let's say, there are chips in the vending machine, the supplier can determine how much chips is in the vending machine if they stocked it. So if there are currently 10, the supplier can be like, they're now, is 40 because I say they're 40, and that is how props are passed on.

[00:06:35]
It's essentially from parent to child, so that's a specific type of relationship that in which state is passed. Of course, those two items of getting and adding are very limited, and they're not the only things that you can do in the context of a vending machine. So let's assume this vending machines can break.

[00:06:54]
Well, we don't have to assume, that happens. And someone needs to come and fix it, because if a vending machine is broken, you can't get or add item to it anymore, because it no longer functions as a vending machine. And so now there's this concept of multiple events.

[00:07:09]
So let's say someone kicked it. Ann is also wanting to add, get something from it at the same time. There's an event being propagated up, and in this particular case, there's a repair event and a restock event. Because that particular item is one, maybe not in stock, and two, the vending machine itself might need to be repaired.

[00:07:29]
So there's various pieces of things that are happening within the application. So not just one thing, but there's two pieces of state that's changing. And of course, things can add up. So there's various parts of the app that can change. So, not only are you repairing and restocking, or fixing and changing, all of these can change.

[00:07:48]
And so, that becomes really complex the larger your application is, and so, there needs to be a separation of concerns. And by separation of concerns, I mean that every individual entity should have ownership of its own state. So for example, vending machines should have knowledge only of itself, like am I fixed?

[00:08:10]
Am I in good condition? When was I last stocked? And so on. And then you might wanna have a concept of inventory which is sort of separate but related to vending machine. An inventory itself is just, how many items are within the thing, is this item expired or whatever that, maybe.

[00:08:29]
And then, there's also the concept of supply. The supplier might want to manage the personnel and the people who are going to fix and restock and so on. And so there's various pieces of the app that you might want to extrapolate. Because in the previous example, we had everything sort of related together, and things can get really nested and complicated really quickly.

[00:08:51]
And so the separation of concerns is sort of where state management comes in. It's this concept of centralized state.