Redux Tutorial (with Redux Toolkit)

hey gang and welcome to this tutorial about redux using redux toolkit now for this tutorial i've brought in anthony stiller to teach you and he's a great instructor he's got a whole bunch of really good react-based tutorials on his youtube channel so definitely check it out and subscribe to it if you want to see more of his stuff the link is going to be down below anyway without further ado i'm going to pass you over to anthony so we can teach you all about how to use redux with redux toolkit hey everyone and welcome to this crash course on redux toolkit in this video i'm going to be showing you guys how redux toolkit works i'm going to explain what it is how to set it up and why you should be using it in your modern react applications i'm going to assume you have some familiarity with react if you don't feel free to check out my learn react series on youtube as well but yeah if you find value in this video don't forget to subscribe to net ninja and make sure you hit that like button and leave a comment on what video he should do next so without further ado let's jump straight into it first of all let's understand what react toolkit is and what it aims to do and how state management outside of the react ecosystem works as a whole if you had a counter component for example and you chose to specifically split up your application into two different components the first one being the component that increments and decrements so it has the increment and decrement button and second of all the component that displays the count it might get a bit tricky in this component the green component over here you might have your react u state where you would keep track of the component state and the counter so for example if you increment the count at zero um you know the state of that count would be specifically in this component now if you wanted to display that count in a separate component however that was living in a separate file um that was also being rendered by your top level app component which is here in black how would you get the state of that component in the counter that count variable into another component and this is one of the typical dilemmas that a lot of react developers faced before there was really a good state management option out there and we got introduced to something called redux you can think of redux as something that lives external to any react component that you can store variables inside of so for example we would have a separate state over here where we can keep our count variable so let's go ahead and make that a tiny bit smaller it would keep track of the variable uh count and any other variable that you would want and then when you hit the increment button instead of incrementing a state variable inside of this counter component you would instead call a function in what is known as a reducer that would actually increment or decrement the count based on what you want and then to display the count over here all you would have to do would be to read from this redux store so in essence all redux is and any state management library like react context or mobx is an external place to store state where any component in your application can access it without having to pass in variables from component to component to component and it's really useful especially when you get to a lot more complex use cases and complex react applications now for this video what we're going to be doing is we're going to be transitioning this basic counter that i've created on code sandbox.io which is a great place to write basic react code just to get the hang of something and the link to this will be in the description of this video and what we're going to do is we're going to take this counter from being just a basic counter that uses react use state and we're going to transition it to be a counter that uses redux toolkit so the first thing we're going to do is we're going to go ahead and create a redux folder over here now we're going to be following the quick start video of the quick start tutorial on the redux toolkit documentation and i'm going to walk you through what each step of this documentation is telling you to do and how it sort of all works so the first thing we're going to have to do is install redux toolkit and react redux if you haven't already if you're using um if you're following along on vs code or anything else an ide on your computer all you have to do is open up terminal go into the package um the directory with the packages and mpmi redux js toolkit and also you're going to need the regular react redux library in there as well so i already have those installed if you're following along on cold sandbox all you have to do is click add dependency type in the dependency you want to install for example react redux and just go ahead and click it and it'll automatically install it now the way this is going to work is in every even with regular redux as well as redux toolkit the first thing we have to do is create a store and this store is sort of going to be we're not going to be touching it very often once it's created it's sort of like an initial setup for redux toolkit but it essentially is going to be the thing that we create that we pass in to our top level component which is index.js to give every component under it access to any variable stored in redux so the first thing we're going to do once we oops once we have our folder over here we're going to go ahead we're going to create a new file and we're going to call this file configure store configure store.js just like that and if you want we can even call it just store.js to make it a bit more simpler and keep it in line with the documentation and the first thing we're going to do is we're going to import a function called configure store from the react toolkit library and we're going to just go ahead and set it up just like that we're going to export it as default and we're going to call it and pass in an object and that object is just going to have one key which is the reducers and right now that's going to be empty now in redux for example in our example we're only going to have one sort of store that's going to be the store that holds the count but as your application gets bigger you might have separate stores for separate things for example if i'm making a website that is able to check people out i might have one store where i keep the user information i might have another store where i keep the items and the prices of all those items in their cart and i have i might have another store that keeps all the possible items that that person could have um when looking and browsing our website like for example if it was amazon one store for all the items you know that would be recommended to that user for example so this is where we would put all those different reducers that we have and don't worry about about it for now we don't have any reducers we're going to get to that in just a second but after we do this the second thing we're going to do that is still part of setup is we're going to go to our index.js and we're going to pass in a provider component that will take in that store and we need to make sure it is above the app level so that every child of um that provider inside of our app gets access to any variable in that store so what we're going to do is we're going to go ahead and import the store we created and we're going to import the code the provider component from react redux and then we're simply going to go ahead and make it a parent of our application like i said don't worry if this is a bit um overwhelming right now this stuff is all still just set up for uh the actual redux code and you only have to really do this once um for it to fully work oh and we have to make sure we edit the path to be slash redux um instead of slash app so we get to the right path to import our store so there we go the setup for our redux toolkit is pretty much already done and it wasn't that bad now we can get into actually creating the um reducer that we are going to be using to increment our state and read from in order to get the variable um count so you can see here there's a bit of things you can do here and in their example the way they are doing it is they're going ahead and they are um defining a lot of different things in this create slice and they're doing things in something known as a slice so first of all let's go ahead and copy all this code over and go through it one by one go ahead and create a counter.js file and paste all that code that we just saw in there now in order to understand what is fully happening here we have to understand how redux works under the hood so everything is essentially split up into three things when it comes to redux the first thing is known as the state that is simply where you keep your variables and what you define your variables to be initially so in this case our state comprises of just one variable and that variable is count and that count is going to be equal to zero initially the second things that are in reducers are the actions this is what your react components call when they want something to happen to a variable in the redux state so for example if we have a button that increments the count we're going to have that button when we click it call and increment action and the third thing that we have is the actual reducer that does something based on the action that is called whenever we call that increment action we want it to increment that count variable that we have in our store in our state sorry by one when we call it the decrement function with our react component what we want to happen is that same count to be decremented by one and these are the three major components that goes into redux actions are essentially things that your react components that can call that trigger a reducer to modify the state in some sort of way now that we have that understanding we can go back to the code and sort of see how this what is known as a slice is broken down so a slice is pretty much just a something that comprises of your state your reducers and then your actions in those reducers and redux toolkit does this differently than regular redux if you were using regular redux you would have to just define each one of these separately however with redux toolkits they introduce something called a slice and through this function called createslice you can define your state your reducers and your actions all in one place and in a lot more clean and simpler way which is one of the main reasons i advocate using redux toolkit over redux it just makes for a lot simpler easy to read and cleaner code so we can see here if we go line by line what they've done is they've named their slice to be counter this is just helpful for being able to distinguish different redux stores and different slices between each other the next thing they've gone and done is they've gone ahead and they've defined an initial state and set all the state variables they have with an initial value in this case they're using the value um they're using the name value to keep track of their count we can go ahead and change that to count if you'd like to make it more consistent with what we're actually doing and we can go ahead and change that as we go through the rest of the code now if you the next thing you'll see here is they have an object called reducers and this is essentially going to be where you have everything that touches your state and the actions and the reducers that modify it so they have declared an action called increment in that action what they are doing is they are essentially incrementing the state dot value that variable called value which we can change the count now by one the next thing they're doing is they're doing the same thing but for decrement we can go ahead and change that to count as well now the third thing they're doing the third action they have in their reducer that modifies the state is going to be something called increment by amount and you'll see here this one doesn't just pass state in as a function it also passes in a parameter called action where you can go ahead and pretty much what they've done here is they're saying we want to increment by a specific amount and that amount is going to be passed in by our button we can go ahead and once again change that state.volume to state.count and we're going to go ahead and look at this after we implement the basics um the basic increment and decrement function now the last thing you have to do is export not only your reducer because we have to pass that reducer into our store but you also have to go ahead and export all of these actions so that you can call them in your react application and the way they do that is just by exporting um and they destructure all of these uh actions from the counterslice.actions object so that's pretty good to know if you ever want to get all the actions that comes from one of these slices you just do counter slice dot action if you want to get the reducer you do counter slice dot reducer and that will return the reducer now the next thing they're going to do is they're going to go ahead and add that reducer to their configure store to make sure that it is available to any uh component that wants to use it so the only time you're really going to be touching this file with the beginning application of react uh redux toolkit is essentially whenever you have a new reducer every time you have a new reducer all you have to do is you have to go ahead and import that reducer so i can go ahead and import counter reducer from dot slash counter and then i'm essentially going to give that reducer a name we're going to call it counter and make it equal to the counter reducer and say for example if i had another reducer called the user reducer i could just do something like user is equal to user reducer and import the user reducer from my uh you know user reducer slice so every time you add a new slice or a new reducer all you have to do is make sure you go ahead and add it to the store so that it becomes available to every single component that is in your application now the next thing we can go ahead and do is actually start replacing some of these variables so first of all let's go ahead and instead of reading our state our count from our react.use state let's go ahead and replace that with actually getting the count from our application so in order to do that um sorry from our redux store in order to do that we are going to be using a react hook called use selector and all that's going to do is it's pretty much going to be saying hey i want to read this variable from this reducer so we can go ahead and um say which variable we want so in this case the variable we want from the store is uh whoops let's go back to our counter store is the count variable so i want this count variable so what i'm going to do is i'm going to destructure count from our use selector hook and then in our use selector hook all you have to do is pass in state and take it from that specific reducer that you want it and if you remember the what we call this counter reducer we called it counter so we can just go ahead and say we want it from counter now this is how you destructure it you can also do something like count equals this whole thing and at the end if you want to uh make it a bit easier to read you can just do a counter dot count so we're specifically saying i want to take this variable from our redux state specifically our counter reducer and specifically the count variable that lives in that counter reducer so we can go ahead and save that and over here we are now um displaying the new count so the second thing we're going to do is we're going to replace these buttons instead of calling that state variable we had before it's going to be calling our action that we have in our counter reducer one of these actions so for example what we have to do in order to call a redux action is first we have to use the dispatch hook so we set up the dispatch hook by just typing in use dispatch and now that we have the dispatch hook we can use this dispatch hook to pretty much call any action from any reducer that we want so in this case we're going to be calling a dispatch and we're going to pass in increment and this increment is going to come from our reducer and for the second example for decrement instead of increment we're simply going to be calling decrement and auto import it and here we go now let's make this a bit bigger and if i click increment you can see the state is incrementing and if i hit decrement you can see the state is decrementing so we've officially refactored this into a redux toolkit application so now if you remember we had one more um example over here which was increment by amount so i'm going to go ahead and create another button and that button is going to be called increment by 33 for example and whenever we click this button what we want to happen is we want to be able to increment our count by 33. so we can see here that what is happening is instead of just taking in state like increment and decremented to add it by one or minus it by one it's also taking something in called action and within action action is essentially a variable that redux allows you to pass in that you can give it a payload and that payload will essentially allow you to pass in any value that you want and sort of increment the count by that and that payload you can make it an object or you can make it in a value and in this case they're making it a simple value that when you um pass it in and increments the count by that amount so for example i'm going to go ahead and come over here i'm going to call the um the increment by amount function and in there i can pass in the payload and i'm going to pass in 33 as the payload so i'm going to go ahead and click save and you'll see here i'll refresh it when i click it it increments our count by 33 as much as we want but that is pretty much how redux toolkit works and if you found value in this video make sure you hit that like button leave a comment for net ninja and make sure you subscribe to his channel and if you really want you can go ahead and subscribe to my channel as well i'm going to be putting out a lot more react redux content i also have a huge series on material ui which is a ui library for react so please consider checking me out if you like this tutorial i hope you're all having an amazing day and i hope you all stay safe and i'll see you guys in the next video you

Channel: The Net Ninja

Views: 65,474

Rating: 4.9330478 out of 5

Keywords: redux, redux tutorial, redux toolkit, redux toolkit tutorial, redux vs redux toolkit, redux crash course, tutorial, crash course, react, react tutorial, react redux, react redux tutorial, what is redux, react state management, why use redux, redux state management

Id: iBUJVy8phqw

Length: 19min 28sec (1168 seconds)

Published: Tue Feb 23 2021