Using The Svelte Context API With Stores

hey friends in this one we're going to learn how you can use context with stores in swell and I see this also often asked by people they're confused why would I use for example stores with context can't they just use stores right they seem to do the same thing so you're going to see how they're similar but very different and what they're used for if you're not that confident in what the swelled context API is or sales stores are I have an entire video on managing state in sweld you should check out and in the post I'm also going to link to the swell tutorial alright so here I have some simple components I have a grandparent component a parent component and a child component this could be anything you want this can be a list box with items right this can be a map component that has child map marker components for example so now we get into this weird situation where you have to pass a reference to something right where you have to pass some value and then for example in this component grandparent I just have a simple component count and I'm just using the mouse wheel to change the count value so if I go here and scroll up I'm going to increment the number up and if I scroll down I'm going to to decrement the number so let's say that you aren't aware of the context API what would you do for a cell in swelt we can go here and we can define a value here we can say let count and are going to use this to bound the value so we're going to get the value of the count from the grandparent so now we can say count and now you have to pass this component to every component or you have to pass the value to every component right and every component has this prop now which is going to be count so the parent has it and the child also has the same component and now we're just going to Output it so let me just go here I'm going to save everything and now all these values should change anybody thinking okay but this isn't so bad right okay but let's say that you have more components more nesting and even in this simple scenario what if you want to update this value from the child components up now you have to pass some update function or whatever and now each of these child components has to concern itself with this so this is really clumsy right all right so now let's look at the first solution what you might be thinking okay this looks like this is great for stores stores are basically a global logic installed you can store anything inside of there like a team in general a store is used to store some value that unrelated components can use but in this case we have related components where they can still take advantage of stores all right so let's do that inside of source here inside the flip here I have components you can open this let's create a new file I can say store TS and I'm just going to define a store let me just move this over here I can just say const count I can say writeable it is this is going to import the writable from the soil store now we're going to give it the default value and that's it and also let's export it and now you're thinking okay this is now going to be easy we can now remove all of this here means we don't need it let's remove this I'm going to remove bind and now we don't even need this here now we can go to the grandparent and now instead of exporting the prop we can say import count from store because we're importing a store we need to subscribe to it so you can use the dollar sign in soil to do so so this is an auto subscription now I can save this and this should work but the other values aren't going to update so now we can go to the other components and let me just copy this import from here so we're going to go to parent let's replace it with this again we need a dollar sign because we're going to subscribe to it let's go to the child component again let's replace this and let's try if this works and awesome now they all share the same count and if I go back to our page anyway we're taking all right everything looks great it's five minutes before you're done with work time to push it up and enjoy your weekend but then your boss comes and say okay this looks really great and he copies another component and let me just zoom out and then he says oh this looks really impressive and then he starts using it all dear Lord okay so this is a problem you're using a store and the store has a shared value right okay now you're screwed but don't worry this is why the context API exists so instead of using the store I'm just going to close the stores it's not going to use it now you can go inside your grandparate component or whatever and now instead of using a store directly we can use set context and now we're going to set a context which is going to be count and you can even give it a value right and this context is only going to be available to the parent and his descendants or children right now let me just say here let's count zero so we're going to Define it here and now we're going to pass count and also don't forget to import this set context from Salt and now you're going to see I'm going to remove this since it's not the store anymore just so it's clear what's going on so now we have set context if I go to the parent now we can retrieve the value we can say count get context and it should be importing from say let's see get context yep they sit now let's remove it so now remember we named it count we're going to replace it here and now I'm going to do this entire thing for the child component awesome so we can now also remove it here and you are thinking okay this is going to work but it's not going to work you're just going to update for the grandparent if you look at here and this is because context isn't reactive so this is where stores again come in handy so if we go again to the grandparent component so now again we can use the writable so instead of defining a value here as is we can use the writable store which I import from soil store so let's just move this over here and now I'm going to set the default value and again since we're using a store we're going to subscribe to all of the values save this I'm going to do the same in the parent since this is a store so now we get a store and don't worry about the errors here this is because of typescript I'm also going to show you in a second how to type that so now you're going to subscribe to this let me also save this and now let's try it out and how awesome is this now all of these components have their own separate State and this is what the context API is great for alright but for the last part let's make it a bit nicer so I'm going to go here I'm going to cut all of this out I'm going to go to the sidebar lib components I'm going to create context just so it's a bit nicer we can do it like this I'm going to create a function let's export function set count and I'm going to have another function export function get count and this is just going to be a way nicer method using the context API and it's going to be easier to type so inside of here I'm just going to open this and I'm just going to set the context here nothing special and for the get count I'm just going to return get context and rename the context count but you're going to notice a problem in a second which I've done on purpose so let me just save this you know we're thinking this is going to work I'm going to say import we're going to set the context actually set count and we're also going to get the count from context so now we're going to say set count and now in the next line we're going to say const count and we're going to get the count all right and it's complaining because of the types are missing so now in these other components instead of doing this we can just say get count now you can remove the one from swelt and let's also go to the child component we can say get count anyway thinking this is going to work but we're going to get the same problem we had when we use the regular store and why is that well if we go to the context file since this is basically a module when you create a new instance of your component see this is in this scope of the module it's just going to use the same value right so what's the solution it's really simple just move it inside set count all right so now let's try it out we can increase or decrease and we can also do it for the other components and they don't share State anymore and how awesome is these friends and I'm also going to show you quickly the types so here you can create a separate type if you want this is going to say number and for the get context this is going to take a generic it's going to be a writable so we're going to say writable is going to import it as a type from cell store and now this since this is also a generic we can pass it what the value is number and if you have a problem with types you can always say restart language server so give it a second and you should see it now knows what the type is so it stops complaining and now everything works great and you have a tidy and neat API for your friends so I really hope this helped you understand when you would use stores and when you would use the context API a store is really great if you have some data which unrelated components use but in this case if you need some data that's specifically tied to some components any descendants you can use the context API from cell and if you need reactive values inside then you can also pass it a store and this is only going to apply to that component and its descendants and I also want to make it clear that this API is specific to swelt and not to swelkit but swelkit also takes advantage of the context API on the server and that's how it implements stores alright so don't forget to like And subscribe and if you want to support me you can become a patreon and also don't forget to join the Discord thank you for watching and catch you in the next one peace foreign [Music]

Channel: Joy of Code

Views: 3,843

Keywords: svelte, sveltekit, context api, stores

Id: dp-7NvLDrK4

Length: 10min 17sec (617 seconds)

Published: Fri Jun 02 2023