Is Redux DEAD? Try Zustand! | ReactJS State Management in 2021

it gives you the same exact thing without the song and dance of having a reducer and action and dispatchers it's immediately global there's no need for providers right you compare this to the amount of boilerplate and setup that you have to do for redux as i manipulate the state you can see on the right [Music] hey how's it going today we're going to talk about zest end it's probably one of the simpler most straightforward state management solutions in react i'm sure you've probably heard of the used state and they used reducer hook and even redux maybe you've heard of recoil and stuff like that a lot of those things are good solutions as well but just dance specifically stands out as one of the simpler solutions that you can just get up and running with and i find it to be very intuitive very easy to use so with that said let's just jump right in instead of me talking about what it is i'm just going to show you how to use it and i think you'll just find it very intuitive i already have an existing basic skeleton app here from create react app and i'm just going to do that installation i'm also just going to clean up some of this starter code we don't really need this and to get started we're going to import create from that z stand installation so with that create method you can create a store like so and let's say that our store tracks state regarding puppies you know maybe we have a count of puppies and we want to be able to add a puppy and to do that we simply pass a function here which uses this set method that's being passed in as an argument there all right so what's going on here we've got puppies which is initialized to zero and we've got an ad puppy method which simply just takes the the initial state and then adds plus one to it alright so let's take a look at how we would utilize this in a component we can extract the puppies like so using our use store hook that we just created and within this use store you just pass in a selector function so in this case we're trying to select puppies out of this store so we're gonna do state state dot puppies right and similarly let's get the add puppy method same thing right we're going to pass a selector method which selects state that add puppy then let's see this in action we're going to do let's print out the number of puppies and then let's provide a basic button that allows us to increment the number of puppies so we're just going to pass in our ad puppy method there and we're going to do add puppy let's go ahead and run this application and see how it looks alright so we got our number of puppies and we should be able to add to it as i'm clicking this button pretty basic nothing really complicated about that so you might be wondering at this point all right i didn't really show you anything interesting what is the point of this um and you can also imagine you know you can just use use state right if you've used um react use date so you'd be able to do something like puppies set puppies and then you can do a use state like this right and initialize to zero so that's the same exact thing and you can use set puppies to add to it now what's what's the benefit of z stand in this case well let's let's imagine that our state is a little bit more complex than just a basic property like that let's imagine that it also tracks the number of cats so let's initialize the cat's property to zero all right let's take a look at what we have so i've updated my store to have a cat's property and also pets pets is effectively tracking the combination of these two counts puppies and cats or maybe in the future you could have other types of pets we've got two methods which allows us to increment cats and puppies and at the same time we're also going to be incrementing the the state of the pets so the total number counts and then just so we can see that this is really working in action we also added a method to add to delete puppies back down to zero and then we're gonna see if we're able to still have our pet state be maintained properly all right and then next we simply selected all of those properties that we need to use so we added cats we added puppies we added an ability to add cats and an ability to clear puppies and then we've updated our code here to have uh the cats and the pets count and then a new add cats and a clear pups button alright let's take a look at how this looks so just like before i should be able to add puppies and i can also add pups or i'm sorry i'm not able to add cats so you got five puppies five cats 10 pets total and then if i clear pups i expect that to go back down to five pets total so let's debrief real quick what's so cool about the solution well as you can see anytime you have state that is sort of dependent or requires the value of another state oftentimes that's very useful to do in some kind of reducer or you know maybe you've seen doing that in the use reducer hook or redux in z stand we're able to do that as you can see in such a simple way without any of that complexity of setting up reducers or actions or dispatching or any of that stuff you know in fact to make a kind of quick comparison right let's write the equivalent reducer that we're going to use would use reducer hook to accomplish the same exact thing so let me type that out real quick all right so what i typed out here is just a simple reducer that effectively does the same exact thing as our store over here we have a way to increment puppies we have a way to increment cats and we have a way to clear puppies and we also have an initial state object here which just initializes everything to zero same thing that's happening here now let's take a look at how we use this setup this reducer where the use reducer now in react if you're going to use the use reducer hook you pass in your reducer and then you pass in your initial state and what that brings back to you is the state as well as the dispatch now let's take a look at how we're going to use this same exact thing to accomplish what the what we have over here let's see if we can recreate this guy in fact let's see let's mark this as this stand so we know which one's which and we're going to add use reducer over here this now needs to be state that puppies state that cats and state dot pets okay and then we also need to change our our buttons here so usually the way you do that is you would do a a dispatch and you have to provide a type right so that's the type that we're using in our our reducer up here so for example to increment puppies i need to provide a type of increment puppy puppies okay and then similarly all right so we have the same exact structure down here and before we test this out i actually noticed that i missed a spread of state here and now that we have that let's go ahead and switch back to our browser just to make sure we have the same exact thing right so we can add puppies i can add cats three plus three equals six i can add puppies down here as well and i can add cats and just like how i can clear the pups back down to three three i can clear the pups down here also back down to three three now let's compare sort of what's the difference you know what's the pros and cons well immediately you can notice that with reducers you know the thing i just added is you always have to remember to merge the state by spreading it out like this right in this stand notice that i'm just changing individual properties and i don't need to do any kind of manual merging because this stand by default automatically merges the state so that gives you the ability to change any one of these values individually and it's not going to manipulate or accidentally overwrite the values of the other properties that you didn't touch right so that's one benefit what's another benefit notice that with reducers you know you you have to deal with maintaining action types and on top of that you have this kind of extra abstraction of dispatching right like you can't just create really you can you don't have ready to use methods like we have here in z stand you have to dispatch an action and typically in a in a more uh typical application you and you'll also see this pattern in redux sometimes people would you know put this into an action creator so that maybe you would have something like dispatch you know increment incompetent puppies right or something like that so in this case with the use reducer i definitely can do the same exact thing but there's so many extra layers to it right and and this comparison also applies to to redux because with redux you have the same exact patterns right so hopefully that makes sense to you what uh what the immediate benefit is is that um it gives you the same exact thing without the song and dance of having a reducer in action and dispatchers now there's also an ad an extra benefit to this stand where let's imagine that you need to access your state uh globally you know usually that that comes up in a scenario where maybe you have very heavy component nesting and let's say that there's state at the top of the component tree and then at the very bottom of that component tree the leaves need access to the state right so usually your only options there on a typical react application is either you prop drill you keep passing the props all the way down until it's at the bottom of the tree or what some people like to do is they introduce context where the react also provides a used context and a way to provide that context down the tree but again for you to do that with reducer that means that you're going to be introducing right so here's the documentation for using contacts via the hooks api you need to create the context you need the provider and then you have to do use context in any component that needs to use it now with z stand it's automatically global it doesn't have to do any of that so let's take a look so i'm just going to delete this uh reducer stuff because we don't really need it anymore that was just for demonstration purposes all right so imagine that we're creating a nestable component and to do that i'm just going to create a basic component which is able to render children and then actually i'm going to move this stuff so that we can simulate showing that we can access this state anywhere i'm going to move that in here wrap that in another div and let's move all of our zest and stuff over here and for me to be able to access the store anywhere what i'm gonna do is i am gonna move this store to a a hook i'm just gonna call that use store it probably would have made sense for me to just call this you know use pet store so let's do that and this is also a point to explain i guess is that you can make as many stores as you want you know this doesn't necessarily need to contain all of the information in your entire application you can create individual stores to maintain individual slices of state for your application export default our use store and then in our nested component i can import use pet store and i'm just going to change all of these to be use pet store so how do we use this component well what i wanted to kind of show off here is the ability to use this uh in the nesting way so let's imagine that we pass in a perhaps a level property and we take that level and we just add padding left padding so that we can see the nesting visually you know maybe we do level times 10 pixels all right and then let's import our nested component all right so to see this in action let's go ahead and uh start doing some nestings here right so we're basically going to nest edge the component into itself and we're going to update the levels here so that we can see kind of the same way that it's nesting visually here right it should do the same thing in our browser now i do need to clean up the css a little bit this is just the base css that came with uh create react app i don't want this to be center aligned and also actually i made a a mistake here this should have been um padding left maybe you caught that maybe it didn't but you can kind of see how visually on the browser itself we're seeing the nesting right and why don't we actually let me increase the padding here just so it's a little bit more obvious what happens when i try to manipulate the state notice that i have access to the state at any point in that component tree right any one of these guys is able to manipulate the state any one of these guys is able to access it read that state and there also notice that they're all reacting to the state so something significant to notice here right is that i didn't have to introduce context i didn't have to introduce a provider right as we saw in the example from the documentation kind of like here it just works at any level in the component tree i have access to that state whether it's at the top or at the bottom all you need is basically a reference to the store and your you know your state selections and your state is effectively global without providers so that's pretty cool so to me to kind of summarize what i've gone over so far to me it's pretty significant that a it's so simple to create a store uh there's no you know there's no writing reducers or action creators action types it's immediately global there's no need for providers and in theory you can share your state with other parts of application that is not necessarily using react so i hope you see the benefits here and this is why i'm i'm pretty excited about the solution in the react community because it introduces a completely different way of managing state and on top of that it's just dead simple right you compare this to the amount of boilerplate and setup that you have to do for redux and there's just no comparison now i think more complex applications could definitely benefit from that very structured way of maintaining state that redux provides but if you just have a simple object that you need to maintain and you just need to be make it global to me i wouldn't even use contacts and reducers anymore i would just go to zoo stand and if that ever gets complex you can always switch over to redux when you do get there um and the nice thing with this then is it's just not opinionated about how you do your your state management and and in fact if you do actually like that reducer pattern so i switched the code back to what we had before where we had the the reducer and the store the z stands for side by side so if you really like that reducer pattern you can actually still use that with zisten if you want so for example instead of us doing uh this method here using the set method you can actually replace this with a dispatch and you'll notice that we pass in our our reducer in here and what does that allow us to do well you can still select your your state like this but we're gonna change these guys to be this patch and then what we're actually gonna do is we're gonna take our dispatchers down here i'm gonna move it up here and let's delete this code and i'm also going to leave delete this use reducer right so we effectively kind of just merge the two strategies right and if we go to our browser it should still work you have five those five equals stand clear pups and back to five pets right it works the exact same way so the nice thing with with this and right again is that it's just not opinionated you can do it however you want um you can keep it simple based on i think that one we had originally was much simpler than introducing a reducing a dispatch like this but this gives you a bridge to let's say that you start with this pattern and then one day your state gets complex enough that you're you maybe decide oh i want to switch over to to redux well guess what the reducer that you will have still works will work the same exact way in in redux so there's it's kind of it gives you a bridge to switch over to redux if you really need to or if you're using maybe a use reducer and they use context combo you could eliminate the contacts and just take your reducer put into this stand and you'll have the same exact thing right right in this example you could also you saw we had an initial state object here if you like having it in a separate object you should be able to just spread it out like that and then another thing to mention is that this then actually comes with a couple different middlewares that you that are ready to use so for example a cleaner way to to achieve this rather than trying to create our own dispatcher method here is you can do a redux middleware that they already have from this stand slash middleware and how this works is you just replace this whole thing with your redux middleware and you're passing your reducer and you're passing your initial state and again if we take a look this functions the same exact way right so it cleans it up even more um you can even use redux dev tools if you want you know you can do dev tools another middleware that they have and you can simply just add it to your composition here right we're wrapping uh dev tools with redux and i don't think you necessarily need to do the redux middleware like you can use the usual store and just use the the dev tools against that but what's really cool about this is so then what i can do is on the chrome web store i can install redux dev tools going back to the application and opening that side-by-side with redux tab tools as i manipulate the state you can see on the right you know we're tracking our our actions and then we can see what's going on with the state how it changed what was the action that got dispatched and what's the current view of that state alright so i don't want to make this video any longer it really is that simple and this is if you're a react developer you absolutely should have just stand in your back pocket as one of your tools there's a couple other things in here that are worth mentioning for example you know there's a couple other middleware so for example it comes with a nice persist middleware if you want to save some state in session storage or local storage it's got good support for that it does also have provide a way for you to do selecting an object kind of like if you know how to use map state to props and redux you know they have they have a pattern for that you just got to make sure that you add this shallow check and it also has support for async actions so kind of similar to redux thunks if you're familiar with that now it is worth mentioning that it's not all good things right there's definitely some some cons and one of those i would say is because the stand manages state outside of react what that effectively means is in your in your unit test there's a scenario where if you're not if you don't catch it it will actually share the state between your tests because right if you imagine the uh the zostan state is over here and reacts over here you know as you unit test your react app the state gets shared in all your tests but a good thing is they do have some uh documentation for for how to handle that and the gist of it is basically you gotta mock out the stand in your tests so that um you know you can see that you're able to basically reset the store per test so not a big deal good thing they have it documented all right guys that's really it i hope you found this video useful again something that i think everyone in react should know about if you don't like the zustan approach there's also joe tai that you might want to check out it's actually from the same author that's a different approach that i'll talk about maybe another video comparing that with zestan but to me the stand is a a must-have especially if you're coming from uh the land of redux you absolutely should know that this solution exists anyways guys thanks for watching uh make sure to like subscribe leave a comment give me some feedback a lot of people have been giving me some good comments and i use that to help improve my content anyways if you enjoyed the video maybe i'll see you on the next one thanks [Music] you

Channel: Marius Espejo

Views: 3,195

Rating: 4.9349594 out of 5

Keywords: react redux, zustand, react redux tutorial, react redux tutorial for beginners, react, reactjs tutorial, react js, reactjs projects, redux js tutorial, redux react, redux toolkit, redux zustand, redux vs zustand, usereducer, usestate, javascript, reactjs, redux tutorial, redux, state management, react context, react context api, react context tutorial, context api, react context hooks, react hooks, react hooks tutorial, learn react hooks

Id: UcHkC5sJPWw

Length: 24min 15sec (1455 seconds)

Published: Sun Apr 18 2021