like we have here. And also when you're passing state down from a parent to a child, you might have several props like we do here. So in cases like these, it might be better to make use of a global store instead. So with a global store, you can put any state that you want to be global in there. And then any component in the component tree can either read or write to it. And if any of the global state is updated, the component will be re-rendered and show the correct data. So let's refactor our code to make use of global writable stores in Svelte. So let's make a new folder here or a new file called stores. And I'll name our store todoStore.js. And in this case, it's just a JavaScript file. Let's add an import for our global store. It's called writable from Svelte store. Okay, and now we can define the state that we want to be global. So in our case, we want the to-dos array to be global. So let's say export const to-dos = writable. And then we can provide

store. Okay, and now we can define the state that we want to be global. So in our case, we want the to-dos array to be global. So let's say export const to-dos = writable(). And then we can provide a default value as a parameter. So let's grab the default to-dos we have from Apps.svelte and paste it into here. So it's this array here. Let's paste that in here. And let's go ahead and save that. Let me just update one of these to-dos. So we're not confused with the one in Apps.svelte. So let me just add a few T's here. And let's see how we can read these global to-dos. So let's go to our to-do list. And let's import our to-dos from our to-do store somewhere up here. Let's go up here. Let's put it right here for now. Actually, we have to import it first. So let me actually move this up as well. Let's put the import right here. So import { to-dos } from './stores/to-do store'; And in order to read our global to-dos, we can make use of the subscribe method.

as well. Let's put the import right here. So import to-dos. It's from our stores folder. And it's called to-doStore. And in order to read our global to-dos, we can make use of the subscribe method. So let's do that. So think of it like subscribing to updates. So whenever something changes, you want to be notified. And you're going to want this component to re-render with the correct data. So let's do that. Let's say to-dos.subscribe. And this takes a callback with the value we want to subscribe to. And then we have to assign a variable to it. So let's make a variable named to-dosValue equals value. So let's go ahead and define that variable. So let to-dosValue. And that should be fine for now. Let's save that. So after we subscribe here, the to-dosValue should be the value of the global to-dos. So let's make sure that's correct. So when we're looping over the to-dos, instead of looping over our filter to-dos, for now, let's just loop over our global to-dos.

value of the global toDos. So let's make sure that's correct. So when we're looping over the toDos, instead of looping over our filter toDos, for now, let's just loop over our global toDos. So there should be toDos value, just so we can see it grabbing from the toDo store. So let's save that. Let's go to our browser. And you can see it is pulling from the global store now. Now usually when you subscribe to something, you want to make sure that you unsubscribe as well. So in our case, whenever this component is destroyed, we want to make sure to clean up any resources and unsubscribe. So the subscribe method actually returns an unsubscribe method that we can make use of. So let's say const unsubscribe equals this. And let's make sure I spell that correctly. And then we can make use of the onDestroy hook. So onDestroy, to import that, we want to make sure to unsubscribe. So let's just call that. So whenever this component unmounts, it will unsubscribe and

the equivalent of subscribing and unsubscribing to global stores. So let's save that, make sure it still works. And it looks like it does. So now that we have a global store in place, let's update some of our code. So let me just grab this import. Let's start from our App.svelte. And we can get rid of this, but I'll keep it here for now. Let's go to our conditional where we're checking if we have at least one to-do. So right here, let's go ahead and use $todos instead. So we're pulling from the global store. And let's make sure to import that as well. And it looks like we do have conflicts because the name is the same. So I guess we'll remove this $todos for now. So let's just comment it out for now. Now, if you take a look at our to-do list here, for our props, we have these reactor properties for filterTodos and remainingTodos. And previously, this had to live on this App.svelte component, because it depended on the to-dos. So let's go to that filterTodos. So this

reactor properties for filterToDos and remainingToDos. And previously, this had to live on this App's Svelte component, because it depended on the toDos. So let's go to that filterToDos. So this depends on the current filter and the toDos here. And same for our remainingToDos. So our remainingToDos only depends on the toDos here. So now that this is global, we can either make these global as well, or we can just put them in the components that need them. So in our case, the TodoList component is the only component that needs them. So let's just put it in there. So let's grab these two. We no longer need to pass them as props. So let's get rid of that in here. We're passing the current filter as well. So we'll remove that too. Let's go to our TodoList. We no longer need to accept them as props. Let's go ahead and paste those in. So again, we're reading from the global toDos. So let's make sure this is $toDos. Same with this one here. And these as well. Let's make

accept them as props. Let's go ahead and paste those in. So again, we're reading from the global toDos. So let's make sure this is $toDos. Same with this one here. And these as well. Let's make sure to grab our current filter as well. So currentFilter. Let's grab this. Let's put that into our toDoList as well, because that's the only component that needs it. But if other components need it as well, you're free to put this in the global store if needed. Let's paste the currentFilter up here. And let's make sure to use our filterToDos again for our loop here. So let's put this back to our filterToDos. Okay, hopefully our app is still reading toDos correctly. So let's check that out. And it is, but I forgot to remove the props, or I forgot to save App.svelte. Let's save this as well. So I restarted my server, and now I'm getting this error for addToDos. So now let's take a look at how we can write to global stores. So we have our toDoForm, which takes an input from the user. So let's

restarted my server, and now I'm getting this error for addToDos. So now let's take a look at how we can write to global stores. So we have our to-do form, which takes an input from the user. So let's go to that. And we were making use of events to dispatch this to the parent. And then the parent in App.svelte was calling this addToDo method. Now, since our to-dos are global, we can write to them from any component. So let's take a look at that. First, let's make sure to import the to-dos from the toDoStore. And now instead of dispatching the event, we can write to it directly. So let's get rid of this. So there are two methods we can make use of if we want to write to the store. We can say toDos.set. And you would use this method if you didn't need access to the previous to-dos. So for example, if you just wanted to reset the to-dos to an empty array, that doesn't depend on the previous to-dos. So you can just do something like this. However, if it does depend on the

So for example, if you just wanted to reset the toDos to an empty array, that doesn't depend on the previous toDos. So you can just do something like this. However, if it does depend on the previous toDos, then you want to make use of the update method. So this takes in a callback, so in this case, the previous toDos. And then you can go ahead and update the state however you like. So in our case, let's just grab the logic from the AppSvelte. So we're just making use of array spread here. So let's grab all of this. Let's paste that into here. We have access to the title right within this component. So let's say toDoTitle. The toDoID was state on AppSvelte, but we can move this into this component now since it's the only component that needs it. So let's grab the toDoID from here. Let's put it into our toDoForm as state. And then we can increment that after we add the toDo. So toDoID plus plus. Okay, let's save that.

So let's grab the toDoId from here. Let's put it into our toDoForm as state. And then we can increment that after we add the toDo. So toDoId++. Okay, let's save that. We are no longer dispatching events, so we don't need this toDoForm middle forwarding of events. And we also don't need the one in App.svelte. So let's get rid of that on our toDoForm middle. Don't need to listen for this event anymore. And hopefully I did everything correctly. Let's try it out in our browser here. Let's refresh. Let me just restart the server here. And we're still getting the same error, so let's just remove this method entirely from the parent component. So it was addToDo. We don't need this anymore since all of the work is being done in toDoForm. So let's get rid of this. Save this. So we're getting the same error whenever we reassign toDos. So for now, let's just comment out that code. So anything that we're reassigning,

implicit return here as well. So if you don't want to write return here, we can get rid of these curly braces. This one too down here. And that should do it. Let's try that out as well. Working. And it does. So again, now that we have a global store, we no longer need to pass events around. And we can just update the to-dos directly from any component. So let's go ahead and clean up the rest of the code so we no longer make use of events. Let's start with checkAllToDos. So we'll get rid of this event here. Let's grab the logic for checking all to-dos. So let's just grab this. Let's remove this method. And let's just do it directly within the to-do list. So let's go back to the to-do list. checkAllToDos. We are no longer dispatching events. Let's get rid of this. We can uncomment this. And instead of reassigning it, we can make use of the update method to update our global store. So let's grab this. Let's go ahead and call update instead.

We can uncomment this. And instead of reassigning it, we can make use of the update method to update our global store. So let's grab this. Let's go ahead and call update instead. This requires the to-dos. And from within here, we can paste in that code. So let's paste in that map that updates our to-dos. Let's go ahead and save that. And let's see if our checking all of to-dos works in here. So let's check all. And it does work. Let's do the same for clear completed. So back to our apps felt. Let's grab this logic here. Let's get rid of this method here. Let's get rid of the event listener for clear completed. Let's go to our to-do list. Let's go to that method for clear and completed. So right here, let's paste in that logic. Let's make use of update instead. So to-dos.update. This takes in the to-dos. And we can just do to-dos.filter and close it out here. Okay, let's try that out. Back here. Let's check these two.

make use of update instead. So to-dos.update. This takes in the to-dos. And we can just do to-dos.filter and close it out here. Okay, let's try that out. Back here. Let's check these two. Clear completed. And it does work. Let's do the same for deleting to-dos. So again, back to our app.js. Let's look for deleteToDo here. Or we can get rid of the event here. Let's go to deleteToDo. Let's grab the logic for that. Let's remove the method. Let's go to our toDoList. Let's get rid of this. We can make use of update to-dos.update. Let's paste in the logic. And we don't need this assignment here. And that should do it. Save that. Let's test it out. Let's delete this one. to-dos.filter is not a function. Sorry, I forgot the parameter here for to-dos. Save that. Try again. And it does work. Cool. And let's just finish off these last three events.

keystrokes. So let's start with this one, edit to-do. Let's grab the logic for that. And I believe we also need this as a piece of state. So let's grab that as well. Let's copy that. Let's delete it from here. Go to our to-do list. Let's put it down here. Actually, there's already a method name for that. Let's get rid of this one here. And before we were doing to-dos equals to-dos to force a re-render, we can do something similar with to-dos.update. And we can just say to-dos is to-dos. Okay, let's save that. And let's do the last one as well. So back to app.svelte. Oh yeah, we need doneEdit as well. So let's grab that. Let's grab doneEditKeyDown as well. Let's cut that out. Let's remove the listener for that down here. Okay, let's move that into our to-do list. Let's get rid of this doneEdit here, since I have it in my clipboard. Also this doneEditKeyDown. Let's paste that in. And we can do the same thing here for to-dos equals to-dos.

to me it's much cleaner. Again, we no longer need to listen for all of these events for the to-do list. We can get rid of all of our state here. Actually, there's no more state in the parent component. We have our one global state for our to-do store, which is just the to-dos array. Let me just change this back to the proper spelling. We can read or subscribe to the state in any component. And whenever it updates, that component will update as well. And we can also write to the state, which will trigger re-renders on any components that subscribe to it. So again, our to-do list is where most of our functionality lives. And we have the ability to write to our to-dos whenever we need to. For example, for editing to-dos or deleting to-dos, we are updating the state directly in the global store. And any component that subscribes to these to-dos will be updated as well. So let's go ahead and make a commit here. This is episode seven. Let's say

the state directly in the global store. And any component that subscribes to these to-dos will be updated as well. So let's go ahead and make a commit here. This is episode seven. Let's say global writable stores.