Learn React #15: Redux Toolkit

hey everyone in today's video i'm going to be going over how to set up a redux toolkit how it differs from the regular redux and we're going to build a very simple application using it now i recently got into redux toolkit because some of you guys suggested after seeing my redux video that i look into it because it was easier to use than redux and i have to say i was pretty impressed when i factored it over into one of my new projects that i'm personally working on now this redux toolkit is something that i think you will understand better if you have a background in the regular redux library so i recommend watching that library that video on that library first but if you don't you can still use redux toolkit as your first state management library for react you might just not understand exactly what's going on under the hood as much as with regular redux and why redux toolkit is such a welcome change to the redux ecosystem it is also important to know that redux toolkit is made by the same people that made redux and they had all these improvements in mind so if you find valiant split in this video please consider subscribing leaving a comment or liking the video it helps so much with the youtube algorithm and i love reading every single comment that you guys read and i love taking those suggestions and putting them into my new videos every single week that i post so let's jump straight into it as you can see i've created a very very very simple react application in code sandbox.io and all it does is it says the count is has an increment and decrement button so essentially we just have a counter that doesn't do anything and we're going to add the implementation using redux toolkit so if you get quick if you click get started it'll give you a little information about the purpose of why they started redux toolkit and stuff like that a lot of it having to be that redux is a bit complicated for beginners and a lot of boilerplate code to set up and that's why this is such a welcome change because it really simplifies the setup a bit and it also simplifies the code quite a bit which is one of the main reasons i switched in my project so if you're familiar with redux you'll know that we use something called create store to create the actual store well for redux toolkit they use something called configure store instead and all it really does is it simply does the same thing as create store but it automatically combines some of your reducers in an easier to understand way and it also adds a couple of cool middlewares like redux devtools which is pretty useful if you're trying to debug a redux application but we'll get into all of this stuff when we actually um start using it so let's go ahead and first of all let's create um let's install redux js into redux toolkit into our application so if you're following along on vs code you can type this into your terminal if not you can just simply go to code sandbox click the add dependency button and type redux toolkit let's go ahead and copy this in exactly that way we get the right library and there we go so you can see i've added the library and now we can go ahead and set it up so following the basic tutorial the tutorials on this website are pretty much split into three parts i looked at every single one of them the last one in the advanced tutorial has to do with typescript so if you're setting something up in typescript it's useful to check out that advanced tutorial after learning the basics from this basics one so first of all what the documentation will do is it'll show you essentially what a basic application would look like if you were to implement it in just regular um redux and what they are trying to show is sort of the difference so over here if you follow the ducks method for redux which is essentially just a way of saying you put all everything that your reducer needs in a single file and you know about redux you'll know that um your reducer is going to need the action name the actions function the actual reducer that does something to your state depending on what the um depending on what the values you have and what actions you have and then you're creating the store and that is pretty much it now with redux toolkit instead of using create store like that you can use configure store and pass in whatever reducers that you want instead of using for example creating an action name and then creating the action in this way you can use a single a simple uh function called create action that will create that action and pass in just the name of it and that will create the action name as well as the action that you can call and if you're new to redux i highly recommend watching the first redux video um in my video series that will show you exactly what actions are and stuff like that but just to give you a quick rundown the way it works is in react code when you call an action it will trigger a reducer which is an external state you can think of it as like sort of a place where you can store variables that you know any react component can access which is why it's useful to have very simply so then the example it gives us next is essentially using that increment it's showing us that if you were to look at the increment.type it would return that string that you passed him when he created it now i'm going through this really fast because there's something at the bottom that i want to get to now they're showing you examples of how to use all of these things individually like for example create action and create reducer which you would do in regular redux anyways but the real great thing about redux toolkit is when you get to these things called slices it allows you to create something called a slice which is sort of its own reducer that you can pass in action names as well as the reducers as well as anything else you would need for your reducer so for example right here this like seven lines of code is the entire reducer that will perform the increment and decrement functionality that we saw all the way up here when they gave the example of how to do it in regular redux this is what it would look like in regular redux to do everything so pretty much all of this and when you use a redux slice you can simplify it down to this or sorry whoops you can simplify it down to this now in a slice there are a couple of different things you can pass in you can pass in the name which is mostly for internal use and your name sort of specifies uh will help out for example if you have multiple slices slash reducers so that they don't conflict you can pass in an initial state in this case because they're just using this for a counter they've set their initial state to a variable but obviously some reducer slices will get bigger so you can set it to a map of values and then in the reducers they are declaring the actions in the same place that they are essentially declaring um the functionality for that action so in this case when you uh when you call the increment action it's going to increment the state by one when you call the decrement action it's going to decrement the state by one as well so that's pretty much all there is to um the basics of redux toolkit and the reason it's so welcome like i said before is because this is all really really a lot less boilerplate code than regular redux so let's go ahead and look into how we would add this to our project if we were going to add redux into its own folder so the first thing we would do is we can create a redux folder and then we can go ahead and create something called uh you know setup store or configure store this will be a file where we can um take in all the reducers essentially all the slices and put them all into one place and then we can go ahead and create a file for our slices so we can call this like counter.js or counterslice.js whatever you feel more comfortable doing let's call it counter slice that way it's very clear that this is a slice and not a counter component itself and the first thing we're going to do is we're going to go ahead and we're going to set up our actual reducer so for example if we come over to the intermediate tutorial and we scroll down a bit we can get a full example let's see maybe i passed it we can get an entire example of how they set up that store so this is pretty much all we have to do let's go ahead and we can go ahead and import um right here configure store and then pass in the reducer so we're going to import configure store from redux toolkit and we're going to import our slice whoops we got to do this in the configuration we can import our counter slice so let's just have this return the default code that they had there for the counter just like this and let's go ahead and import create slice okay now we can go ahead and we can export a couple of different things so for example we can export if we look at um the more intermediate tutorial the actions and the reducer separately so for example if i copy this i can call counterslice.actions to get all the actions and then destructure them and then export them and i can export the actual reducer as the default export for this file and this is really cool because you don't want to go ahead and import the entire slice into every individual file that you want to use the action for example doing like this allows you to for example just um export the single action that you need in every single reducer um or every single place that you plan on calling a function from the reducer uh individually which is really cool so our slice is pretty much complete as you can see here all we've done is created it we gave it a name we set the initial name to uh initial state to uh b0 and we've set up our reducers and our actions at the same time by just declaring what the action is and what it does in the same place and we've gone ahead and exported all of them so now let's finish up setting up our store adding our store and our provider to our index and then we'll be ready to actually call our variables and our functions in our application itself so let's go back to the library let's scroll up and see how they are doing the actual creation of the configure store and as you can see here it's pretty simple all they're really doing is calling it and passing in the slice that you have so let's go ahead and uh import the slice first and remember it's going to be the default export so we can just export it like that and we could just pass in our slice like this but let's say for example in an application where we're going to have multiple slices which is extremely extremely possible so let's just call this like test slice.js i'm going to go ahead and just put some dummy data in here in fact i'm just going to copy the exact same thing but just to show you guys how to pass in multiple slices into your reducer what you could do is you could go ahead and you could call something known as combine reducers which is also from redux toolkit so i'm going to go ahead and import that combine reducers and then i can say const reducers or reducer is going to be equal to combined reducers and i'm just going to pass in all my reducers so i can say for example counter is going to be our counter slice and then let's go ahead and import test slice from the test slice i made and we could say like the test reducer uh will come from that test slice there we go and now when we're passing in our store we can go ahead and just pass in reducer just like that because um you would technically do this but obviously if it has the same name you can just pass it in once and it'll automatically make that object and also if you wanted to for example um pass in the default middlewares you don't have to add anything but if you wanted to for example disable some of the default middlewares that it comes with for example redox thunk is one of the the default middlewares and in my videos i like using redux saga you could do something like this so you could go ahead and import get default middlewares which will give you all the default metal rollers that it comes with and you can go ahead and spread that object that it gives you and you can pass in thunk to be false um and i wonder if you could probably even disable dev tools maybe i guess not but for example this will give you all the default middlewares and then it will say listen i don't want thunk in these default middlewares and it'll pass that in so we can go ahead and save this and let's just go ahead and export default store so now pretty much from this point on the last thing we have to do is create the provider in our app.js that is going to be or in our index.js is probably better practice that is going to be as simple as it always has been before and in order to do that you are going to need um the redux react redux library so we can go ahead and install that and once that is installed all we have to do is come over here and first import the provider from react redux and if you're not sure what a provider is and you're not sure why we're setting up a provider and exporting the store and stuff like that like i said highly recommend checking out my other my introduction to redux which will explain all of that um and it'll probably be really helpful to you to understand how toolkit works as well even more so than you've already seen here and then we can also go ahead and import the store let's go ahead and take it from configure store and then lastly we're just going to create the provider and pass in the store and wrap that around our app and there we go so now we should be able to go into one of our applications and actually uh in fact our only application and use that use selector um you know the standard use selector that we've always been able to use for redux and take out that count variable from the redux store the slice so we can go ahead and let's just come over to our app.js oh right here so we can say for example count is going to be equal to use selector state and then we say state dot and what do we call so we saw state dot counter um i believe it should just be the default so let's go ahead and pop that in there and there we go we have that our count is zero and if i come back to our counter slice and i create the set the initial state to like five you can see that it'll change to five and also if i set it like this and i and i had a map and i said like count is equal to like zero for example i could also change these actions up because we're no longer just editing um the top level of the state we can actually do what we do in regular redox and return the entire state because we know we only want to affect one variable in the state and we could just make count equal to the current state.count plus one and then the same thing over here for the decrement that's at minus one now we can come ahead over here because we are now um this state.count is an actual object and we're trying to display an actual object we can go ahead and destructure the count variable out of this counter object and you'll see we still get it over here just like in regular redux and for the increment i can create the on clicks again so um we can call a dispatch and in order to do dispatch we're going to need the dispatch hook just like that and then in our dispatch we just call increment oops and we can go ahead and import it and then make sure we add two brackets at the end and then the same thing for our decrement except instead of increment we're going to be calling decrement just like that and if we start using it we can see that it works now the other last thing that i want to show you guys for redux toolkit which is going to be helpful is passing in variables into um your reducer and your actions so if you remember from regular redux when we declared an action and a function we also declared with it the variables that we wanted to pass in and the variables we expected the reason this is so much less verbose is because you don't have to do that because it will naturally take in a single variable called payload and you can pass in an object for payload and access that object to be whatever you want for example let's go ahead and create another reducer over here and we can go ahead and call this reducer something like test and for test instead of just getting the state we can also get the action and we can make this an actual function and what we can do is we can go ahead and actually destructure something whatever we want from action.payload so let's say for example we're passing like a test value we can take that from action.payload and then you know we can do whatever we want from it let's just console.log it to show you guys how to actually get that value now i'm going to create another button and let's go ahead and don't forget to export this action as well i'm going to come ahead over here i'm going to create another button that's going to be called test and when i go ahead and click this button i want to call the test action and i can go didn't import it so let's go ahead and manually record it and i'm going to go ahead and pass a object and i'm going to set test value in that object to 33 so now if i come over here and i click test you'll see here my console log outputted 33 and that's pretty much how you can pass in any type of value and stuff that you want any value that you want this is an object so you can pass in as many keys to that object as you want and use them however you like in your actions so it's a lot less verbose but that is pretty much it for the basics of redux toolkit let me know what you guys think of redux toolkit and if you're interested in me doing a redux toolkit with redux saga because it is a tiny bit different than redux um and if you're interested in that video and like i said if you found value in this video please consider subscribing you're leaving a comment it helps so much with the youtube algorithm and i really hope you're all staying safe and thank you guys for watching hope you have an amazing day

Channel: Anthony Sistilli

Views: 13,930

Keywords: React Material UI, React Material UI Tutorial, React MUI, MUI, React, Tutorial, Material UI, Redux, Redux Toolkit, react redux, react tutorial, state management, redux tutorial, redux course, code alongs, react redux tutorial, react redux explained, react redux crash course, redux toolkit, redux toolkit thunk, redux toolkit createslice, redux toolkit react, redux toolkit api, redux toolkit vs redux, redux toolkit example, redux toolkit 2021, react redux toolkit

Id: PmFVQmSSaE4

Length: 20min 32sec (1232 seconds)

Published: Sun Jan 24 2021