Svelte Store: 3 tips to manage complex Svelte store

hi i'm lihao in this video i'm going to share with you tips and tricks to manage stores complex stores in your spell application i believe a lot of you love to learn about this in fact to prepare the content the material of this video is it's been very difficult not all problems can be solved with one solution right different applications different styles different logics requires different ways or methods to optimize them so i try to look around in the front-end world try to gain get some inspirations from different libraries or different frameworks out there and trying to summarize a few points i would say tips that you can use in your application of course you don't have you you shouldn't apply all this methods blindly to your application optimization is a science you need to first measure before you do anything right you need to know whether there's a problem to be fixed in the first place so over here i have prepared an example and hopefully that is real life enough and under in this example i have two main issues that we are going to solve so let's dive in and take a look at the example that i prepared for you so over here i have an app that is like a to-do list so you can come in and type to do you type a checklist say uh record a video i can click add i can add more uh edit my video and let's say uh publish to youtube and oh what okay so something must be wrong in the logic over here um which we will take a look at what it is but at the same time take a look at here there's a navbar and this is like a notification that shows you what has happened so far and we have my username so when i click i can change my username over here so the house is the best oh no the worst okay uh have fun uh so let's take a look at in terms of code how how what how this works so over here i have a nav bar uh in the nav bar i have a notification component that shows a notification and then i have my username and then i have my profile so this edit profile is a buttons that will pop up and then you make changes so anytime when you make changes you see over here i uh edit the notification so all the changes for example edit profile or add to do i will insert a new entry to the notifications right so that's under notification you can see that there's uh new events coming up right so um all of this the data itself comes from this file called data so everything in this application is controlled from one store one writable store which is in the which is created using a writable so i have a list of to-do's notifications users so users information right so that's roughly about the application itself so add to do it's it's a form that you can add to do and there's a to-do list that shows a list of to-do's okay so if you want to follow along um i am going to share the link of this rebel will be in the description so that you can follow along with with me right so the problem that we face just now right when i type something and type something again uh okay this time now it's it's it seems like it's nothing wrong but somehow the first time when i create some to do is it's like gone immediately so um this is a problem with having a writable stores like this you have a writable stores with a to-do and basically you have you allow people to change the to-do's anywhere right anyone who imports this will be able to change it we change it uh over here in the to-do list where we uh feel where we come over here and we you know mark some to do to be done over h on the other side and add to do's we push into the list um so it's important so anyone who imports this file can change uh the to do's so we kind of have no um no way to enforce like what can be done by to do's right so just previously we we add a few to do's and s it shouldn't be something that is being allowed so let's try to find out the bug over here let's say okay so whenever we want to change the to-do's probably will access to data.to do's right so let's let's let's search for this um there's two okay there's only one place that makes this change access to data to do's okay so let's not change in this file let's try the search over here edit profile a no okay how about nav bar okay we we check if the to-do is length and then oh this will show the to-do slang okay so this is filter this is length okay oh everything looks okay normal how about notifications nothing nothing okay to do list okay you filter the to do um this is showing the count and then we loop through to do uh this is okay we are removing something splice but this is in a delete button so it's supposed to just slice off one item so i don't think that's about it let's let's see data nothing wrong okay nothing nothing's wrong over here shelds so nothing's wrong at here so but then something is wrong right if you if i try to add a gate it's all gone something is wrong but i can't find where it is so if your application application is getting bigger and bigger you have code all over the place and you have a writable that is like this uh that allows you allows you to modify the to do's within that writable object any way you like um then you have a problem right this is not about whether your right your to do's is like you can have a writable that is a array as a to do but if you pass this to do store anywhere anyone can change it anyone can modify it as they want and it's very hard to track that you it's not just searching for to do's to do's can be renamed you can change um assign it to another variable and then do something about it and subscribe to the store and stuff like that you can't really find out where is going wrong so and this is not a new problem when you have a big state this is bound to happen because anyone around every anywhere in your code can change that state in fact a few years ago i think many years ago facebook has come up with a architecture to handle states which is called the flux architecture and pop you can take a look at this the links will be in the description but basically the idea is this you are the way that they want to design is that they want to design a single directional flow of the data right so you have your you have a store and then store changes will go to your view that is okay but then anyone can change the store which is not so okay so we want to draw the boundary we want to create one more abstraction which is called action any time when you want to make changes to a store you should um make an action call an action dispatch an action and then the action itself will modify the store so no one can actually modify a store except actions right and i i believe if you are very familiar with react world this sounds very familiar with you this is actually a one of a very famous implementation of this flux architecture is the redux library right every time when you want to make changes to the store you have to make you have to call you has to dispatch an action an action will change the value of the store and the changes is being made in one uh one unit of code which is in redux is called reducer but it does not have to be a reducer but the logic is there any one uh the only logic to make changes to the store is is contained in one unit and anywhere else in the code if it wants to make changes to the store you will have to dispatch an action and then if you make the action easy enough to be looked for then it's it's easy to to figure out where where where when wrong right so you can trace out where who is dispatching this action and then figure out why is this place dispatching an action right so we can um borrow this idea right um maybe let me come up with another example library that uh maybe some of you all are more uh excited about that which is a state machine library right a state machine is also a states the no one can change the state except uh actions that is being done on onto the machine itself right every time when you make some changes you have to say okay based on this state that i am at right now and these are the actions that i can receive and only when all these actions coming into my ex my state i will derive a new state and then again again again right so no one is modifying the state directly they all make changes through actions and and that is how you can make um make sure like control your data flow from your application you can control who make changes right you by you controlling who making the actions so over here let's let's make a very simple modifications to our code right now right we we want to uh provide some api to make uh changes to the to-do's so that if you want to make changes to to-do's you have to make it this way so i'm going to provide some api for example add to do uh data and this is okay i'm gonna call this okay data right so uh new to do whenever i have a new to-do i need to come over here and update data so data.todos data dot todos new to do right so i'm going to come up with a few methods that that i approve of to make changes to the to the to this to do stores and okay so i'm going to create more of this right and in the meanwhile whoops and in the meanwhile i am what i'm going to do is i'm going to freeze the to do i'm going to freeze it so that this this is just for for demonstration only right i'm gonna freeze the to do such that whenever i make changes i can't right so you you have to call add to do in this case so i'm gonna so this also i'm gonna freeze it every time when i create a new to do so i'm gonna come over here add to do uh this is at the add to do spelt come over here i'm gonna say add to do right this is something new okay and let's see add add to do okay okay this is working okay so we are going to handle the done and delete as well but i think the rough idea is it's clear for you we are going to we we should have methods that um allows us to modify the to-do's directly and then only call this um methods from outside from your view so that you know that uh we have one file that has we have one every functions that modify the state of the store in one place and everyone else just call these functions right so so that you you have a clearer control better control of your stock your states of application of course this is a very simple example um if you have slightly more complex stores more complex logics i would definitely recommend you to look at state management libraries and then see how you can incorporate them uh using stars and in fact i've created some videos um links on the description on say how you can use a state machine library extends as a store or how you can use redux as a store right the ideas are the same you they allows you to have a better control of how your state changes from one to another of course once we done like having our state freeze right now we kind of probably we probably have a better sense of where this comes from right because if i change right now we're gonna change the state a few times you'll see an error and let's just trace where this error comes from okay this is this is bad this is not easy to trace but because i prepared this example i know where it comes from actually coming from here see uh somewhere someone just leave this code maybe because of testing they want to test something on the to-do's it says that if notification length is 3 i'm gonna i'm going to remove everything from the to do's so this is this is the point right you could have code written anywhere like this and it's very it will be very hard for you to trace out where it is so i'm going to remove this and hopefully we fix our issue right when i'm trying to create more uh it's not deleted it's not cleared right now and we've solved this so tip number one is if you want to have a complex store store that has complex logics it's better to use some state management libraries or write out your own reducer kind of thing or state machine kind of thing to manage your store or else it will be a very it will be a huge mess if you allow anyone any components to make changes to the store directly of course some of you may have doubts or concerns uh about using libraries like redux right uh i think that's that this stems from over using redux right not all the states are complex you don't have to use it in every situation but only when cases where the store logic itself is complex then probably you that would the idea the con uh that redux have may be helpful for you right and also one thing that stems from that is a huge source right you typic uh somehow we end up with right having a very huge redux stars in our application as the applications go big and this is something that uh will have effect as well and let's take a look at our example in our example we have a data store that has to do notifications and users which means that anytime when you change something like change a username you have to change the store and change the store which means that the whole store is being invalidated anywhere that is subscribing the store will notif will get notified and then try to see whether they should update their component right to to demonstrate this i write a simple utility over here called mark updated and i applied to all the components over here so uh i have i've applied this mark update for each of the components like the navbar the add to do the to-do lists and and also notifications and edit profile so every time we make changes to the states you'll see that it will turns rates right it will translate every time i add a to do it will turn red on places that has updates meaning places that uh because add to do changes the data right and anywhere that subscribes to the data store get notified and try to update its content and that's where you see the it will turn red outline so uh if as you can see here if i open turn on um profile you'll need you only see that this turns red because uh this this is controlled using a locals states right show so only the local component will get updated and if you come over here you want to update your username so this username we is over here this input we binds this to the data.user.name meaning that anytime we change user name we have to update the data and the whole data will be in will be updated and anywhere the res that subscribes to this data will get updated right so if i type something you see everywhere turns red time again all the places has a red outline so that is bad right if you imagine that you have a lot of components that is uh you have a lot of components then it is just dragging you down and it doesn't have to be this way right so let's try to break this down let's try to make user and a separate store because user itself the logic of user does not got to do anything got to do with the to-do's and notifications you change notifications or to do's independent of your users you don't have to know them together to make changes so i'm gonna take out the users in its own store and come out export constant user equals to this writable and to use it i'm going to come over places that uses the user star um say the edit profile i'm going to import from i'm not sure and i still use the data but i definitely need user i come over here and change it to subscribe to user name okay i still need data okay let's see this should be user name and i think at the nav bar i also need user and change this to user name and let's see what happens so if i turn on and i'll change something only the nav bar is turns red because only you you will because only the navbar component is subscribing to this user store and if you of of course this is uh the the highlighting itself is uh is saying that this component itself will update but of course us by sphere x3 has optimized that the update only happens to the element that uses only the elements that uses the information from user and only when the information has changed only this text element is is going to be re-updated by spells but immediate immediately you can see the changes right you you can see that anytime when you do something um only the you components itself only has exchange so that is tip number two have your store small have a small store only store information that is needed for that store and if you have separate concerns then store it in a separate store so that your component that subscribes to that store only concerns to the data that is needed for that store right now example has seen users you don't need to know about users exchange anywhere else in the component then you can have user separately as a separate store however if unfortunate circumstances that you have you have to have a big complex store for example in this case our to-do list is big and complex you have an array of objects an object can contain a lot of information and if for example in this case in our nav bar take a look at our nav bar whenever we add a to do it will have to be updated because it updates that count right every time we mark something as done it will have to update itself as well so so that is an unfortunate circumstances but there's something else we can do as to help this to alleviate this which is to use a derived store so for example if i come over here i'm gonna import derive while i'm typing let me explain like why this helps all right so over here um our in our comp application over here we are subscribing to the data because we need the data.todo's length we need the length of the to do's with the length of the to-do's that is filtered out for for those that has marked as done and we need the length of notifications but if you are changing the to do right we just changed the to-do anywhere uh we still get notified that the data has has changed and events and when we check the length and fill down everything and check the length it's actually the same number right of course uh sphere will not do any updates to your component over here it will say that oh if it's the same text value it will not update it but then there's still a update cycle happening in your component which means that if you have life cycle events for example if you register before updates or after updates in your component they'll still be triggered and run so what can you do what we can do is we can create derive store derive a new store from the existing data and if the derived store value does not change then there will no there will no there will no uh update cycle happening in your components so gonna create a few star over here because we have uh we have three three different things right first is we have the to do sling derived from data and then data equals to data to do sling we also have a uh let's see notifications so it derives from data but then data notification link and then i have a to do's done link right down the link copy over this and paste it over here so i'm gonna replace them over like this to this length okay this over here to this length over here notifications link over here now okay let's see what what is missing oh okay so then if we come over here and mark the do laundry as done uh it's up it's not supposed to be updated but i'm not sure you can see it clearly so i'm gonna come over mark updated and make every element with some margin uh let's see four pixels pixels of margin right so then let's try this again if i come over and click done you see that this whole nav bar is not ran uh does not go through an update cycle right if i try to add a few to do um kind of here mark is done this does not go through the update cycle because we are not updating to data the the data store we only are subscribing to three stores the to-do link to do stun link and notifications link and when you click on the done button the the length does not change yet so in that sense uh nothing has changed yet uh this the the uh yes they are subscribed to the data and they are updating the store value but then the value is not changed yet so in this component when we are subscribing to these stores we are not getting notified therefore that we are not going through an update cycle uh of course this may be contrived uh i think in some sense it may be over optimizing but of course you have to look at it by case by case basis and in this example definitely is a contract example where we check about the length sometimes we want to know about certain to do item that is whether it is um certain to do in this list so sometimes you have a store that is an array and then you want to check a certain item within that array a certain property of it whether it has changed um yeah things like that right and if you can create a derived store out of it and only subscribe to that derive store then although the derived stall gets will will keep evaluating to get that new value out of it but if the value itself is a primitive and it does not change then the component subscribes to that derived store will not go through an update cycle right so when i say update cycle is a cycle that goes through like checking uh running through before updates update after update lifecycle and also checking through like what other element what are the values uh that any expressions over here and check their values see whether they have changed or not right so it does not go through that um of course um you so you you can also come out uh this i'm not sure whether it rings a bell to you but you can also have your star that is uh immutable based star so i've done a video links in the description as well on how you can make your store to be immutable so an immutable store allows you to know what are the things that will change right so if you have a big complex store that has unfortunate situation you have to have a big complex store immutable store allows you that if you change one place then only part of that store has changed the identity has changed right it changed the reference of the object so the rest of the star you can still subscribe and still does not get notified because that part of store has not changed yet right or you can come up with a proxy based store proxy allows you to change part of the state object and you can subscribe to the part subscribe to part of the state object and get notified only that part of the things that you subscribe has changed right so i've done another video about using valtteo veltil is a proxy based state management library so you can use valtteri to create your store so that only if that part of the states that you're interested has changed you get subscribed uh you get notified and go through the update cycles if only necessary right so that is three tips number three uh have use some immutable store or proxy based store or you can come up with your own derived store that only subscribes to a small part of the store that you are concerning about so that your component does not have to go through update cycles to updates everything when the things that you're concerning is not updating at all it's not updated at all right so i have three tips for you and hopefully that is useful for uh as a serve as a good guide for you to think about how you can manage your store in a small application and how you can optimize your application so which tips do you find the most helpful comments down below to let us know alright so if you like this video give me a thumbs up and remember to subscribe to my channel if you so that you get notified when the next video is out so see ya bye

Channel: lihautan

Views: 4,555

Keywords: svelte store, svelte, svelte tutorial, svelte for beginners, svelte tutorial for beginners, managing complex svelte store

Id: qtxG-aoXXCM

Length: 32min 11sec (1931 seconds)

Published: Tue Mar 23 2021