Zustand State Management in React (Better than Redux?)

how beautiful is this site by the way this is really cool i love the look of this it becomes like in and out of focus as you pan left and right so beautiful anyway so in this one we're going to be talking about zestand or zustand or i don't know how you pronounce it but it's a cool library so i was recommended this a while ago and i've been uh trying it out and playing with it and i really actually like it so what this is is a state management library that aims to make state management much simpler compared to things like redux and context in react and it actually i think succeeds in doing so as you can see here in this example they have on their site you just get this zistand library as the create function you create your store and then inside your components you just use this used or hook and then you get whatever you want from that state and then you present it on your component pretty simple so let's actually get going with an example that we can use ourselves and play with it and understand how it works so let's head over to vs code and i've already created this blank react app it's just a app created with create react app and the clean cra template so here we have our objs and we can actually start this so in the terminal let's say npm start and as you can see it's just a clean react app without anything just hello world here so let's create our first store with zerstand first thing is let's actually open another terminal and install the library itself so npm install this stunned and hit enter let that install and i'm going to straight away create another file here called store.js because usually you would keep your store in a different file so that you don't have a lot of code in the same app.js file so first thing let's import system so import from zoostand create and here we can create our store let's see we want to manage a list of people so let's create our store here let's call it store or store so constor equals create and now we pass it the function that creates the store which usually takes a set which we'll see what it does in a second and then it returns the state actually so let's do parentheses and then open an object and this will be our state so here we want to manage people right i'm going to create a list of people so here let's say people and this will just be an array of strings and we'll have our usual uh john doe and jane doe so here john doe and jane doe let's also create a function that adds a person to the list once we need to do that so here let's create another variable inside the state call it add person and this will be a function that takes a person and the way we can modify the state we use this set function and then this takes a callback and a callback will take a state and here we'll return the new state which will be an object and the main difference is that now compared to things like redux and context we don't need to spread the state here we can just edit what we want to edit so here if we say people and then the people will now be so we open an array and then we spread state dot people and then we do comma and we add this person that we got passed to this function we save as you can see this will now edit just people and will not edit anything else in the state which is another nice simplification that system gives us so now we need to create our use store or actually it's already been created let me rename this so let's name this use store and let's export it so export export default use store and now we can use it in the app jazz by just importing from store use store now the top of our component we can get the list of people by saying const people equals use store and now we pass it a selector so that we can only get the slice that we want and this takes the state and then in the return we say state dot people so now we only get people now to show people actually i'm going to create another component so to show you that we can use it in nested components because here this is the top level component so here under hello world i'm gonna add a component call it people so uppercase p people and here instead of hello world we're just gonna have a paragraph that says people and now let's create in our source directory maybe put this in a components folder because that's what you we usually do so component slash people.js here let's do rfc this will be a regular functional component and now let's bring that use store call cut it and paste it here in people and same goes for the import of the store so paste that here the only difference is the is that now we go one level back and now here where we return our div we can add a paragraph at the top and say we have and then maybe put the number of people so we'll say people.length and we'll say people in our let's just say database because even though it's not actually a database and here let's show a list of people we can do a ul so here inside the unordered list we're gonna loop through people so we'll say people.map and then for each person we're gonna return just an ally with inside of the person itself which will be the name of the person because it's just a string so now let's uh save everything and let's look at our app okay we get people it's not defined because i forgot to import it so here in abjs let's import from component slash people just people like that save and now there we go we get people we have two people in our db and we get john doe and jane doe that's cool so now we're accessing our state from inside of this nested component and as you can see this is different to context in the sense that we need we don't need to wrap uh our top level component with any provider or anything because this doesn't use context in the background it's completely independent from react in fact you can use it with any other library not just with react so let's create another component that lets us interact with our state and add more people in our list so let's create actually i'm going to create another component here call it input and this will be just an input where we can put the name and then add a person so here inside of this div i'm going to put an input type text that's fine let's give it a reference so that we can get the content of it when we need it so we'll say input ref and we're going to create this in a sec and let's add a button here that triggers it so this button will say add person person and it's gonna have an on click so on click let's call this add and let's create both this reference and add actually let's import from react uh use ref so here actually at the top of the component let's create this reference so we'll say const input ref equals use ref and let's create this add function so here we'll say const add equals it's going to be a function that will call the add person function from the store actually let's import that first so here let's import use store from one level back store and now we can get the add person function so say const add person equals use state oops actually not here state use store sorry and this will take the state and then return state dot add person so now in our ad we can simply just say add person and then add the input ref dot current dot value let's save and let's take a look at it so now let's refresh actually i forgot to add this let's add this component to our app.js so maybe duplicate this and ctrl d here and say input and put the input on the people here so input save and now we get our add person input maybe let's put it on top of it so let's put it above above people or maybe actually between people and the list cool yeah like this all right let's check if this is working so let's say i want to add myself in the list add person there we go actually adds it to the list which is adding it to the state and then the other component re-renders because that list has changed cool one other advantage of using system is that we can use some middleware that come baked into the library that allows us to have some extra functionality one cool functionality that we can do is we can enable the redux dev tools to work with z stand so let's do that so let's go back to our store and here we can import from zistend slash middleware and here we can destructure something called devtools dev tools and to get it to work we can simply wrap this uh set callback for the store and with this dev tools so we can say dev tools and then check that inside of it and actually to make this cleaner and more understandable we can simply take this callback that creates the store and put it into a variable called store and now we can simply pass that store to the devtools call inside of the create call actually remove this extra parentheses and then there needs to be an extra pair of parentheses here save and now if we refresh our page and we open our dev tools make sure that you have the redux dev tools installed as a chrome extension let's go here to redux and if we check the state there we go we get people let me zoom in a bit and we get john doe and jane doe and if we add another person here maybe i don't know elon musk to our list add person there we go that person was added and now we have elon musk and we have an action here just like we do when we have a regular redux store and we can play with it with the dev tools i think this is a great advantage because when you use context usually i don't know maybe there's some tool that lets it plug into this but this is just an advantage of using things like redux it makes it easier when you develop but you can do this with zystend as well another cool piece of middleware that comes with this stand is something called persist which does exactly that it allows us to persist our state inside of our client storage so let's say we want to save this state we could actually what we could do here we can change this to let and just reassign our store so here we can say store equals maybe this dev tools store and then again store equals persist and then pass it the store i'm just doing this so that it more it's more readable so now let's pass the store to the create and now if we go back to our app so our list resets actually let's make this erase itself once we add a person and also maybe give this a padding so that it's uh easier to look at so in our objects actually no in the input here after we add a person we can simply just uh reassign this value to an empty string and also in the index css we can just give the body some padding so maybe here padding one rim save and yeah okay that looks better and now if we add a person that should be empty cool that's now empty and now we have three people in the state but if we refreshed our page we still have three people in the state because if you go to application actuaries application that application and you go to local storage you see that we have this state variable inside of our local storage and we're fetching it every time our uploads which is pretty cool the key is called undefined but we can actually give it a name in case we need it from a different source so if we go to store here with the persist call we can give a second argument with some settings and we can give the name config and we can call this let's say usually use local storage to store some user settings so let's call this user settings and now if we remove this and then refresh actually we need to add a person let's add elon musk again add person there we go we get user settings as that key usually you don't store actual data here you store something like user settings like i called it here actually we could do a quick example here so you see our app is in dark mode by default now in react or at least in this template so let's make the user change this setting and have it persist in our app so we can go to the index.css you see the body by default has this background color dark and color white we can make this into a class so cut those and then here say dot dark and paste those in so now the body has to have this class for it to be dark so now if you look now it's a in a light theme but if we add that class so let's say let's go to body and here in classes add dark it switches now to dark theme so now we can let the user change this in the app so we could actually add it first to our state so here in our state we could add maybe call it just dark and then by default it's false and also add a function that allows us to edit this so here because it's a billion we can just add a function that just toggles it on and off so here we can call this toggle dark mode and this will be a callback that takes nothing and then calls the set function and this takes the state and then returns uh it only adds the dark key so we'll say here dark and then that will equal not dark to just switch it actually here it should trigger not state.doc because dark itself doesn't exist outside of the state so now if we go to our objects we can import the store at the top so let's import use store from store and here we need the toggle dark mode function so we'll say const toggle dark mode equals use store and this will take the state and return state dot toggle dark mode and now we can add a button at the top so button and this will say toggle dark mode and this will have an on click which will just be the toggle dark mode function so now if we save we have this toggle dark mode and actually this will toggle it but it will not actually change the sight so let's change that so let's use use effect here to detect it the first time so we'll say use effect and this will be a callback and actually we need to get the dark key from the state so let's duplicate this and here change this to dark and by the way you have to do this to have these specific selectives that just get a slice of state if you do this let's say you do this and you just destructure toggle dark mode this will work but this is not a good practice because now anytime anything changes in your state this component will re-render but by just having these specific selectors even though it might look like longer syntax this is better practice this component will only re-render if one of these changes all right so here we check for dark we'll say if dark dark then we're gonna say let's just access it directly we'll say document.query selector and we'll access the body and just add this class to it so we'll say body.classlist and we'll say dot add and we add doc let's copy this and we can simply say else then if it doesn't exist then let's remove it and if it doesn't exist then we do remove that's fine it doesn't break or anything and here for the dependencies of this use effect let's add the dark itself so every time it changes we change the ui and add or remove this class so let's save and now if we click on toggle dark mode there we go it's now removed that class and now we are in light mode and of course if we refresh it's still there because it's persisted in our application local storage and by the way now we already uh we also have the people there and what you can do i think uh you can add some settings here you can yeah we have this blacklist key to the persist settings and we can add blacklist and then just blacklist anything that we don't actually want persisted but i don't think that's the best way of going about it i think the best way is that things that you want to be persisted you put them in a store so let's actually do that we can have multiple stores so here maybe this will be just for settings so we'll call this rename this to settings store store and maybe the people and add person will go in a different store so here we'll say let people store equals and we'll take set and then actually return so do parentheses and open curly braces and then paste those back in and now we can say people store equals create dev tools and we pass the people store so we can rename this use store to use settings store and remove this export call and here export this const and duplicate this and call this for use people store and then pass this the people store and now we have two stores so let's save this and of course let's update our imports so here our use store should now destructure use settings store and here this will cause use call use settings store and same goes for inside of the the people component so here this will destructure use settings store and then paste this here and same goes in the input so this will destructure use settings store and paste this here and save and now if we refresh i'm going to delete this from local storage okay we get an error hooks can only be called inside of the body of the function component let's see it's probably from the store yeah okay my bad i called create here and then called it create called create again so this let's remove this call and then just call it here so save and refresh okay we get length of undefined for people inside of the people component let's check oh yeah people now are coming from the use people store so let's say here use people store and save and there we go we get john doe and jane doe and now if we toggle dark mode we get user settings with dark equals true and if we add another person elon musk again add person okay my bad again we get add person is not a function because that now comes from the use people store actually that's inside of the people oh no inside the input so here this uh this needs to be use people store use people store did i misspell that oh here this says peoples that should be just people all right refresh okay i'm still importing it as use people store here okay and let's double check here people store okay now there shouldn't be any errors cool we're in dark mode but if we add a person here they will be added to the state but if we refresh they're not persisted only the actual settings which in this case just dark mode is stored in the actual local storage and if we go to devtool to the redux dev tools we can still see that we have our two stores here so we can say i'll add myself armored add person we can see that there is the um original store which in this case is not showing the state because it's pulling it from the local storage but if we toggle it back and forth we see that the state is shown here and if we go to the second instance it will be the people store but now it's showing only the difference so you have to click state so it shows the full state so we can see both stores here which is pretty cool so as you can see this end already gives us a couple of advantages in it being simple so if you're like new to state management some starting with something like this instead of like context or redux will be much better as a learning curve as you don't have to implement things like reduces and having to manage multiple action types and it reduces like the bowler plate needed to have state management in react but a caveat is i haven't played with it too much so i'm not sure in terms of how it performs when you have like a you have like such a large app with a large state and data coming in and out i don't know how it performs there i'm not sure yet but so far i really like it i'm gonna keep using it for myself projects i actually really like it what about you guys do you actually like this then let me know in the comments if you actually like this library and you're gonna use it or it's just like something that you use just for fun inside projects as per usual the code that i wrote here will be available on github in the code description or not the code description the video description and yeah thanks for watching and i will catch you in the next one cheers

Channel: Classsed

Views: 8,588

Rating: 4.9906979 out of 5

Keywords: zustand tutorial, react zustand tutorial, zustand state management, zustand vs redux

Id: jLcF0Az1nx8

Length: 20min 23sec (1223 seconds)

Published: Fri Mar 19 2021