deep in this example. So we have our main component here, we have our global state for to-dos, we also have this other state for id for to-do, just to increment the id as we add to-dos. And then we have a bunch of methods that update the state. For example, adding to-do, deleting to-dos, completing to-dos, and so on. And we have our child components, which you can see down here. We only have two, ToDoForm, which is basically this input right here. And we're just passing down the addToDo method to it. And the ToDoList takes in all of this state here. And that's the rest of the application here. So that's responsible for listing the to-dos, deleting, checking, and also checking all and the remaining feature. So again, the idea is to move this state over to a global store, and then making sure our components can still access it. So let's do that. So let's take a look at the example here. So this is the global store. It's just a counter, but they're using

store, and then making sure our components can still access it. So let's do that. So let's take a look at the example here. So this is the global store. It's just a counter, but they're using bears as an example. You can see you can put anything you like in here, primitives, objects, or functions. And then the set function merges state. So this is our bearsCount. Actually, before that, the create method is what we make use of. It returns a hook, which is what you need to access the state and other components. For example, in here. So this is our bearsCount. increasedPopulation is a method that increments this count here. And if it depends on other state, in this case, it depends on the bearsCount, then you pass a method here. And we're making use of set, so it merges with the other state. So instead of merging the state yourself, you can just make use of the set method. And if your method doesn't depend on other state, then you can just update the field.

merges with the other state. So instead of merging the state yourself, you can just make use of the set method. And if your method doesn't depend on other state, then you can just update the field directly. So for this case, all it's doing is setting bears to zero. So let's do something similar. Let's grab all of this. Let's make our own global store. Actually, we have to install it first. Forgot to do that. Sorry. And npm install zustand. Okay, let's restart our server. And let's go ahead and grab that example again for our global store. Okay. Let's make a new global store. I'm going to put it within a stores folder. And let's name it todoStore. You can have multiple stores if you like. And it can also be TypeScript if you like. Let's make sure to export this so we can use it in other components. So export default, I'm going to name it useTodoStore. And let's rename this useTodoStore. Okay. So let's go ahead and start replacing this with our todo state.

can use it in other components. So export default, I'm going to name it usedToDoStore. And let's rename this usedToDoStore. Okay. So let's go ahead and start replacing this with our toDoState. So let's leave this in for now. Let's grab our toDo's to start. Actually, that's in app.jsx. So our toDoState is up here. Let's grab the initial state. Okay, let's paste that in here. Instead of bears, we have toDo space tab in. Okay, so that's our first piece of global state. Let's save this. Let's grab the other piece of state. So I believe it was idForToDo. And let's just set it to four by default. Okay. idForToDo and it's four. Okay, so now these two pieces of state should be global. Let's see if we can access it from our toDoList. So our toDoList is responsible for a bunch of things. One of them being just showing the toDo's. So right here, you can see we're mapping over them and showing them here. So initially, we were passing them

list is responsible for a bunch of things. One of them being just showing the to do's. So right here, you can see we're mapping over them and showing them here. So initially, we were passing them down as props from our App.jsx. So down here in our ToDoList, we are passing them down as props right here. But now we can remove this and grab it from the global store. So let's remove this. We can also remove the to do's here, since it's now in the global store. But I'm going to leave it in for now just so the other methods don't give me syntax errors. So let's leave that in. But in our ToDoList, let's see if we can make use of that new to do state in our global store. So we are no longer accepting to do's. So let's remove this. And let's grab it from our to do store. So the syntax is like this. Okay, let's paste it in here. This is our to do's now. We are grabbing it from useToDoStore. Okay, I'm gonna press tab that should import it.

store. So the syntax is like this. Okay, let's paste it in here. This is our toDo's now. We are grabbing it from useToDoStore. Okay, I'm gonna press tab that should import it. And the state is state.toDo's. Okay. Now we can make use of this instead of the props, since we're no longer passing that in and grabbing it from the global state. Okay, actually don't need this index here. So let me just remove that. And if I did that correctly, hopefully the toDo's still show. And they do go. So let's go through our state one by one and move it to the global store. So next, we'll do addToDo's, this actually should not work anymore, does it? Yeah, it doesn't work anymore. Okay. Because we have to move this addToDo method to our global store. So let's do that. So all we're doing here is spreading the toDo's and adding a new one here. So we're basically just pushing to the

have to move this addTodo method to our global store. So let's do that. So all we're doing here is spreading the todos and adding a new one here. So we're basically just pushing to the todos array. And it looks like I'm missing a field here doesn't really matter. But let me just add that. But now we want this in our global store. So we no longer have this setTodos method. But we can update the todos directly. So we can grab this array. Let me save this, let's go into our store. And let's make use of this one here. So it's called addTodo. Let's update this method name. It does take a param. So it takes the todoTitle. So this right here, I named it todo. Let's rename it to todoTitle. So it makes more sense todoTitle. And we are using the set method to update the state. So what state are we updating here, we are updating our todos. So let me just put this on a new line. Preview should actually format this. So let me just update the

method to update the state. So what state are we updating here, we are updating our toDo's. So let me just put this on a new line. Preview should actually format this. So let me just update the toDo's. I'm going to paste in what I copied. Remember, all we're doing is basically pushing to this toDo's array, which I copied. Let me paste that in. Okay. And you can see the red squigglies here. So any other state that we need access to, we can just say state.toDo's. This is now in our global state. So we can say state.idForToDo for toDo. And the toDo is now renamed to toDoTitle. Okay, so that should push to our toDo's state. Is there anything else here? I believe there's something else here. Yeah, we're also updating the ID for toDo. So we can update that piece of state as well. So let's update that as well. After our toDo's, we are updating the ID for toDo as well. And that's going to be state.idForToDo + 1. And we need a

that piece of state as well. So let's update that as well. After our to do's, we are updating the ID for to do as well. And that's going to be state.ID for to do plus one. And we need a comma here. Okay, so addToDo should be in our global store. Now. Let's go ahead and update our to do form here. So down here, we no longer need to pass in that method, since it's now in the global store. So let's remove this. Let's go to our to do form. We no longer need propTypes. So let's remove that. Don't need this. And we just need to grab that from the global store. So let's do what we did in to doList. Let's grab the addToDo function from here. Let's paste that in. Okay, and this is addToDo. This is used to doStore, we have to import that. Okay. And this is state.addToDo. Okay. So now this method is available to us, we can call it down here instead of coming in from the props. And that should work, hopefully.

Okay. And this is state.addToDo. Okay. So now this method is available to us, we can call it down here instead of coming in from the props. And that should work, hopefully. Let's refresh to make sure. Let's see if adding now works adding. And it does. Cool. Let's do one more for the leadToDo. And then I'll just paste the rest in because it's basically the same thing. Again, we have a method for deleting toDo's within this component here. Or within this one, I mean, the leadToDo should be up here somewhere. Right here. All we're doing is updating the toDo's and removing the one that matches this ID. So we just have to update our toDo's with this logic here. So we're just making use of filter. So it takes in an ID as a parameter. So we'll make sure to do that within our toDoStore. So this one is called deleteToDo. Okay, takes in an ID. And we can do the same thing with the set method. So we can say set takes in the

So we'll make sure to do that within our toDoStore. So this one is called deleteToDo. Okay, takes in an id. And we can do the same thing with the set method. So we can say set takes in the state. And within here, we can paste in what we copied. So let me just do this. Let's paste the logic in, there should be state not toDo. And we are updating the toDo state. So toDo's. Okay. And hopefully I did that correctly. Let's save that. Okay, the deleteToDo should now be in globalState that's being made use of in the toDoList. So we can grab it from globalState as well. Let's duplicate this. Let's say deleteToDo that is called state.deleteToDo. Okay, you don't need it from propTypes anymore. So we can remove it from here. Okay. We also don't need to pass it in from our App.jsx. So the deleteToDo we can remove this. Okay, and back to toDoList. Let's make use of it wherever we made use of it here. So should be props.deleteToDo.

need to pass it in from our app JSX. So the lead to do we can remove this. Okay, and back to to do list. Let's make use of it wherever we made use of it here. So should be props.deleteToDo. It's now coming in from global state, we can remove this. And hopefully delete should work. If I did everything correctly. Let me save this. Okay, let's check that out. Let me refresh just in case. And if I try deleting a to do, it does work. Cool. So everything is working. So yeah, I'm gonna go behind the scenes and just convert everything over to our global store should be the same process as the last two methods that I showed you. So just move everything from here, all the methods remaining into our global store into the store, and then update the method that makes use of it in our to do list. So I will be back when that's done. Okay, so I moved everything over to the toDoStore. And our to do list is now making use of the global methods. But I didn't move

makes use of it in our to do list. So I will be back when that's done. Okay, so I moved everything over to the toDoStore. And our to do list is now making use of the global methods. But I didn't move over this remaining method yet. So all of those methods were setting the toDo's. So for example, completeAllToDos was just setting the toDo's to some sort of new state right here. But in our remaining function here, we're not setting anything, we just need the toDo's as a computed value. So in this case, we just want to filter the toDo's by toDo's that are not completed and then just grab the length here. So how do we do that within our toDoStore? So let me actually grab this. And then in our toDoStore, if you remember up here, we have a parameter for setting stuff. There's also one for just getting stuff as well. So we can say set, get. And now we can add that remaining method in here. So after this one, let's say remaining. And that is a method.

stuff. There's also one for just getting stuff as well. So we can say set, get. And now we can add that remaining method in here. So after this one, let's say remaining. And that is a method. And let me just paste in the logic for it. But to grab the to do's, we can say get. And that should do it. And we don't need the semicolon. Let me save that. And hopefully that should work now. So we can remove remaining from here. We actually can remove the entire to do's as well from the main component. So now all we have here is our JSX. Actually, we do need access to the to do's here as well. Let's get rid of useDate up here. Let's grab a import from our to do list and grab the to do's as well for our main component. So we'll grab this. Let's use it here. Okay, let's make sure to import that. Okay, we just move this over. So we don't need this anymore. And did I update the to do list? I don't think I did. Don't need this prop types anymore.

and put it in its own variable, just so it's a bit cleaner. So let's grab this entire call up to the last bracket. Here, I'm going to cut that out. Let's say let store equals that. Okay. And we can say createStore here. This should still work. But now we can wrap it in a devTools call. So let me save this, make sure it still works. And it does. Okay. But now let's wrap it in devTools. Okay. Let's save that. Everything looks like it still works. But now if we open up Redux DevTools, you can make use of the features that it has. So let me just open that up. So I put the app in its initial state, I zoomed out to so you can see everything. But as I add todo here, so I'll say 123, you can see the different actions that were performed here. There's no names because we're not using Redux here. But you can actually rewind in time and see the state changes that

So we'll say store equals devTools, store initially. And then here, we can say store. And this should still work with our Redux DevTools. Let me just make sure let me refresh. Let me open up Redux DevTools again. And let me make sure this still works. Okay, it does. There's the action here. But now for our persist middleware, let's add another one here. So let's just reassign it as store equals persist. We are persisting the store here. And we just have to give it a name. And by default, it makes use of localStorage, which is what we want. So let's just say name toDos. So this will be the key in localStorage. Okay, let me save that. Let's make sure there's nothing in our localStorage. So let's go to application. And this is here from a previous example. So let me delete this. And now if I refresh, you'll see that toDos added here. Let me just add a few. So add a few. You can see it down here. And if you if I refresh,