Deep Dive into Redux Toolkit with React - Complete Guide

hey guys so in this video I seek to provide a fairly comprehensive overview of a fantastic tool set that is known as a redox toolkit so I've been spending about the past week playing around with it in my spare time and I gotta say what definitely speed up the process and also remove a lot of the boilerplate headache that comes with setting up a redox application so if you are a redox user this is something should definitely check out and perhaps even use in your future projects so before we take a deep dive into this let's take a quick overview about what this talk is all about I'm under your fishel website over here and the tagline is that it is the official opinionated batteries included to set for efficient redox development let's break this down a bit so first of all it's official meaning it's been created by the redox team it's been created by the maintainer of the redox library right now and that may be a bit surprising to some of you as it's still pretty unknown at this time but that's only because it's still pretty new at the time of this video's creation with the first stable version coming out just last year in october however it will most definitely be picking up steam really quick really soon so it's probably a good idea to get accustomed to it before it gets even more mainstream it's also opinionated meaning it kind of guides you to set up your redox application in a certain way redox was originally designed to be very unappealing it for the most part such as giving you options to handle a sink request whether you want to use tungsten redox Agha and so on but this toolkit will kind of steer you to go in a certain direction and although it's flexible enough so they won't force you to it adhere to his rules it's probably the path that we should all follow unless we have some good reason not to and I think this is a good thing for the most part for the readers community to have an official way of setting up a project not only they will probably make it easier for newcomers to come in to learning about how redox is all set up the next thing is that it is quote-unquote batteries included tool set so this just means that it comes with some libraries that the redox team recommends us to use so you can kind of think of it like a crate reactor for redux it gives you all these things included that you'll probably use so you don't need to install them and set them up separately and finally and this is probably the most important it's very efficient very efficient as a matter of fact I'm gonna show you a hands-on comparison later in this video showing a redux project set up the traditional way and also the read of Tokyo way so you'll see that it is a lot simpler in a lot less code to set up using the toolkit so before we continue on with this video let me give a bit of a roadmap of what we'll be doing the first thing is we'll see what's included with this toolkit and briefly go over why those packages were included in the first place then we will have a brief overview of some of the functions that this library comes with because soon after that we will be setting up a simple to-do app in two separate ways the first time we will set it up the traditional way manually defining our action type constant action creators reducer setting up our store and so on then we'll set up the same project except this time we'll be using the Redux toolkit this will hopefully give us some hands-on work to learn and how to set up a redox app using the toolkit way and it will be a good comparison to show us why it's so efficient and useful to use I'll also be giving you a starter template with all the CSS and functional components set up already so that we can just focus on the Redux part of the application after we see for ourselves just how useful it all is we'll go back to the documentation to look at all the functionalities and detail some more this will hopefully solidify our knowledge a bit more and we'll be a bit more prepared to go to some of the more specific details of this package and after that I will have our Q&A section where I'll try my best answering some of the more common questions that this toolkit has oh these are some questions that first of all I personally encountered while messing with this library and also some of the common questions I found on the web so if you're calling along or watching this video and you have some questions along the way hopefully I'll get to it and answer in this section so as you can probably already see from the length of this video this will be a pretty calm hence a video on the redox toolkit but I think you'll be a good learning material for the community to help especially because from my research not much videos exist yet on the toolkit by the way I'll try to have some timestamps both on the description of this video and also a pin comment in the comment section so that you'll be a bit easier to navigate through this whole video if you wish to do so now here are a few things I'm going to assume that you already have first of all this video will assume that you are comfortable with traditional redux well I will briefly explain why I'm setting up a certain thing or certain way I won't go into the things such as what a reducer is what acts and craters are and so on so if you're an absolute beginner of redox watching this video this may not be the best place to start I may however in the near future release a series on teaching redox and specifically the read of tocut way for beginners I don't think any video tutorials exist yet on teaching beginners redox via this method so it will be something new and interesting for the community I also think it can be a lot easier for a beginner to learn redox using the redox toolkit way instead of a typical way as it gets rid of lot of the boilerplate and as you can just focus on the core topics of with us the second thing or the second requirement is I will be using pipe script when we do our color law so if you have absolute zero experience using typescript it may be a bit difficult to follow along later but honestly it shouldn't be too hard I decided to write the code in typescript because if you're using redux you're probably already using typescript in the first place and many people may be wondering how to use the tool kit with typescript and finally and this is not too big of a deal to be honest but I will be using hooks in this project both hooks from the react library to manage your component state as well as hooks from the react Redux library such as use dispatch and use selector hook again this way of creating our react library has been out for about a year now so most of you guys are pretty already used to it well those are the requirements so on with the video so the first thing that I want to do is I want to get all the packages of this redox tool kit comes with so I'm on the official github repo or redox tool kit and remember what we say in the beginning it says that it is a batteries included Tosa for efficient reduce development so it's kind of like rain reactor where he has a couple packages that the maintainer czar redox things that we should be using so it's opinionated remember and it has installed those packages for us to use so it comes with this toolkit so I'm on the github let's go inside the let's see let's first check out the package.json file here so what I'm interested in are the dependencies that is listed here okay so let me zoom in in this real quick so as you can see there are six packages that the redox tool kit comes with and let's let it go over all of these but let's get the easy stuff out of the way so first off of course it has the redox our library inside what this means is if you install redox toolkit to your to your app you don't need to separately install redox because it comes included with it however notice that nowhere here do you see we act redox so again redox toolkit you don't you just use it with the react app you can also use it with any other types of apps that's written in JavaScript I believe it's just that most people do use it with react app so just like using the traditional Redux you have to install react Redux separately to use this with a react project so it comes with redux another easy thing is it has the redox dev tools extension by default that is this little green thing mine's not on right now but there's chrome dev tools you could use this and by the way you don't even need to set it up it sets it up for you automatically and turns it on by default so if you wanted to turn it off to up or conditionally turn it off there is a simple like a boolean that you could just check to turn it off so it's very simple to use and you don't have to do this npm install redox dev tools extension all that stuff and just put that in your store and all that stuff so it makes it very simple to use so not only that and this may be controversial but what do you think it is it comes with Redux tunc to handle your async requests as default and this is installed into our Redux application as default and I say teapot because you could turn it off as well um so Redux tunc is not the only middleware that could handle your async requests as a matter of fact mark Erickson in his blog he's one of the maintainer czar readouts a very helpful guide by the way so he made a little blog post here I'll put the links in the description below and pretty much in this block he explains why he chose to use redox dunk as a default to handle the async logic so if you're curious you could read this it's a fairly interesting read and I agree with a lot of the points that he says I personally also use Redux tongue in my applications both at work and at home but these are his three bullet points so he got into like a debate with someone else because I guess the other person like using redox Agha more than redox dunk but Marx reasoning or having Redux dunk as a default is one they are the most widely used redox async middleware which is true number two they handle the most common case of I want to fetch some data and also we we as in the redox team specifically recommend them as a default approach for async logic so again if this does not mean that you can't use any other async middleware because you surely can you could turn off redox dunk and you could use for example redox opera if you choose to but as default this package comes with redox dong installed as default another tool that comes with as default is Reese elect so hopefully you guys know and use react before but if not that's fine we select what it pretty much does by the way we're not gonna go over actually using this when we start coding but what it does is it memorizes your selectors whenever you grab things from this from your store you can memorize it so that it doesn't rerender your components needlessly so and this is where it gets useful so this library comes with one function I believe that's in wristlet called crate selector I personally use a lot as a matter of fact I plan on making a video on how to use reselect in your Redux react applications and not only recent lect but also riri select and what the difference between those two are so this is a pretty useful tool to have and I definitely use this too and you should be doing two so we have two more packages to talk about that is Emmer and redux immutable state impairment let's take care of this one first so this is a middleware let me go to is MPM our website it's over here and let me read it for us real quick says redux middleware that spits an error on you when you try to mutate your state either inside of dispatch or between these patches for development use only so pretty much is this like a help or helper middleware so that in case we try to mutate or state directly or you know that's not about in reducers so whenever whenever we try to do that it will give us an error so this is kind of helping us avoid the common pitfalls that a lot of people make when creating a redox application however it says here don't use this in production because this may slow down your project he says here it involves a lot of objects copy and will degrade your app apps performance so this is purely for the development use only now however I was going through the blogs and this is a marked Eric snow kind of very helpful guy and one thing that he did say is something that he is going to do in the future the near feature it says fork redux immutable state environment into RTK we don't soak it and ensure that it's actually getting stripped out of the production bundles because right now it is it so right now technically is a slight problem that we have the read illimitable state environment within the actual production build build if we were to use the read of soak it but I'm sure she'll fix it soon enough and maybe even by the time that you're watching this video it has been fixed so I wouldn't worry too much about this right now but this is definitely a very helpful middleware for us to have because we should not be mutating our state within our reducers but our final package that this comes with is called Emmer now this is a very interesting package that actually allows us to quote-unquote mutate the state within our reducers so it's kind of funny this where is it this redox emitter was the environment middleware forbids us from mutating our state but Emmer will actually allow us to meet the state and magically in the backend it will actually put a mutable state logic for us so let's go and talk about this a little bit more in detail right now I'm on the official redux documentation so again this is not redox toolkits documentation website this is the original Redux documentation website and this page right here explains to us the immutable update pattern so this is one the core principles of Redux is that we can't directly update our store we can't directly mutate our store we got a dispatch actions to update our store that that is what the principles of Redux so we gotta do a two way that we get around not mutating our state is we gotta do these crazy uh immutable update patterns let me just try to give you guys an example I'm sure you guys are not familiar with this let me open up my terminal just pretend that we are in a reducer and we're trying to update the state right and our state is in a state variable I should pretend that's the case let's say that our state was an array then we if we want to like add a new element to an array I say it was a US array of numbers for example right we can't do like state that push cuz then we are directly mutating our state because a push is a mutating function we can't do this so the only way we could have updated our say immutably was we did our reducer we returned the new State so we spread our old state getting all the elements from our own state and we just add a new element that we want to add so we had to do all of these loop around so this is a pretty easy example but there are nightmare cases and this page kind of shows you all the crazy stuff you had to do and look at all these spread operators going on here and this page pretty much gives you all the hints all the tips that we should do for these complicated update on logic however this Redux tool kit comes with Emmer so let me read this real quick for us it's just so that you guys are just so that you guys know what Emmer is all about Emmer German for always is a tiny package that allows you to work with immutable state in a more convenient way it is based on the copy-on-write mechanism the basic idea is that you will apply all your changes to a temporary draft state which is a proxy of the current state once all your mutations are completed Emmer will provide the next state based on limitations of the draft state this means that you can interact with your data by simply modifying it while keeping all the benefits of immutable data so this is a key so if this kind of went over your head don't worry about it what this pretty much means is we can within our reducers we can directly quote unquote update or mutate the state for example by doing state apush or modifying one of the properties in an object we could do that not because that's a lot because that isn't allowed in a in a reducer ah but what ml will do for us is it will see whenever we update just whenever we try to update the state correctly it will convert that logic into a immutable update logic for us automatically so practically what this means for us is with the reducers we could quote-unquote mutate the state directly and Emmer will do all the magic for us and convert that to our immutable state logic so this is a very powerful tool and you will make writing or updating our state patterns easier and much more legible to our code may look or not more legible because of this Emmer and it will pretty much do the same thing as before now there are a couple pitfalls and I will cover them later but right now it may not be the best time to explain to you guys the pitfalls of this and it's not serious pitfalls is easily avoidable but we'll go over them after we do our hands-on to do example later in this video this brings up a kind of interesting point so Emmer quote-unquote allows us if you will to update the state directly mutate the state but the middleware Redux amido was the invariant don't allow us to be theta state so what's kind of going on here why did the maintainer the readers decide to have both of these libraries I'm not entirely sure but what I think is happening is whenever which we also Emmer is in the reducers the reducer to to reducer functions that this library comes with which we'll go over real soon so whenever you try to update the state directly within the reducers provided by those functions or Emma what do is magic for us but I think whenever you try to update the state outside of those reducers or maybe try to create your own reducer for some reason then this Redux immutable state environment middle will kick in and give us an error so I think that's what's going on but in a way these are meant to help us and meant to make our code faster faster for us to write and much more legible for us to read so I think this is a good thing for readers ok especially for beginners so that was our overview of all the dependencies that this read of Stoke it comes with now let's go over the functions that this talk it comes with that we're gonna be using all right so I'm on the official redux Tokyo website links will be in the description below but what I want to do before we start coding is I want us to check the API real quick to see what's included with this toolkit so we check the dependency the libraries that is conflict now let's look at the interesting functions at this concept so T's as you see here how many are there 1 2 3 4 5 6 6 plus some other exports minor exports that's also included here we're gonna go over these in more detail later after we have coded all a small to-do app but before we do the to-do app I just want to go through it's real quick so that you guys kind of know what's gonna happen what's going on so again I'm gonna assume that you guys are used to you guys are accustomed to how to set up a Redux application now the two most interesting function of interest here is not this crate reducer this create action but it's actually the crate slice and also the configure store but let's go over the less interesting ones first um so let's go over the crate reducer first alright so if you remember from setting up your reducers and your redux application before before Redux toolkit reducers were just functions that you will create using native JavaScript so you you didn't use a special function that the redox came with now you use something special that Redux came with to combine your reducers by using the combined reducers function but to create your individual reducers you will just make a standard function like this a function that takes in two parameters your state which must always be initialized as you can see from this equals zero here and then action that it receives so what it does is in receipts is action and gives you the updated state or based upon the action typically written using a switch and a case statement like you see here so what does career reducer does again okay let me just stress this again most of the time 99% time you don't need to use this career reducer function and you don't need to use this create action function that comes with it may seem like they're useful especially if you're coming from a traditional redox background however there's this other function called Chris slice that almost will take care of every scenario so that you don't have to use this query reducer and you want to use his creation will go over to this juicy one in a bit but let's go over the query reducer real quick so pretty much instead of you Bill doing this from scratch it allows you to build or where is it you know allows you to build an action very quickly I couldn't lost my train of thought okay so I'm on the producer right so again it gets a state which you must initialize you pass in an action and gives you the updated State return right so one thing could about this is it had because this library has a more included with it if you chose to use this crate reducer function to create your reducers you could quote-unquote mutate your state directly and Emma will do its magic packet and give your immutable state update so if you look here at to do we have a attitude type what is going on here we get the payload that is a to do and we just push it to our state this will typically not be allowed in a standard redux application but because this has Emmer plugged in we could quote-unquote mutate the state directly like this and Emmer would do its magic and allow us to update to stay correctly so this is crate reducer I'm getting we're not gonna be really using this because this Chris Chris slice kind of makes this ah you don't have to use these two but let's go over to create actual quick so what a action crater typically is in a redox application is again is a native it's just a traditional JavaScript function that gets up it gets a parameter yes a bunch of parameters you could define how many parameters you want in your action craters and it just returns an action now what an action is is an object with a type that tells you what type it is in this case they call the counter slash increment this is also interesting by the way I'll go over this in a little bit but also the action also has an optional payload and this payload could be anything you want right and these in turn get passed to your reducers but let me go over this so redox toolkit kind of changes how you define your types before if you had like a counter and an increment action typically you would call it let me get my terminal open if I can my sound I'm not used to this Apple touch part keyboard so sorry about that all right so let me zoom in for us real quick get rid of all this stuff that's going on here not sure what's going on but before typically we would type a conference like so maybe what is this increment a counter increment counter is equal to increment counter so this is typically what our action type would be before like a typical way but read of toolkit because of the way they set up they have chose to go this route where we have the name of the slice of the state in the first and the name of the action for that stop for that state as a second verb so I think this is a pretty this I'm definitely going to be implementing this happening in my future projects and I think you will like it too so initially I was very skeptical of the way that this is written just because I'm used to the other capitalized constants well I'll explain you and I'll show you guys during our action : why this is so useful and so handy for us to use so again this create action is a function that the read of so key console that allows us to create our actions or action creators but again we're not gonna be using this that much because the important one is this great slice so so what is this great slice let's read about what this documentation says that is it says it's a function that sets an initial state an object full of reducers functions and a quote unquote slice name and automatically generates action creators and action types that correspond to the reducer and state so this is an extremely powerful function that will reduce our boilerplate tremendously in our readers application so again 99% of the time I think you don't need to use this crane reducer and it's create separate create action function you could just combine those two with this powerful great slice function so and we're going to be using this function in our redox to do example but this pretty much our sets an object and here's a first accept our reducers let me see an example if they have one down here yeah so here it is alright so the first thing we are set is a name so this is a name of the slice of the state that you're dealing with in our case it's called the counter so this is something maybe like you're not you don't usually do your reducers your yours your slice are in the typical redox application I guess you would name your variables but you don't typically name like you don't have a key value pair called name so there's something kind of new but it's very important it's a very handy especially when they create us the action types that's where this comes play so it's very useful and we must read it's a requirement to give it an initial state so before in the old way of doing this is the old way of creating reducers you give your initial state or to your state or using this equal sign here as you see here equals 0 so many times because this is a traditional JavaScript function many people will forget to do this and then their application what bog out but because there's a common mistake they now enforce us to give it a initial state so this will prevent a lot of amateur mistakes not just amateur but I do it too all the time I forget it many times so this is very definitely handy now reducers instead of using our switch case and all that switch case statements if this if that we just pass it or keep all your pairs where the keys corresponds to a part of the action name the action type name and then the value will be a reducer now here we're getting a state we're incrementing it by 1 and then here we're documenting it by 1 and so on there's also special ways to set it up we'll see this in our example actual reducers we don't have to worry about it although I will show you guys using this later and let's see what else I have so they have another slice here so here they had a slice of the counter state and now here they have a slice of the user state they give it they should stay here again I'll have one reducer associated with the user and they call this combined reducer so again if you're used to Redux you probably know about this command reducer it is the same function we just combined the different reducers giving them names right and now this is where it gets very interesting we define the reducers here right the slice crisps slice now this will automatically give us the action types and the action crater so notice what we call this chrysalis here we defined it to a variable called cons counter and we call we call this crystallized here to this variable user Constitution so we have the counter variable and the user variable now if we go down the line here look at what this has this counter that we have defined above has a property called action and this key in turn has all of our action creators that it automatically generates for us so we're calling the increment here that is associated with the increment reducer here we have the multiply we didn't really go over that we also the decrement and for the users we had to set user name so yes automatically created us these are action creators so that we don't have to have a separate file that defines all the action creators and not only that it has automatically defined us the action types so how remember if you go back to hear how the interesting way that they have defined their action this is the name of your slice and this is the name of your reducer so it just combines and gives you this automatically so that's definitely very handy useful and it will speed up your code a lot you will write it in half the lines of code almost as you will see pretty soon when we go to code however let's just finish going over some of these functions that comes with um crazy selector so this is from the recent like library we're not gonna be covering this here I will make a video the feature if I've already made a video about it I will put it on links description below but it's a handy way of memorizing your optimizing your application so that it was speed also that you don't have unnecessary renders so don't worry too much about this we have a little bit of other exports do you remember one of the library that this came with is the serializable Statham Barrett middleware so this is a function that allows you to customize that how that works we won't spend too much time on that and we have this is part of Bremen we're not to worry about that too much right now combined with research is pretty much the same as the Reed Reed office combined reducers where we combine our different reducers into one compose also is the same from the redox library that also has its composed by the action creator so this pretty much is kind of like the map dispatched props where we automatically wrap our action craters with dispatch so that it makes it handy for us easy to use not too important crazy store is the redox its version of Chris door it says you should not need to use this directly because we have the other interesting function here called the configure store and we have applied middleware so your properties is - it says also here you should not use this directly so let's look at the configure store alright so this is a friendly abstraction over the standard readers Christ or function that adds good defaults to the store setup for a better development experience so this will let's see the things that it takes so this is pretty much like our crate store from a reader typical redox application reducer is where we put our reducers if you have more than one reducer you use the combined reducers and just put it here you could optionally define middleware additional middleware that you want this up your application to have now keep in mind that this read of Sookie comes with a default middle words such as the embarrass state or whatever the Emer on the Emerson body of middleware I guess or maybe it is it also comes with redox thunk as default and also it has the redox dev tools applied to your application by default now if you want to turn off your dev tools so you could all this also text that tows boolean optionally and you could just put maybe like true here to turn it off or have a conditional statement here to turn it off free Lola state is pretty much the same thing as a story it gives you gives you a pre-loaded stake pretty much enhancers it's just another way of adding middlewares I believe so this is very useful now remember I told you that in the beginning that we took it comes without specific set of middlewares oh that's already configured if you don't want to use those are default middlewares for whatever reason or you want to add additional middle words so you would use this middleware key value pair here and if you want to add additional middlewares to your application or in your configure store in your middleware let's see all you would just spread the get default middleware this will give you all the default middleware that automatically comes with and you could add additional middleware to your application so again there might have been kind of confusing but we're gonna be dealing with this in our demo so don't worry too much about it but that's pretty much the redux toolkit so now that we had a fairly brief overview let's go into our application but before that let's figure out how we can use this redux toolkit okay so right now there's two ways to add redox took it to a project specifically to a react project I'm gonna be focused on react right now so the two ways are either you install it directly or you use something else so the first way is just to import install it so npm install at redux j/s slash toolkit I think that's it so again you could add this to a new project or add it to an existing project now keep in mind that this comes with all the packages that we discussed including redux so if you're installing this to an existing or application that already uses redux you could after install this you could uninstall redox cuz this because that's redundant this already comes redux however if you're working on a react project you have to also install we - Redux because this one just like Redux is it's not necessarily aimed just for a react project so if you are using this with a react project then you also have to install react Redux now this is not the only way to get started you could actually there is a starter kit or there's a template for creating react app that automatically installs all the things that create react type comes with plus the Redux toolkit and even gives you an example to get started so the way that you start that is MPX create react app the name of your file or whatever and then - - template Redux so this will install everything in Crete react app plus all the redox toolkit stuff and an example for you to use now let me just clear this real quick this file right here this directory that I'm on right now actually I ran that right before I start recording this video so it comes with all the standard stuff that crate react app comes with but it looks a little different let me just get this started real quick and as I load let me just show you guys we have this power cut whoops see we are this far folder called features so this has a counterexample that we're gonna see very soon it has the functional component I don't let you guys see that all my ideas screwing up right now but pretty much ignore all these lines it has a functional component that comes with with a counterexample and also it uses the christ' crate slice function that we discussed briefly before so it already has made us our store and we could just study this and look at it and also check out the this is what the start starting page looks like so it looks a little different than your typical crate react app application but it also has this counter example that it comes with so you can see how that works you can see that the redox toolkit is also lit up so that's connected by default so this is a pretty handy and a useful way to get started with your Redux application however let's go on compared now the creating our Redux application using the traditional way and also the redox token way now to get started I will give you guys a github link to give you a start code alright guys so I have my code on the left side and I have my github page with this code is starting code on the right side so the link to this github page is in the description below please I highly encourage you guys to check out this page and either clone or fork the starting code here now let me just explain how I made this starting code just to show you guys that there's no magic going on so first of all I created this project it kind of looks like this this picture this is how it looks like and we will see that very soon so I just it'll MPX scream react up and I also use the typescript template so this project will be in typescript and because I personally like prettier I also install prettier and add it all yes Linda JSON file - link yes Lynne and predator together not a big deal that's optional and if you don't use that don't worry about it I also install for us the UUID because whenever we make new to-do lists like here during redox ole kit or learn redox or whatever we are going to give them a unique ID and the way that we're gonna give them a unique ID is gonna be using this UID I'm sure that most of you guys are already familiar with using this it just generates a random unique ID and then I also remove the starting code that the Krait react up starts with and made pretty much this template right here now this is what it looks like I already started my server by doing NPM start so guys please again if you haven't already please cloned of a project or starting code and follow along with me now I don't have redox installed anywhere right now we're gonna be doing that together because I just want to go through the process with you guys of the typical process the boilerplate and all that stuff that we have to go through to create our project using the traditional redox way and then afterwards seeing how we can do that with the new redox toolkit the RTK method okay so once you start your server and it's running this is what you see now it may look like we have some stick-up going on so here is our counter up here I don't know if you guys see that so let me zoom it for us real quick here's a counter here is the form to add a new to do and it seems like we already have three to do's and they appear to be clickable although nothing really happens when we click on them and we get these edit and all that stuff here too but they don't really do anything so again I don't have Redux or react Redux or Redux toolkit or whatever installed right now we're gonna be going through those together so what I did let's go into our source file go into our app folder and let's just have a brief overview of this app file right now so I in the beginning after I install or import all the stuff that we need for this project I just made up array of the two dues that we have so these two do is that you see here are hard-coded in to my code base right now later of course we're gonna be replacing this with an actual redox tour and grabbing the two dues from there but for now we're just gonna be using this I also have another quote-unquote state called is selected to do ID and I'm just grabbing for whatever reason the first index to do so if you look here notice that the second one is pulled it out and that's what you see here that's cuz that's he's selected to do I just hard-coded that in so again we can't really select anything else right now and also this edit account that you see here which is 0 it's also hard coordinate now within our functional component this is a functional component I'm using hooks we have two state variables representing the inputs that we have what are the input is creating on you to do which I'm calling the new to do input the other one is whenever you edit whenever you edit input this is your second input called the edit to do input and also I have a boolean state variable here that is telling the component whether we are currently in the edit mode or not so what I mean by that is right now the way that this page stands we are not in the edit mode but once I click Edit here now we are in the edit mode so that's hot that's the conditional logic I Eustis boolean to display conditionally whatever that you see here okay so I also use a user F by the way I'm explaining all of these guys to you so that in case you're confused about some of these things I just want you guys to be on the same page as me this use ref is the ref for the edit input this input specifically and the only reason why I have to hear this use read is so that once you click this edit your cursor automatically goes inside to this field this input field right here so that's the only purpose of this use wrath so if you're scared is don't worry about it oh here can't select it to do what I do is if we have a selected to do state which right now we do because we hard-coded that in up here nine-thirty then we we go through our - duze array and we find that to do and we put that we assign that to this variable here otherwise we assign this as no and I have various if at handlers down here which are pretty much empty they don't really do anything right now we have the had a new input change handle add input change handle crate need to do it's like to do and it blah blah all that stuff and this use of fact the again the only reason why I have this is to put the focus on the cursor when we go into the animal onto the input that's the only purpose of this user effect don't be scared by it and then we have more event handlers handle update handle cancel update this is when you click cancel when you're in the edit mode and you just want to cancel that you like there might want to edit it that's what this is for and the handle toggle for whether it's complete or not and handle delete and this is what our JSX looks like so that's it about this component again notice we don't have any redux stuff going on right now now let me show you guys the second file of interest and that is this type that tedious this is a type file for typescript and it just pretty much gives us the type of our to do first of all to do has is an object with three properties ID which is a string which we will generate by the UUID package description is just a name oddly to do and it completes a boolean whether true or false depending on whether is complete or not and if it is complete and we will see the strike you like you see here we also have the interface a type of our state remember from the beginning we're gonna have three slices of our state our state will be divided into three slices that is the - duze which is array of our two duce select it to do whichever to do that we have selected that is showing here let me just do it like that that's probably better so whatever you see here that is the selected to do and this will either be no or the ID over to do and then we also have this random counter that keeps track of any time we edit create or delete or to do any time we manipulate or to do it anyway we just increment this counter and again that's a little bit pointless I am it but I'm just sure I'm just I just had this state within my application because I want to show you guys our new feature that this Redux tool kit comes with and I want to make use out of that so this is a best example I came out with and I think you guys will get the point so I'm assuming that you guys have downloaded this file so look through the code one more time try messing with it just to get yourself comfortable with it and if you have done that so far come back to this video and now we will continue creating the redox tour redox reducer action crater and all that stuff the traditional way and this is I'm not gonna set this up quote-unquote the right way I'm just going to put everything in one file because one this application is not that big and two you know I don't want to make this this video too complicated but if you will follow along with me let us go into our source directory and create a new file here we are going to create a file called Redux - about OG d s OG standing for the original way so this will be the original way of how we set up a Redux application without Redux toolkit so once you have done that open up your terminal because again we don't have redux setup let me just get something out real quick so go to terminal and we're gonna install a couple things that we need whenever we start a redox application so we what we need is let's do NPM let me zoom in a little bit more install we need Redux we also need react Redux we need I also want to install a couple middle words that we're gonna be using so let's install couple we need redux dev tools extension that just pretty much allows us to use this little thingy on the google chrome redux tunc we're not gonna be really using redux tongs I just want to install it because Redux took comes with it and I just want to end probably most big applications already have rid of stumped by default if you use redux thunk so I just want to install that here and also we're gonna install this thing called a Redux logger so if you don't know what that is don't worry about it I'll explain in a little bit it's just another middleware for our redox application and because we have a typescript file I know I was noticing I was getting a couple errors because we need to install a couple type files for some of these packages and one type file that we need is to add type slash react Redux and we also need at types Redux logger so T's Rd 1 2 3 4 5 6 7 packages that we're gonna be installing already you could kind of see that it's a little bit crazy setting up a redox application but let's press ENTER and wait for that to finish alright so as those packages are installing I just wanted to give you guys a visual aid on what's going on here so that I know that we're gonna be coding a lot right now very soon so I didn't want to confuse any of you guys so let's just go over visually what we're gonna do real quick so this is the redox setup the old way without using the widows toolkit so first of all this is what our store looks like we will have three different states it will be sliced up into three different parts obviously the most important part is the to do's part which be which will be an array of to do now remember the to do type has an ID which is a string on the description which is also string and also whether it is complete a boolean whether it's true or false and we also have to select it to do so depending on which to do we select the ID of that to do we'll go to our selected to do and finally we got this weird state counter which will be a number and anytime we manipulate our two deucing in any way whether we create edit or toggle or delete or counter will go up now it is my scene pointless but and pretty much it is but I just wanted to show you guys a feature that some ways I just want to you as a feature that we those token has and this counter will be a good example to show that so just ignore that for now by the way these are application just to show you guys what's going on these here in the red circle these are the to do stylistic to do this obviously um here is whenever we select the to do from our my to deuce here equals over here and the way that the Redux application knows they serious because our selected to do is ID is equal to whatever to do that we have selected and finally here's our counter right here at the very top okay so what are the steps that we need to take to make our redox application so number one this is optional but this is highly recommended we must create our action type constants so this is just making a bunch of string variables or capitalized because these are constants and then number two we gotta create action creators or associated with each of our action type constants and also because we're doing a type script file we should give type definitions for each of our actions like what the actions look like so he has a type of a string and also a payload of this and that and so on then number three we should create our three reducers associated with the three different sections of our store then before combine our reducers is fairly simple we just called a combined reducers function and number five we should configure or store or connect our store with our reducers okay so before we finish let's look over the action types that we're gonna be creating so we first have this board that manipulates the two dues so we have the crate to do edit to do toggle to do by the way the tower to do just toggles whether it's complete or not and finally we had a delete to do so T's will affect our the the to Do's the the array of to do this but not only that these for whenever we call upon these actions it will also increment our counter by 1 so you will effect two parts of our store and finally we got one action type or our selected to do and we just call a selective and that will only affect our selected to do store State alright so I think our packages have been installed by now so let's go back to our code alright so hopefully that's finished for you guys so if that have closed your terminal for now we don't need that and let's continue building up our reducers our action creators and all of that within this redux - og file now I'm not gonna create a store I'm not gonna create a adult provider to our index at ESX I will do that later for now I will create the action types the action creators reducers and all of that stuff in the beginning so what is the first thing that we need now this is optional but typically when you create a redox application you want your action types written as constants declared in a constant variable so let's do that right now I'm just gonna say these are our constants and I'm writing this because we're gonna have everything in this one file so our first constant is gonna be cons about great to do and we're gonna do this very redundant thing where we have the variable name and the value of the string the same thing a lot of redundant Z's here wink-wink this will be solved in using Redux toolkit we're gonna have an edit to do and we are also gonna have let's see toggle to do this will toggle the whether it is complete or not we will also have delete to do so these are the four action types related to our to Do's now we have on one action type related to our selected to do state and that is select to do now number we have three slices of our state our final state is going to be the counter but that won't have any dedicated action types or that will use some of these other action types as already here so we won't make any constants action types for this counter State now that we're done with the constants we have to define our actions and the action type so because we have a type script application we first have to give types to all of our action types or act other actions that our action creators create so the first action crater that we're going to create is the crate to do so let's first make an interface the type for this and I'm going to just call this crate to do type I guess we could call it crater to action type because that's technically more accurate and every action type will have a type which is gonna be a string and also a optional payload so we will say this type will be how can we do this so we know this can be a string but when I look at the Redux the documentation what they did that I kind of liked is they just did type of and the constant that we have declared up here so this will let me know there is a string but you know it's kind of a little bit more fancy and it is how the official documentation did it so I will choose to do it this way as well the payload for this will be for crate to do it's gonna have it's gonna be an object with two things the ID the description the deac I mean and also whether it is is complete the boolean value but so that's gonna be the type of our to do that we have already defined that comes with this application is starting code within this page right here type DDS are type file so we're just gonna import this to do type and use it and when we type our action creator so let's import that first here import to do from let's see where is it type that's it so that's what the type of our payload is gonna be now that we have defined the action type for our crate to do action crater let's define our action crater and let me just sorry about that let me make this fullscreen so that you guys have we have more real estate all right so export const without me export is because we will be using it in our app component later create to do action crater that will be the name of it and all of our all of my action traders will receive an object as a parameter and I'm just gonna call this sorry about that I'm just gonna call this object data for every single action crater just to be consistent so this may not be the most optimum way or the most fast way of doing things but I like things consistent and that's one of the purposes of redox is that everything is consistent so all of our action credit will get our parameter that is an object that we will call data and we will say for this what does the crater do action crater need the only thing that it needs is the description which will be a string the name of that to do and this will this will be a function that outputs the Craig whoops the outputs are created to do action type because it returns an action and let's see what can we do let me first see structure this description from our data const description from the data now with this data we're gonna return in action return an object with type create to do that we'll make use out of our content up here and then a payload as an object it's gonna have an ID and we are gonna make a random ID using the UUID our package that this starting kit already came with they starting our repo already king with so let's import that up here import I'm just gonna get b1 from you ID so whether you that is v1 and let's just call this UUID from UUID like so now whenever we want to call that to create a unique ID all we gotta do is UUID and invoke that function like so and we're gonna have a description which we will get a description from our data however because we could use es6 and this description this description the same name we could just keep it as that like so and also is complete whenever we create on you to do will always start off as false so that is our crate to do action creator let's create our edit to do exit crater by first creating the type of it edit to do action type this one will be type type of edit to do and also it will have a payload for this one it will have a payload of ID or string because we had to know which are to do that we reading and the new description is gonna have a string as well and let's see this what this is the action type and then let's create the function the action crater export const edit to do action crater to be consistent again we're gonna always have data as a parameter but this one has an ID which is a string and a description which is also a string like so that is the type of our parameter and this will output edit to do action type that we have just defined we're gonna use es6 notation just like before let's first again the structure the ID and the description from our data now we're probably going to be doing this everywhere that we have this data so instead of wasting this line of code here and wasting a line across this structure in here we could just the structure from our parameter to why don't we just do that let's get this and this structure here that cleans up our code somewhat and we could do the same thing here let's grab these 2d structuring and just the structure from a parameter and in this way we could say return we're gonna return the ID we can use es6 notation by not putting a key value pair because he has the same name and also the description you could just return it like that as a matter of fact we could just put all of these return in one line like so now I'm getting a little air here and he says here is now assignable a little bit known properties hmm I'm getting an error here because I didn't format my action correctly action must always have a type I'm sorry about this and our type will be edit to do and our payload is going to be it will have an ID that would mean use es6 notation to not write the key value pair and also the description so now we have typed it correctly and now let's move on to our toggle action type interface toggle action type type of type of table all to do and a payload in this case will be ID string and it's complete but U is complete value and this will be a boolean so a lot of boilerplate hopefully you guys are already seeing this now export Const tar go to do action crater we want the structure right away the ID and description from our parameter now the type of this is going to be ID is coming to your string description is going to be a string as well or whoops I'm sorry another description is going to be is complete it is complete and this will output a toggle action type and we will return right away type of toggle to do and a payload of ID and is complete like so now I'm getting an error here because this is not a string this is actually a boolean sorry about that I'm just kind of looking up here as reference and I'm just copying it too much so we are done with the toggle to do and now let's move on to our delete to do interface delete to do action type did I put too loose here yeah Eddie to do great to do so let's also call this toggle to do action type I'm gonna grab this and one night where I use it here and I'm just gonna move my cursor and put toggle to do action type like so tie what to do action crater there we go delete to do action type type type of delete to do payload in this case the only thing we need here is the ID which will be a string and then export can't delete to do action crater you want destruction right away the ID and the type of our parameter is just ID which is a string and this will output or delete to do action type and we will return type of action crater I just completely spelled this wrong type is gonna be delete to do and the payload returned in Rome and payload payload is gonna be just the ID like so let me run pretty down there real quick all right so we are finally done with our action craters for our to do state now for our select to do state we need just one action crater and I'm gonna call this we first I'll give it a type select to do action type and this one will be a type type of select to do and a payload is going to be just the ID like so and X or const select to do action creator this will just have an ID will D structure the ID and the type of this is going to be ID which is a string and we're going to output select to do action type and we will return right away type select to do and the payload of ID now I am getting air here I'm not sure why because I put I s here I'm guys I'm really sorry about these typos it's just I'm writing so much redundant code right now that my page is kind of turning off I'll try to get better from now on but pretty much we are done with our action action types and our action creators so now we are going to move on to our reducers so we're gonna create three reducers and we're gonna use combine reduces from then to combine them later the three reducers will correspond to the three states that we have the to do States the list of to do is the select it to do state which will just give us the ID of that's to do that is selected and also the counter that keeps track of all the number of the many times that we have mutated our to do list okay so let's first create the to do reducer and I will export this as well export Const or let me first write it here that we are now in the reducer section just to make sure we don't get confused export Const to deuce reducer I'm not sure if I actually need to export this no you know what I'm not gonna export this I'm just gonna clear it as constitutes reducers and reducers will always receive a state and the state that we are dealing with is a list of two deuce this type we got it from our type definition file and let's see we also this is very important whenever we're creating reduces a traditional way we must always give a default value to our state otherwise we're now get an error so the default value typically just put an empty array like this and we're also gonna have an action now what type it if you're going to type this action what's the type that this to do sweet reducer okay so let's create that first and I created right above our to do this reducer now call this type to do action types and you'll be a combination of the crate to do action type we have defined above or edit to do action type or target to do actual type or the link to do action type so so now our action will be one of these types okay now that's what we turn a function like so and let's see we have to put our switch cause scenario here but before we go on I don't want to initialize my list to do this as an empty array because that means every time i refresh this page I gotta create a bunch of these so let's just put as an initial state let's put this learn react to run redox and run redox toolkit in our initial state so the way that I am going to do that is go back to the app component and go to the index dot TSX it kind of looks like this the long one and you see this list of two dues here let's just make this our initial to do state so I'm just gonna copy this you could cut it out to I think now but that's gonna break our code so let's just copy this right above our reduce or right below this line and I'm gonna paste that in we already have UID imported so nothing's breaking we could invoke that function here without any trouble and instead of colonists constitutes let's call this two deuce initial state and we will default or state with two dues initial state I think that's better now we're gonna have a switch case situation here so switch we're going to switch the action type our first case is gonna be great to do if this is the case what do we want to do now without read up toolkit one thing very important that we have to do within our reducers and this is nothing new this has been part of redox for the longest time we can't mutate our state parameter directly we have to return a new state that has not mutated the previous state so this is where sometimes it can get a little bit tricky and a little bit tedious to write all this but you know what we just have to deal with it so when we're creating what to do what we do is we spread the previous state that we have the list of to do is that we have and new to do that we got that is within our action that payload let's just attack that on on the end of the array like so now that's gonna be our crate to do case our second case is gonna be edit to do and how do we edit the to do so let me before we go on let me first extract I'm going you're gonna be seeing this action a payload everywhere as a matter of fact why don't we just extract the type nd payload from our action like so payload now type and payload like so that way we could just say switch type and return add the payload to our array that we're returning now for the edit to do let's do this we got a fine go through our list of our state or list of to deuce find the ID that corresponds to our table that's in our payload and then just only update that one while keeping every other to do syntax so the way that I'm gonna do that is I'm going to return state that map map always returns a new version of our array we will loop through our two dues and we will do this if to do the ID is equal to our payloads ID then we will give it all new to do dot-dot-dot to do with the arm let's see what's within our payload within our payload I believe for the Edit to do let's see it's like to do toggle edit we had a description right so the only thing that an update is a description so description is gonna be payload that description like so now I'm getting an error why is that you know what I changed my mind I'm sorry about this I'm just gonna do put action type that here I'm not gonna destructure it from our parameter I'm just gonna call this make this as action and I'm gonna do structure it after just I'm not the structure here cuz payload action like six so the reason why type school was airing out because it didn't associate our case situation with our payload so it didn't know that our payload now has a description that's why I'm going back to this way of writing things it's cuz the typescript but it's not too bad so I will keep it as this otherwise if they're to do the idea that we're iterating over is equal to the payload ID we will give a new pelo we will give a new to do where we update the description like so otherwise we just return back to do cuz we don't care about it to do so this is how we edit or to do let me run prettier I'm going to real quick now let's do a case toggle to do and this will look very similar to our edit to do when we first see structure out the payload from our action and return state that map to do to do the ID is triple equals to the payload ID if that is the case the structurally to do and then instead of the description this time when do is complete it's gonna be halo that is complete else if our to do is not the ID that we're iterating over then just get back to do okay so we have one more case here I mean besides the default case case delete to do cast payload from the action run pretty real real quick and then return so how do we delete a element in an array so the way down and days are not invoke the filter function filter method upon our array so state that filter we're going to iterate over to dues and I'm going to filter in all the to dues whose ID is not equal to the ID within our payload ID like so so this is our to do this reducer now if I continue building my other reducers we're leaving this as it is then I will run into an error because I forgot the default as all to do is redo all reducers must have a default case so our default is just going to return if I could just spell it correctly we're gonna return just the state itself so now we are done with our teachers reducer let's now create the other reducers too let's create our select two reducer so we will first give it a pipe select it to do action types but this will only have one select it to do action type like so now let's define our reducer select it to do we do sir it's gonna be a state we're gonna initialize this as no however we gotta be very careful because of type squared let me first write out the action this is going to be a selected to do action types and this will return a function let me run pretty real quick okay so why is this dangerous look at what look at what types greetings our status right now now touch clear only things the state is gonna be a node type but that's not true it could also be a number of string type right because it's the ID so we can say that this will be either a string or no like so now just like before we're gonna switch the action type and then we're gonna have case what's our case or select to do then you put curly brace then we're gonna first always the structure the payload from our action and return what do we want to return we just want to return the payload that ID which is a string as you can see here and we need a default case so default will just be return state like so we will also have our final reducer but this one let's see we don't let me just define a reducer without defining the type Const counter counter reducer this will be a state and this will the state will always be a number which we will default as 0 and the action for this notice we didn't define an action type that we typically do for other reducers and the reason is because the action types that he's interested in are actually all the action ties for the to do is reduced her he kept the counter reduced her Karen's body crate to do an action type Hedy to do action type toggle to two action type and delete to the action type so let's just write to do action types here that because those are the types that he's interested in we will switch the action that type and again case great to do then we want to what do we want to do we want to increment return state plus one we're going to see a lot of redundancies here case edit to do we also want to return state plus one case toggle to do return state plus one and finally the case or not finally because we have one more actually the default state return state plus 1 and T for which we cannot forget about it's just gonna return the state ok we are finally done with all of our reducers here are our three reducers and now we're gonna combine the reducers and which I will put in a variable called reducers but we got our first import combined reducers first from redux let's bring that over here where can we get it oh we don't have any widow's enforce it right now huh so let's put that on top of the file which will call import combined reducers from redux now let's make use out of that here combined reducers put an object inside which will get a bunch of key value pairs let's see I will call my first state the Lissa to do is just to do this and to do this reducer and then select it to do it's my second state select it to the reducer and finally the counter just gonna be the counter producer like so okay so now that we have these reducers that is combined all into one what we have to do is we gotta feed this into our store right so we have to define we had to create a store and we will export it out of this file as a default export and we will use that in our outer index hsx file but before we use this we gotta get the Christ or from redux great store and we will make this the default export is the store export default create store this needs the reducers that we have created it as both and we could we will have middlewares in a bit but let's just make sure that this works let me save okay so let's make use let's plug the store into our provider let's go to our index outer index our TSX let me zoom in here real quick okay so we have to put a provider here but let's import that first from our react Redux that we have installed I'm going to put it just below our react Tom import I will say import provider from react Redux and let's make use out of this put the provider wrapper here oh the store just in the store but let me just ignore that for now and close it surround our app with it now we need to give a store prop to this and we're just going to import the store from our Redux OG file like so and we'll feed that to our provider so now everything should be connected however there's no way for us to tell because one our redox dev tools is not connected we didn't install that nor do we even are we making use out of the logger a middleware that we have installed so let's start connecting those middlewares to our redox stop our toolkit not not our toolkit what do we call this our provider so I'm gonna go back to my redox doji because there has my crate store call right here at the very bottom and let's go back to this file and we are going to give this a series of middleware so the first two middleware that I'm thinking about is let me just put it right here the dunk from redox dunk now for transparency we're not gonna be making any tank action creators no no tom functions here however I'm just doing this cuz the read of two kids by default comes with redox dunk and so and most applications again typically uses read uses our redox tongue so you know I'll just show you guys how we could connect our redox with redox tongue and we're also gonna import logger from redox logger this will just put nice things in our in our console in our terminal so took T I'll come to add the middleware here we have to first import this thing called apply middleware from redux and we also need one more thing let me see what that's called redox stop Jesta org it's including me right now and in my defense there's just so much things so much boilerplate connected with redox that there's it's impossible really to just remember all these things at the one day I'm thinking about is compose so let's import compose from redox so how do we add our middleware to our store so I'm just gonna copy this right here and we will say let me just do it make it like that put a comma here let's make it a little bit neater by putting lines like that and we will put compose apply middleware that is thunk and also apply middleware that is logger like so so a lot of stuff that we have to do now we didn't even install the dev tools now fortunately for us the Redux dev tools it came with this new import that does this compose function for our for us so let's just import that it's called let me import it right below these guys import compose with dev tools from redux Deftones extension like so for screen this now that we're gonna use it use this compose with dev tools function we don't need the original compose from redox so how we use this is we put compose with dev tools instead and we put these apply middleware dunk and apply middleware logger inside and stay as a matter of fact I made a slight mistake when you apply middleware you could just give the middlewares as arguments like so you don't need to apply middlewares so this is all that you need apply middleware don't come along like so now I think our store is finally connected and we can see it do you see this green light is all lit up so that means our redux that tools is connected finally let me just open this up so that is easier for us to see let's check out our initial State or - duze has the three to do is that we are populated Li with if you guys can see that or selected to do is no and our counter is T 42 0 so this is good obviously none of our buns still work because we didn't connect any of our action traders to it but we will do that soon enough but you know is fortunate all this code that we have right here we have two hundred four lines of code inside our redox - OD file this is all the boilerplate that we needed to connect Redux to our application now that that is finally done and out of the way let's go back to our app component functional component file we don't need this - duze in that very top so let's get rid of that and we don't need these hard-coded instincts right here select it to do ID and the edit account so let's get rid of those I don't think we need those UUID import and do I need that to do type I think I do so I'll just keep that for now however I need a couple things from the react Redux library and by the way I am NOT gonna be using the traditional putting the connect and the math dispatch - props matte state - props all that stuff I'm gonna be using the hooks that we have Redux library comes with nowadays so let's do import let's see from react Redux we will import you selector to select things from our store or state and also use dispatch to get the dispatch function okay so at the very top I'm going to declare cons of our phone of our functional component Const use this pattern I'm sorry dispatch is equal from use dispatch now with that now we have access to the dispatch function we are also going to select each of our state's from our store so the way that we're going to do that is I'm going to clear const to do is it's gonna be let's see use selector and we have a pass enough function here the state by the way this state right now touch doesn't know what file it is so let's type our state or state of our store and we're gonna make use going back to our type file we're gonna make use of the state type that we have a new so far so let's import that first go back to our component not only do we want to do from our type file but we also want a state state and we all that we want you just want to select the introduce like so that we'll be able to do and can't selected to do ID will be you selector state state state that selected to do tranced let's see what else do we mean what did I call the counter variable before I call it at the Edit account so Const edit account you select their state state state counter like so now let's see if we still see order to do's and we see them here however because our initial value of our selected to do is no nothing is selected here anymore and we have our empty statement here it says no to do selected so now I know that it is connected now let's start using our action craters one by one now first import that at the very top right below our react Redux import let's import our action creators from what file was that called redox - OG although it should be from like we gotta go up a directory and then get it from redox IOT like so we have the crate to do action crater we have the edit to the excellent crater the toggle to the action trader you need to do the accent creator and you select to do accent crater let's run pretty round that okay so let's go through these one by one let me try making it like this so that we have some space and we can see what's going on okay so our first event handler our method is called the handle new input change we don't need to change anything here because they all this is doing is updating our state variable which is new to do input so let's move on to our next event handler which is handle edit input change and this pretty much the same thing all it does is it updates our state what we are interested in right now is the handle create new to do in this method we will dispatch the you to do that we have just created and before we do anything though before we create on YouTube we're gonna first check to make sure that we have some string values within our duty to input so we will say if not new to do input that length if there is nothing there if it's just an empty string we will return I don't even need this curly brace here just return like so do nothing otherwise we will say dispatch we will dispatch on action using our action crater and the one that we want is the crate to do action crater dispatch crate to do action crater and what does this receive okay I might autocomplete we need a description so a description is gonna be the new to do input like so that's all that we need and within our action crater we generate our unique ID and also setup is complete value as false once we have done that we got a reset our new to the input back to Anam b-string for better UX experience and I think that's it now let's see if that works I'm gonna go back to my browser let's type in tests I click click rate and we got a new one here so now it is working as a matter of fact if we open up our dev tools right here I look at my state change check this out right here did you see this great to do let's refresh and see if that gets logged here so testing and now you see this crater do we could create another one and we see more so that is good let's go back to finishing our events we have handle select to do now this one looks kind of weird like this hopefully you guys are kind of used to this for the handle select to do where is it this gets called whenever we click on one of these here up within our list and you can see it here however we have to know which to do we have selected that is why I'm giving it a parameter of the ID of the to do right here you can see that right here so we have a for our handle select to do it gets a parameter which is a to do ID and returns a function because all of our event handlers have to be a reference to a function so that's what we're gonna do here now we gotta find that to do that we have selected but now we already know the idea of it so all we gotta do is just dispatch the select to do action crater this takes an object as always and all the cares about is the ID it's not will say ID is to do ID like so let's see if that works now refresh the page I click on these and now you can see these popping up here what if we create a new one and we can select that one as well so that is working now and it's Intendant that's good we could ignore the use of fact as I said before handle the update so what handle update does is once we click Edit and we want to edit this value here once we click this it will call this heaven update method here so we first got a check just like the crate the crate you to do we gotta say if edit to do input that linked or if there is no length to it then we're just gonna return not do anything actually do we just want to return hmm I don't think we want to return because then what's gonna happen let me show you guys what happens we go back here I edit this I empty it out I click update and nothing happens so if we click after here I guess the best user experience is to show an error message but I don't want to waste time writing all the error message out right now so all I'm gonna do if this is the case we will say we will do something we will do handle cancel update right here do I want to give an e this e will become optional because we're inside called this e here to handle oh actually we have a e no no so this handle cancel out they expect some Mouse event from HM upon element however we don't have access to the e parameter here so to a piece type script we're gonna say that this e is optional and if it exists will prevent the default Excel otherwise we'll just call it without the parameter and now that we have done that we're just coming with turn not do anything else let's see if that works edit what if we made it empty we update and it does nothing all right so that's better than erring up okay so or not doing anything now assuming that there is a link to it we want to update it right so we will say dispatch edit to do action crater what does this need ID which is gonna be our selected a to do ID like so and description is going to be our edit to do input like so now this is airing out because it thinks or the idea that it that this edit to do escalator needs is a string and that string has to be there however are selected to do ID could either be a string or not so we must also have a check here where we say or not selected ID to do ID if that also doesn't exist then just return cancel update and return so now it's no longer in now because the moment we get to this line we know for a fact how to play knows for a fact that selected to do ID is not know so that's good I think that will work let's see if that works let me write test here that's edit that was her to do something that we want to do master we docked okay how about that we click update and it's here however it's not getting rid of this we want to get rid of this file go back to the new editing mode so let's take care of that here where are we after we dispatch we're going to set set to do edit to do set is edit mode back to false and set edit to do input back to an empty string like so let's see if that works I'm gonna edit this to master update and it goes back to this and we could edit something else and everything's fine so that's good okay now hand the cancer updates already done we know that because if I click cancel here your scores back to where we were we got to handle table or not I already added here if not selected to do ID or not selected to do what what is this likely to do is using our selected to do ID up here if I could find it if we have a selected to do ID then we find the to do that we have selected from our to do so ray or we set it as null so that's what it's selected to do is and where were we we are here hang a taco so if they don't exist and don't do anything cuz we got nothing to select we don't know what to select but if they do exist all we're gonna do is this toggle let's see what do we want to do a handle no toggle to do action crater I feel like I'm missing something ah yes sorry I thought this was about selecting this is actually about toggling so we first check does he have a 2d idea or a selected to do then don't do anything because we need to to talk or something we must have what to do selected so if we have a to do selected what does this need in this ID and is complete so ID will be the selected to do ID and then he is complete it's going to be the opposite of our selected to do that is complete like so so let's see if that works I go here and I toggle and now the structure is gone the structure is back so it seems to be working and by the way I don't know if you guys noticed this but every single time I do an action like so you see this counter going up so every time we toggle that counter is going up and if I delete this that counter also goes up out of course I can't delete it because I didn't handle that yet if I edit this don't this was a 31 now we are 32 if we create one that count goes up as well so that's why this counter does now let's get our last method out of the way if selected to do ID doesn't exist and return otherwise dispatch delete to do action crater with ID it's gonna be the selected to do ID like so technically after this we should unselect a selected one because the selected ID is no longer exist however it's not gonna break our code so it's fine I'll leave it as it is let me test this out testing let's delete this one and that works and also this counter went out too so we are finally done with this application by the way if you guys worked about what the lover does that's what this does here open up your terminal every time you perform an action it locks this do you see this I toggle it tells us what action was past it tells us the previous state of our store and the next state of our store that's what this logger dependency this middleware does for us so it couldn't be useful if you want this type of stuff but sometimes you'll also get very overwhelming especially if a big application with that of redock store our state being updated okay so this was up by the way we don't need this type here so let's just get rid of the import this was setting up a Redux application using the traditional way of setting up a redox tour of first creating or read our constants action types the constants related to our action types the are typing each of our actions and also creating action craters for all of our actions or actions that we have and then we go down here creating all of our reducers with this crazy initialization state these switch and case statements making sure that we don't forget about a default and then combine the reducers later and then finally calling this create store function that Redux comes with adding our reducers in here and also adding our middleware inside here using all of these complicated logic right here so Redux the next thing we're gonna do is we're gonna try to implement the same thing using redux toolkit now let me in case you guys are kind of burning out because this was kind of long it won't be as long as this one or hence the reason why we have soaked it can be so beneficial for us not only that our app that index is done so once we finish our read of sake the only thing we gotta do is change our crate to do action crater and all these edited reaction crater and all these stuff with the absent craters that are redox token has all gives us so don't worry too much we don't have to do all these event handlers anymore we're done with this okay so now let's go back to our source file and make a new file this will be similar to the redox - oh gee we will call this one redox - toolkit that TS so we are gonna implement pretty much the same thing we have in this redox og file inside our redox toolkit file but before we do that we must first install redox toolkit so let's open up our terminal to NPM I redox toolkit actually it's actually - what was it let me just get mine it's gonna be at redox j/s slash toolkit now we already have we are because of our first way that we set up the store we manually install the dev tools we manually install the redox dunk and we also installed Redux but if you were to not go that path and start this application using widows took it you don't have to install any of those the only thing you gotta install is the redox toolkit and also react redox so - just finished so let's first import all right so we're gonna import a couple things from our handy redox toolkit I mean for just first write redox j/s toolkit here and I am getting import from redox toolkit so what are the couple things that we want to use so we let's just first let's import the things as we use them so the first thing we're gonna use is this great slice so again this creates slice as I mentioned before is it will pretty much combine this is a super useful way and a handy way in an efficient way of combining our action constant remember we created the constants in our redox og file all these concepts that we have here we have the variable name and the string pretty much the same thing a lot of boilerplate here then we created the action types for each of our actions and look how returning this us we know that every single action type is gonna have a type right so but we still have to put a type manual here put a payload here create all of our action creators and then we go finally create all of our reducers so we don't have to do all of this with using the redux okay the only thing we're gonna do is think about these slices of our store our state the slice of - duze we have three states right we have the two deuce we have the selected to do and we have the counter so we just have to use this crease lice function upon those three plays and it will automatically generate the action type constants the action creators all we gotta do is give it the reducers and we don't have to do this crazy switch case statement make sure that we have our initial state for everything otherwise our custom our codes gonna break and also have this default because again our clothes gonna break if you don't have this redox tool kit will prevent us from doing a lot of that stuff now I might regret doing this right now but just for comparison let me open this side by side like so and let's zoom in post Chris full screen this right here all right we don't need a terminal so let's close that hopefully you guys can still seek correctly let me just put a little bit more space upon here now again I guess we don't need our directory folders anymore for now so first thing we gotta do is do you remember within our crate to do I mean our to do reducer we gave an initial value of this the two deuce initial state which we got here right so let's just copy this because we're gonna use these initial state for our to do for our widows toolkit version two so let's just paste that in my IDE automatically import it out to do type form type and the v1 su ID from the UID file so if you don't have this make sure you import these two as well and just to be proper I like putting these imports in the top and my own imports but the bottom now let's create our first slice function we will call this what do it should we call this d2 deuce it's not college seduce you call it reduce let's call it to this slice create slice exception object of couple required key value pairs the first one that it needs is the name and we will give this name to dues name - - - deuce how about to deuce and initial state we gotta give it an initial state so instead of doing this vague parameter default state that we could always forget about cray slice requires us to give it our initial state like this so that we can no way forget otherwise our code error will give us an error message like so so we will say this will be initial state will be initial state and then we do sirs is our final thing that we need and we have a couple reducers for our - dues right we have the crate to do Eddie to do toggle to do it and delete to do right I don't want to start out with the crate to do because we're gonna do a little bit different something different for that later so let's start out with our Eddie to do now we don't need to do all the switch-case situation what this reducers takes it takes an object of key value pairs the key will be the name of our action type that it will automatically generate for us and the I'll the value is gonna be a function that gets returned with the action type with the action that a sense so our first reducer is gonna be edit skipping the creep we don't need to use capital case anymore because the reason why we use capital case a pin are within the traditional way of creating a Redux application it's cuz we're putting them in constant strings like this and the tradition is whenever you have constant strings like this you put them in a capital variable name like so but because we don't have those anymore we don't need to use all these crazy capital case any longer oh so our edit will be this gets a state and this state corresponds to our initial state so if I hover over this state hover over later doesn't know about it yet so let's see what do we need to give you know we also gotta give it an action this will be the action the type and the payload to type this now do you remember how we typed it before we had this type and the payload right so read up Stoke it comes with this handy import which is called which I will import here and it's called a payload action type so all we gotta do to type our action is holidays and pretty much within these triangle brackets we just have to type our payload so uh when you use crate slice you the action must always have a payload within the old way of doing things the payload keyword was optional you couldn't call just as easily call this anything else but here you must have a payload and you will automatically create a payload for us now the good thing about using this payload action is we don't have to give it a type or property type for our type file all the time this will automatically handle that for us so they are edit to do action type is just this the idea of string require and description string required like so and what we do is we're going to return a function so let's see what we want to do now if you'll remember what I said and by the way let's check out the type of our state as you can see it's just a list to do this so if you remember in the very beginning what I said the Kuantan good about this redox toolkit is it comes with the Emer library where we can mutate quote-unquote mutate or state value directly instead of returning on immutable State like what we do where do we do it or edit to do these are action craters go back to our reducers yeah he's here we call this map function here because we don't want to mutate or initial state but because of Emer we now have the ability to mute it our straight corn called mute e our state directly and Emma will take care of that and gave us an immutable state oh man couldn't cope magically in the backend you could also traditional way if you want but let's take advantage of using Emmer here so what we gotta do is we gotta first find the within our state the to do that we ready so let's do that here we will say before we go on that's oh let's talk about what our action is so let me hover over this it has a payload just like before that we have tried to here and he also has a type but which we will probably never use within our reducers so at least within this function here we all use it elsewhere but let's see what do I want to do I want to first define our state is an array right I gotta find the ID associated within our state so let's do that right now I will say before that let me just D structure the payload and why don't we just destructure the payload from our action here like so we won't have the issue that we have a tie scale earlier if you remember so we could do that here directly okay so we will say count let's find the index index is gonna be state dot and I'll call the fine index method and we want to get the - duze ID whose to do ID is equal to our payloads ID like so so if this fine index didn't find any to do with the same idea that we had it for whatever reason then we have an error right and if that was the case this index will equal negative 1 so if we will say index is not equal to negative 1 then and only then we will do something because if it's not equal to negative 1 time as we did find out valid index so we will say what do we want to do we know we are updating the description right of our state so let's get our state add the index that we found and we will mutate its description directly by updating it with payload of the description now this will never work in the traditional way without Emer but because of Emer we commuted it directly and not return anything and Emer will magically convert this and update our state for us hey guys this is me from the future I was adding my video and I real I was wondering for myself while I use this fine index by the way let's look at this one right now this is our spoiler territory right here so don't look at that please so on the Edit look at what I'm doing here I am using the fine index method to find the index and if we have found the index I updated like this but however we don't have to do it like this as a matter of fact I think this is more confusing on hindsight so if I were to go back in time and do this what I would have done is just instead of calling define index just call the find function on it like find method on it like this and instead of it being an index now we will either have the to do to edit let's just call it to do to edit and if we hover over this this will either be the to do that we have found successfully or if we didn't buy anything you'll be undefined so what we can do now is if to do to edit exists then instead of doing all this nonsense here all we gotta do is to do to edit that description is gonna be payload by the description I think this is much cleaner and by the way this only works right here this mutation right here only works because of Emer keep that in mind you can't do this without redux toolkit so I think this is much cleaner and if you look at my sneak peek preview of the toggle you could do the same thing here maybe call it like tulu to toggle and other stuff and if to do the toggle exists then update it again I'm sorry there I use this fine index however the finding next still works so it's not an issue it's just that for clarity I think the state I find is a much cleaner solution then the solution that I have had on the video anyway specs the video so that is or edit we are done with that reducer let's do our we delete removes reducer or our toggle reducer and you will look very similar to this so let's see we first get a state we want is structure the payload former action use the payload action and this one gets an ID of string on our description and this case is complete Chisa folia okay so let's do the same thing Khan's index let's find the index I'm just going to bring this code over here and if index is not equal to negative 1 we will say state that index that is complete it's going to be payload that is complete like so so already hopefully you guys are seeing that this is much easier to do than this map properly and all that stuff we also have a delete to do now again here's another thing that I forgot to mention look how simple these keys are right now we're just we're not calling this edit to do we're not calling this toggle to do we had to do that here because imagine if we had a very big application let's say we had our state of two do's and we are just two State or products of the users you can each of them will have an edit action trader each of them will have a crate and all that stuff that's why we gotta get description names to our action type however and I will show you guys in a bit we don't have to do that any longer with this to do slice and the key is that it gets this name - and you magically automatically create us or give us a new unique identifying way of distinguishing our action creators or action types I'll show you guys that in a bit but I initially was tempted to call this key delete but we can't call Italy all delete costly is a reserved keyword in JavaScript so let's just call this remove instead like so state payload what is the payload of our delete hello action and I think it's just the ID let's see yes so this will return should we do this okay so remove is actually notice here we are filtering all the two dues whose ID is not equal to our Palos ID we don't have to do that here what we have to do and I'm not sure why I'm getting an error oh it's because I should have comma here instead okay sorry about that okay so this is actually very easy to do let's find first our index just like before so I'm gonna grab this line of code where we find the index and we will say if index is not equal to negative one then and only then we will say stayed at index how do we delete this one actually we don't even need to do that we could say we could use the splice method that arrays comes with in JavaScript so splice it takes two parameters required we first keep the starting index which will give the index and we give to the lee count how many elements starting from the index do we want to leave now we just only want to delete one and the good thing about this splice method is that it our mutates our array in place without returning a new array so in a typical old-school way of creating on Redux application you will never use splicing a reducer you will do something like a slice or a filter or map but you will never use splice however we could do it here and our code I think it looks much cleaner and another good thing is we don't need to give it a default stay here all this boilerplate here putting a default on every single one of our reducers we don't need to do that here there's another good thing about this Chris slice but now let's take care of our great reducer that we have skipped in the beginning so this again a little take a state as a state and a second parameter is we want this structure right away the payload payload action and the only thing that we're getting within our payload is the description which will a string but now we have a problem and just make sure that my editors start complaining to me one key aspect is remember this crystallize it automatically creates us action creators or associated with our reducers however how would the action creator that automatic crate give us let's look at the action creator for our crate within our old way of doing things notice how we invoked on UUID function here we gave up we generate a random ID and we put it into our pillow called the ID how are we possibly going to do that within our reducer because we don't we don't create the action creators ourselves this appraised slice a function creates the action creators for us so how does he do this for us and the answer is it can't by default it can't unless we explicitly are told it to be by using the crate or what was a crate action and a crate reducer that this toolkit library comes with unless we don't use that with using a crease lights we gotta take a different approach so this reducers key takes a key value pairs the key is the action type name and the value is typically we're giving enough function oh we could set this up a different way and another way that we can set this up is not just putting a function there but an object so that's what we're gonna do here instead of giving the value of this key a function like what we did here we're gonna give it an object instead like so and this object that we could use has two keys once called the reducer which is all that we do so that we were making so far and the next one that's interest to us is call to prepare so what this prepare does is it gets our action and it prepares our action in a way that our reducer can use it so with the reason why we're doing this because reducers have to be pure but by creating this random ID within our reduce or yourself we are no longer making our reducer pure and that goes against the laws of reducer so that's when we have to use this fancy way of another way of creating using this crease lice so let's start out with our prepare first so what prepared does is it gets the action type that are automatically generated educator has given us and we feed it a couple more properties into the payload okay so let's do this let's first see structure the parameter that receives is the payload that this action type data our action crater automatically generated for us and the only one that we are interested in is a description and we're gonna type this description is a string which is structuring it right away from our payload and we're just gonna return a new payload right away therefore I won't have all this return stuff going on here and the new payload we got a given an object with the payload key this will be our new payload and that is gonna have an ID which we will call you UID you will have a description that we get from our parameter and also it's complete by default will be false let me run prettier on this but I can't I might be miss eyes because I have something here okay so now this crate goes to the prepare function first makes a new payload and that payload in turn gets fed to our reducer here so now we can say state and also our the structure the payload pelo action and because this reducer went through our prepare function here first we now have access to the ID which we created here we have the description and we also ops yeah and we also have is complete which is a podium like so I must put a comma here there we go let me run trader on it real quick and let's edit this slide I'll code right here oh I don't like how that looks whatever okay so what do we want to do so now that and again we are doing this because they are because action craters are automatically generated for us there was no place for us to give this random on pure function call within our reducer so that's why we're doing this alternate way of setting up our reducers within our trace slice this prepared that prepares our payload no certain way that we desire and then we get in turn gives it to this reducer very handy alright so we are just gonna let's see we're gonna put our ad what do we do we did not create reducer in the old way of doing it we spread the old state because we can't mutate it and we gave it a new payload right however here we could do something much more simple all we got to do because of Emer we just do state that push that would never be able to be allowed in the old way of doing things however because of Emmer we could do this now and the only thing we're pushing up or pushing now is payload like so now this is our to do slice so this is finished now let's go ahead and create our other slice functions next one will be can't selected to do slice great slice required we gotta give it a name I'll call this selected to do we gotta give it an initial state we got something special here just like before let me go down on my old with Redux file and notice what we did for the state we defaulted as no but we explicitly typed it telling touch screen know that is not only no because be a string so we got something similar here the way that we do that is we did water as no but we let touch screen know that this could be either string or no like so and our reducers you only have one reducer here select state action it's gonna be payload action ID is gonna do a string and let's the structure just a payload right away from our action and we will just you will be tempted right now by though it is very important right now our initial state unlike our two deuce slice in our to do slice our initial state was in our a meaning and arrays are objects right objects and arrays because of rays are objects they're they're not primitive values so typically you weren't able to mutate like this but what amor does for us is it takes non primitive values like objects and arrays and when we mutate them directly like this it cannot insist on magic and gives us an immutable return object so there are redox won't complain about it however the state that we're dealing with here in the selected to do slice it's not an object it is a primitive value both string and not our primitive values so if he turned off your brain for a second you got use this redox token a way of doing things you might be tempted as I was just to do let's see state what do we do state is equal to the payload the ID mutate the state directly like this however this will not work with primitive values as a state oh this is I was actually talking with the maintainer of redox token and the whole redox library in general all about this I was hoping that this could work but he explained to me that this is actually impossible to do so unfortunately you can't do this so when you're dealing with primitive values in the state just do it a typical way of just returning the news date we're gonna say we're just gonna return right away the payload the ID like so so that's wanting to watch out for hopefully that made sense now that's our selected to do slice very short and concise and we have our final a slice which is called a counter so can't counter slice great slice and hopefully this example will show you why I made this random counter in my application so this reducer is a little bit different because look at what is happening in our LG file it's getting the action types from another section of the store these crate to do edit to toggle to the deli to do these aren't actually associated with its own slice with those are the what is it's called the counter part of our store if these are related to the - duze right so how does he the way that the trace slice is set up is it only gets the the action types associated with this own slice with its own state however this crease like this contra slice needs action types are actions that is from the other states other states which is from here so how can we configure that here so actually the maintainer of read of stroke he thought about that and he added or extra handy key value pair that we could create within our put within the pre-sliced function and that's what we're gonna do here so we have first we always got to give it a name which we will just call counter initial state is going to be a 0 and reducer she actually doesn't have his own reducers right so we gotta just put an empty array like so now the extra optional key that we are going to make use out of this for this crease lice method to set other action types or unrelated to its own state is extra reducers so here we could explicitly give key value pairs just like the others reducers right here except as a key we reference other action types from other reducers so how do we what is the action type for example this crate within the crates - ah - do slice so the way that we get that is and remember we never defined action type constants like our inner LG file all these are boilerplate nonsense here so the way that we get the action type of our crate to do action type is we do this we have our to do slice that we created in this crate slice method here and it in turn has if you see these autocomplete has actions and it now want you to get that it references all the actions that it has the one that we are interested in is correct and if you do it like this remember this objects are key value pair if you put square brackets that's saying that the variable or variable here will become your new key right so normally this was a JavaScript application you could just do it like this and we'll reference that action type of the crate to do action however because we're dealing with the typescript file and theis Cree or something like this what we have to do is just do dot type get the type of it and now it's no longer complaining to us so if it gets this what we're gonna do is we're just going to update our state like so just add it by one increment it not only that we also got to do it for all the other actions actions or edit type state state plus one to do slice actions Tahoe type state state plus one and to slice the action stop can delete or we don't have the employees calling move now because - these are reserved keyword a state state nice one and again I'm returning the output of our stay here because we're dealing with a primitive state so we can't do like the quote unquote mutating the state we got a return here and that's it for our reducers now we have to configure the store right so instead of let's see how we did it in the og Mediterranean we first got to combine the reducers but we don't have to do this cuz and you see how they use a crate store from the redox library a redox tool kit comes with this own special version of a Cray store that does a lot of this boilerplate for us automatically so let's see how we do that we first got a import from here it's called configure store its redox toolkits version of create store so we can do export export default configure store and it takes an object as its argument we gotta give it the reducers actually I'm sorry we do have to combine the reducers but we're going to get the combined reducers from the redox toolkit so let's get combined we do search here and let's combine the reducers so I'm sorry about that I was mistaken we actually do have to combine the reducers let's call it reducers now just a little reducer with a lowercase combined reducers we will do so this combined reducers is slightly different than the combined reduce excessive use here is the read of tokens version of combine redo reducers we have to give it all the reducers for that our trace lice generates for us so how do we get those reducers and the whether we get them is justice first we give the name just like name a task are we representing our state like what we did in the OG way of doing things so let's first give to dues we're gonna get it from our to do slice but to get the reducer part of our to do slice we do dot producer that's how we'll get the reducers now it's pretty much the same as here and then we also have the selected to do that's selected to do sliced up producer and counter it's gonna be counter sliced that reducer like so so now we give it to our store by doing reducer is reducer but shorthand yes exaltation it's just because they're the same name you just put a comma like so hey guys Justin from the feature again I made a slight not a mistake but something that we could optimize I call it even better one thing that really does toolkit does for us is we don't actually have to call this combined reducer so as long as we make our reducers and object redox toolkit and we give it to our cupcake your store by the way as a reducer here our redox whoops I used the wrong there you go redox toolkit will automatically call combined reducers upon this object that we give it so this was a maker code a little bit cleaner and nicer and that's boilerplate so we could go up here and reduce I mean not reduce remove the combined reducers so guys oh you could do it like this and this is actually much cleaner than what I had before all right back to the video and we got to we don't need to give it the middleware because by default it comes with Redux thunk and it comes with the dev tools so we don't have to have that granted we also do want to use the logger in which this redox worker does not come with by default we will add that in in a bit but let's just finish this and put this to use so just to make sure that we all did everything correctly I just want this to work with our Redux toolkit redux way of setting it up but now we have a bit of a problem how is our app are going to import the action creators there is no export here anywhere where we are exporting the action craters that the slice functions automatically creates so we have to manually export those so let's do that here maybe maybe below my Congress lies we will say export counts we're gonna explore a couple things as named exports and we're gonna get all of these from our to dues actions it's actually called to dues slice that actions if you see here another property of this slice is the actions so we're just gonna get all the action creators and export them here I will export let's see the crate what was it called it's just called crate right however crazy not a good name to export it because this is a named export Chris and a good name so I'm gonna rename this as crate to do action crater like so and also we have I'm just make sure I know what names are using here so that consistent we have edit edit to do action creator toggle toggle to do action creator we have removed right however I'm going to rename the remove to delete to do action creator so that I don't have to change anything with my app that index functional component then I think those are our four action traders from our to slice now we have one action trader from our selected to do slice and that is selected after I call it select let's rename this actually let's call this actually slacks good Mexican select let's rename that as select to do action operator like so so now we have successfully exported our action creators and now I think finally go to our app that index Oh before we go here actually we got to update our top level index file let's see if I could just find it here it is so here we're using the store from the og redux from this file right here and also we are using the provider from react window so this provider we still have to use it for the Redux toolkit but instead of using the store from the redox doji we will import store from redux toolkit like so so this what this is importing is if we go back to a redox ook at the very last line we are exporting default the configure store pretty much the same as our ology way of doing things so now if everything went to plan our store is connected with our redox toolkit so let's go to our app' index I'm gonna comment out this import of our action craters and just below it I will import the same names except this time from redox toolkit so create to-do action crater headed to the action crater toggle to do actual crater delete and select so let's see if that worked let me refresh the page and I'm getting an error because he says attempt to import a table to action crater is not exported from redox toolkit so for some reason he doesn't think that this exists create to-do action crater on but it does actually let me see yeah so let me actually just open up my terminal and I'm going to restart my server let me close out of this and p.m. start okay that has finished so yes that was just a last bug and everything seems to be connected do you see this we are redox dev tools is lit up so everything seems to be working let me just bring this into view and we have our initial three states here now let's try doing a couple things right so let's create a new one test if they create it now look at our action type name it did to do stop scrape before we add those crazy capitalized letters but now our sliced functions I don't man it generated this action for us called two deuce slash crate but let's keep on working how are we select a couple things now they look at the action type name it says selected to do slash select we could toggle them to do is toggle you see here and all the way we do this this number is can update it as you can see here see that 910 we could edit this learn redox good and this is now called to do edit we could even delete these and that gets registered here so how did redox okay give it these names the way that it did it is it goes to our crate slice it looks at the name puts that as the first action type puts a - a put a slash next to it and the name that goes after the slash as you can see here it's just a key that these reducers have great edit toggle remove for the selected to do we had just to select right but that's why we don't have to name our action craters like a very descriptive name we didn't have to name this key create to do this key edit to do kind of like what we did in the old way of doing things because it's redundant the this name property are matically allows us to know which action which type it is associated with so this is very good in my opinion and I'm actually gonna be doing this for my own personal applications too from now on I think this is very useful and it removes a lot of the boilerplate code so by the way let's try to make it connect it all look like this as much as possible remember we have longer here right now we don't have longer nothing's being out here right so let's import logger and put it to use with our new redox toolkit way up setting up the code so let me import right below you ID import logger from redox longer but whenever we use other middleware outside of the standard middleware that readers talkie comes with we have to import one more thing from the redox toolkit and that's called cat default middleware so let me explain why this is important so as I explained in the beginning our redox toolkit automatically connects a couple important middlewares for us to use by default but now if it decides to manually add middleware to our store we have to refeed it the default middleware so let me explain what that means if I were to just do this middleware I want out it by the way this computer store is an object it gets a middleware as an optional key if I just wrote let's see like longer here notice we're not using like all-time middleware or anything yeah I don't know does that for us the problem we're just doing it this way now it doesn't have access to the other handy middleware that this automatic comes with if you want to add manually the automatic middleware that the reader so it comes with you gotta use the sketti for middleware call that and then spread that within our middleware well that way we're telling we're telling a story no we're letting in know that look I still want to use the for middleware that redox tool kit comes with but now if he did it for whatever reason want to use that then you will just put this line out and just put the middleware that you want to use in this case you will not no longer use the default middleware that comes with by the way if you only want to use a t4 middleware you just remove this line and then by default it will only give you the t4 middleware that this redox tool kit comes with but because we want a logger and I do something a little bit different I'm gonna say Const middleware it's gonna echo dot the top default middleware get it for middleware come on longer and just reference that within here using es6 notation like so making a little bit neater now let's see if it's connected um i do some action and you see the logger taking place in my terminal so that is working as intended okay so now for whatever reason whether you want to push your code into production let's say you want to turn off the dev tools that's little pier right how do you turn this off well the way that you turn that off is if i remember which actually i don't so let me just go to the redox toolkit website and i'm gonna go to the api section and what I want is to configure store so this has an optional key called the dev tools which are sets of boolean so you can say dev tools by default it is true we could set it as false if we do that go back to our app our thing is no longer depth is no longer little meaning it's not connected so in case you want to turn off your dead toes for production news you could also do something like this if you had environment variables Africa what's the example that the configure stored in let's see yeah so process the end I always forget that process that your environment if you had environment variables set up and you say if it's not equal to production turn otherwise if it's equal to production and turn it off so that's another handy way of turning on and off your dev tools okay so let me just check this out make sure everything is working so now we have something that was identical to our Redux application that we had before using the OG way but now we did it using redux token so let's compare the OG way and a new way for one we have in my opinion a lot less boilerplate if you look at the Redux OG this whole line of code is 204 total line of code in redox toolkit is 114 so that's a little bit over half of the redox og so you cut down a lot of the boilerplate for us not only that we could do things such as quote-unquote mutate the state if it's an object on an array inside using Emmer where is it yeah all this stuff right here yeah automatically generated for us the the action creators also another handy thing is it automatically connected us the dev tools so that we didn't do that it automatically can understand what Redux thunk which we unfortunately then use in this example we also connected us with a few other things that prevents us from making dumb mistakes that is very common in a read that a lot of users by accident create so this was an example of read of toolkit side by side comparison with the traditional way of setting up Redux let's go back to our notes by the way guys real quick if you guys want a copy of this finished version with all the dependencies installed and both the redox toolkit version or the redox and also the original way that if you wanted this code go back to my github which is here I'll click on branches and you'll see this finished version branch here if we just open this up you will see the finished code so just clone this or Fortis or whatever and you could compare or you can even just go in here directly go to the source file go to the our Cerritos toolkit and you can see on my code here so if you guys want to use the reference here you go okay guys now that we're done with that I wanted us to do a quick recap of all the functions that's provided in redox toolkit and the reason why I'm doing this I want us to really solidify our understanding and knowledge of this toolkit so the first function that we're going to be looking at is called the configure store and the get default middleware so remember this replaces crate store from the redox library it's like a wrapper that does all the boiler play for us for us let's look at all the properties that this receives right so this is the interface for the objects remembering inside the configure store we pass in an object and this is the shape of the IP that we're passing in yes for optional keys properties and one requirement so the first property that is required is of course the reducer so the reducer we could either pass in multiple reducers like what you see here and this is actually what we did in our example or to do example so it takes in our object the keys becomes the name of the slice and on the valleys we put in our reducer so I'll remember I made a mistake on this no combined reducer function needed we don't need to call the combined reducers function to let redux know that these are a bunch of reducers that were combining the redox toolkit automatically causes combined reducer function for us so no combined reducers function need it now if for whatever reason your store composed of just one slice of state then you could just pass in not an object as it value of the reducer but just uh reduce yourself a function like so so the next property that this configure store receives is an optional properly that is middleware so it receives an array of middleware and again it is optional if no if no middleware key is vided then it just applies the tip of middleware that readers talk it comes with so remember from the very beginning these word uh redux thunk that is the async middleware that handles your async action calls and also it also applies the redux and mutable state invariant middleware this is pretty much it gives you an error whenever you try to mutate your state directly without using Emer so that's another helper a middleware that comes with so again if you don't have this middleware key within your computer store then it will just apply those two as default now if for whatever reason you wanted to remove those too deep on middle words then you could just provide an empty array oh as a key like so now if you wanted to add the defaults and additional middlewares to your store to your redux story then i'll make an array in my example i just called in middleware spread to caddy for middleware this was spread to t4 middle words into the array and also add the additional or add the additional middlewares after that and then connect that to your configure store and that will add it to the store so remember if you're coming from redux is this important you don't need to wrap your middle word with the apply middleware function that widows comes with so readers toolkit also comes with this apply middleware but you don't need to use it it will do that for you automatically and the next key is the dev tools again this is optional is turned on by default and pretty much it lets your store know whether to turn on the Google Chrome extension you know that this the one that looks like this whether you want that on or off so it's on by default and you don't need to install this separately we just took it comes with the automatically now let's say you either want to turn it off they just do the dev tools or the newest false or you do a conditional you could do a conditional statement like you see in this example this is from the official documentation by the way let's say you didn't want to turn it on if it's on production so then you could do something like process at end that known the old environment is not equal to production then turn it on otherwise turn it off so this is a pretty handy way to conditionally honor of the Redux dev tools the next one is the optional preload state and this is the same thing as in Redux Redux also has is the original redux the crate store function so pretty much if you want to pre-populate your state your store with a couple of variables with a couple data then you can make by the way this is from the official documentation you can make an object like this with two do's and visibility filter and just give them pass them along to the configure store and that way your Redux tour will be by default be pre-populated with these data and the last property we have for the configure store is the optional enhancer so this will either receive an array of enhancers or a callback function so I'm on I was on the redux official redox documentation website and it tells us what our enhancer is it says most apps extend the functionality of the Redux store by adding middleware or store enhancers note middleware is common enhancers are less common middlewares add extra functionality to the redox dispatch function kind of like redox thunk and enhancers add extra functionality to the redox store so here's an example from the read of toolkit documentation they got the NPM install this thing called redox patch and they passed that on as a single element in an array to the enhancer so this is how you use enhancers and before we go on to the other functions let's just talk about the key fob middleware real quick so we've been using this it gives you the default middleware but you could actually are passing an object then to customize it so here's the example that they are customizing the tank and the serialize spot-check so one thing I did forget to mention is this also comes with our civilized serializable check middleware or you can read about the documentation and this is pretty much all the objects the options that we could pass into this so if you are interested in this then check out the official read of Stokie documentation to read all about this so the next function that we're going to talk about is the famous crate slice so this is what it it takes an object with four keys three being required and one being optional so if I got the snippet from the documentation it says that Chris slice is a function that accepts an initial state and object full of producer functions and a slice name and automatically generates action craters and action types that correspond to the reducers and state so pretty much this we give it they're not all reducers that we want this slice of state to have it will automatically then generate us the action creators and the action type size associated with it this is a very powerful function let's get on with the easy properties first so the first one that I want us to focus on is the name so the name it's a string and it pretty much names a slice of the state that you're working with so if you look at the redox step to a step but you have you see here you see the various action types I see for action types here to do is create selected to do select and so on so this is also a new way to name our X types and I actually prefer this over the all uppercase manually coded in our action types that we see in the traditional Redux application but pretty much all the words that you see to the left of the four slash those are the name of your slice so to do this and select it to do that you see this example so that's what the name is for the next one is the initial state now initially the initial state may not look like much and it gives you the initial state of the reducer so the state that is slice is dealing with what is this initial state going to be so in a traditional Redux application here is a reducer function for a traditional Redux application you see the equals the state is equal to zero in the parameter so that is the default state of this state and we always had to write the eco sign but it's very easy to forget because our IDE usually won't tell us if we forget that however in a redox toolkit notice if I come that out initial state then it gives me a whole air and it would tell me look you need the initial state so that's why this is very useful and very convenient for us we have you will prevent a lot of the mistakes that we could possibly make by forgetting the state or initial state within our reducers so I think this is very good the next property that I want to talk about is the reducers properly and this is very different from the old way of running our reducers so pretty much we're giving the crates light stop list of reducers that are it needs let's compare the old way of running reducers and the new redox toolkit the RTK way of writing our reducers so let's look at the old way first and here we have the counter reducer example again so notice first we must provide an initial state do you see the state equal to zero in the parameters that's very again that's very easy to forget about but we must have that otherwise we will run into errors number two we must always provide a default case to our old reducers so that's just a default return state and pretty much that's required because our reducer may not may be fed an action type that doesn't care about in that case we don't want a meaty to stay at all we don't want to update the state in any way we just return to stay as it is and number three we must use string literals or constants to define our action types so you see the case increment case decrement and to be honest that's not even that bad but in a real application the names product the exercise probably won't be that simple and the tradition the tradition is to define a string variable constants for our action types so here so here's an example of that and usually within our action types we have the verb of what is doing such as add update delete and all that stop and also the name of the slice of our store so in this example I have defined the action type I'll add all the product components and then I set an echo to again pretty much the same word so this is very verbose and it's a lot of code writing so in imagine you have like a bunch of like 100 sebastien types which is very possible very reasonable you'll be writing a bunch of consonants like this and number four the only way to properly update the state of our store is to use the immutable update pattern what that means is we cannot mutate or state directly we can't do like state that push up on our state we can't manipulate a property of the state we can't cause splice on an array if our state was an array we must always return a new version of that state without mutating the original state so that can have potential to get very difficult to do and it makes our code a little bit messy so it may be very hard to read later down the road especially if you have a bunch of reducers now let's compare that the new way of writing a reducer so first of all notice that it's an object that we are passing into the reducers property and we're passing a bunch of key value pairs so we have three reducers here that we're passing now one of them the multiply one in particular looks a little bit different but we'll talk about that in a little bit but if you notice this we it looks a lot cleaner and we don't have a initial state defined in this reducers property but that's because within our crazy slice function we have defined the initial State elsewhere and if we do if we forget to write that our IDE will complain so that's another good thing it prevents us from making mistakes and not only that because we don't have a typical switch of a case statement within our reducer it's just a key value pairs we don't need to provide a default case Reducto key will automatically take care of that for us so if this reducer gets a absent type that he doesn't care about it just doesn't meaty to say at all so that's another good thing and that's another potential place that we can are we don't need to make a mistake on number two we can optionally prepare our actions so remember one thing that the crease lice does is it automatically gives us our the action types and the action creators now the action crater that it automatically gives us may not be sufficient to permit to adequately prepare the action that our action crater creates so in that case we could prepare the action type as you can see from the above example the multiplied reducer has the pre is an object instead of a function where it has a reducer key and also the prepared key so the prepared key first goes to the prepared key it prepares the action as you can see here he says payload is either gonna be valid or to and once it prepares the action it feeds it to the reducer key and that's like a typical reducer and from our cold long example couple minutes ago here is an example of that what we did here is we are preparing our action because we're creating on new to do I believe and we had to give it a new unique ID we made that unique ID by calling the UUID library function that generates a random ID for us so this is another way that we could prepare our action and we are doing this because we didn't make all our action craters ourselves and number three we could use this uses immer to allow us to write quote-unquote mutate of mutable state logic what that means is we could use methods like push or splice or manipulate a property of an object directly and what Emma will do is it will detect that we have mutated a state and it will replace that code with our immutable state logic so we could safely update it without worrying about and what this will do for us is one you'll be a lot easier for us to write our code and two you'll make our reducers much more legible I think so this is another good thing and I want us to focus on this I want us to do some comparison between immutable state logic and immerse mutable state logic and I also want also discuss the potential pitfalls that this has and some things that we have to watch out for ok so let's compare the way that we write immutable no state update law deck and also the redox took away using Emmer so let's start out with a race and the first operation that we want us I want us to cover is add so adding an element to an array so with the typical traditional immutable way we would return a new array spreading the previous state and adding the payload so I'm gonna assume that the payload contains a new element that we want to add to the array so all right this is not too bad but it's still not as legible as I wanted to so it's much better in the really Creed of tolki way all we're gonna do is just cos theta push payload number two I want us to look at how to update a particular element in an array so the church immutable way is this crazy thing right here we have to invoke the map function by the way this is one way there might be other ways to it but it's just what I usually do we are to invoke the map function we have to iterate over every single element within our state array and if it matches the for example the ID within our payload if that API finally found the element that we're looking for then we update that with maybe our payload data right that's the data new element that we're updating with otherwise keep the old element so we got to do this math function to update on array now the redox took away using Emer or we just gotta do is find the index and then just set that index equal to payload data this is a bit misleading because you gotta first find the index first but that's not even that hard either and I think this is much more legible now to remove an element in array what you do in an immutable way is it's kind of similar to updating or instead you use the filter method on the state you loop through each element in your array and you filter out all the ones that does not equal to your filter in I mean all the ones that's not equal to your unique ID or whatever you're looking for now in the read of Tokyo way you could call the splice methods or splice method what it does is you first give it an index which I called I here and then the second parameter you tell it how much element starting from the index you wanna remove so we just want to remove one so we just say stay past splice I comma one and this will remove it in place so you remove our state so this is the way that you remove an element using a Marin Redux toolkit okay now let's compare it for objects so first of all if you want to add a key or key value pair into an object in an immutable way what you just do is you spread the state or spreading all the previous keys and value pairs of the object and let's say the new key that we want to add is called new then you do like new and maybe the valley you want that to be associated with is a pillow so this is what you would do now the read of Toki we're using a murmur or you just gotta do is stick that new is the pillow very simple and very easy to read number two let's say you want to update a key value pair let's say you have an key called edit right and you want to update that with your new payload so in an immutable way it looks very similar all you gotta do is spread the state and then edit is payload so why this works is that because the Edit our key edit and in a pillow that comes after the spread operator of state it will overwrite the old edit key that you had so this is why this works but in the reader Stokey way okay and it looks very similar to the first way of adding just to state I edit equals payload and they will overwrite the existing data that was inside the Edit key now to remove key value pair in an immutable state it's fairly complicated and long within an immutable way so you could either write all this crazy logic let's say you do object entries of your state and then filter out do you want that's the key that you're looking for so that's one way I don't want to write that here or you just use our external library such as lodash and you see a mid function that it comes with or like the long with that is described but using the readers toolkit what you could just do is uses the lead operator so you could all you gotta say is delete state dot and the key that you want to delete so state to delete so this makes it very simple okay so let's talk about the potential pitfalls of using Emmer that readers tool kit comes with so first of all the mutating the state directly only works because of Emmer so and well how Mr works again it's not is that you're not actually meeting the state because we were what it does is whenever it detects that you are meeting the strike directly it changes that so that you are it changes it to are immutable update state logic but please please please keep in mind that it is emerged as doing this and the reason why I say this is because say you are working with Redux toolkit and that was the only thing that you work with so you had this idea that you could just mutate the state directly now if you were to join a project that didn't use redux toolkit and specifically didn't use Emmer then you'll be confused why it doesn't work anymore so always keep in mind that it only works cause of Emmer number two and this is important this is also from the documentation that's why I put it in quotes most importantly you need to ensure that you either mutate the state argument or return a new state but not both so one thing about Emmer if you saw from our examples is when you're using Emmer to quote-unquote mutate the state you're not returning anything in that reducer you're just muting it directly and just leaving P there is no return in that function here's an example of what not to do so we have our Tahoe to do reduce their here look at the first the middle lines as to do that completed is equal to not to do that completed so here we have mutated to state directly using Emmer now if that was the end of this function that will be okay that'll be good but look what they do afterwards they are returning a new state with the to do update as well this is not allowed you gotta choose one or the other either choose to use the immutable state or opt a pattern or using the image update pattern just meat-eater state directly but don't use both so if you're using Emmer you should not have a return in your reducer and number three don't try to apply apply the mutate logic to a state that is a primitive value so our ml works for objects objects in our race but not for primitive values so let's say you got used to not having any returns in your reducer functions and just mutating the state directly but look at this example right here check out the initial state it's zero meaning is a primitive value because numbers are primitives and within our increment we're not returning anything all we're doing is state plus plus so we're thinking that it will update the state cause we're muta : commuting in the state but that won't work none of these reducers will work because our state is a primitive value and not an object or an array so don't try to do the music logic that is a primitive value if your state like this example is a primitive value say a boolean or a number or a string or so on you gotta use the traditional immutable state logic where you return the new value so it's the increment should be returned state +1 decrement should be returned state -1 and increment by a mouth should be returned state + action pillow so these were the potential pitfalls of using immer so please be careful these 3 points ok so let's go back to our crystallize function which were a pretty big detour about the reducers they received so we took care of the name the initial state and the reducers now the last optional key the optional property that is create create slice function takes is the extra reducers so if you remember we actually did use this in our demo example and here it is right here so how creates lice works is it takes a slice out of your state right so you may have different parts of your store a sliced up in different ways so in our example we had the two dues had us select to do which was like it tells you which to do that it was selected we also had this random counter but this counter didn't get updated by any any of the action types that action craters are it created but rather he used the actions from other slices of the store so whenever you need to update your own state based upon other action types action creators or actions from another slice then you need to use this extra reducers because the reducers will only take the reducers key will only take action types that's associated with its own slice of state so in this color slice example that I have written here notice it doesn't have any of these reducers of its own that's why it's an empty object now it receives the extra reducers and the reducers they receives from is from the to do slice so what are the output of this crease lice if you remember is we have access to all the action types and that's what I am referencing in the keys of these are you know inside the reduce extra reducers okay finally let's talk about the output of the crate slice function so here in this example we have made a simple counter trace lice and I have put that into a variable called counter now what does this counter variable come with so one thing it comes with is we could do counter that name and that will just give us the string counter is pretty much the name of our slice and then we could also do counter that actions and this will be an object of our action creators so in our example here we only have two reducers right increment and decrement so it automatically automatically creates for us the action creators associated with increment and the absent creator associated with decrement so here's an example of using the increment action creator and our increment and our decrement doesn't have any extra payload or parameters they received so that's why it's an end it's a function without any arguments but this is one of the things that makes Chris slice so powerful and so efficient for us the code is it automatically crazy us these action creators and finally another property that this counter variable comes with is the reducer and this reducer that reducer this we pass it to our combined reducer so we pass it to our store so in this example this is from the to do app that we made a couple minutes ago given an hour ago now by the time you're watching this but within the counter you see the Commerce slice that reducer we are passing the reducer so this combined reducers and I can keep this one in mind we don't need to use combined reducers in redox ok that was just a mistake on my end so this was an overview of Chris slice now let's briefly go over the other not so important functions that this redox tool kit comes with ok so let's go over the create action function that is reduced ok comes with so again keep in mind that we don't need to use this function unless we had to make some special custom edge case create action right because our the Krait slice function that we just went over that has pretty much the create action and the Krait reducer function the win which we'll see in a little bit it has both of them combined into one so for the most part we could use Chris lights but in case you wanted some more fine-tuned customization or whatnot let's take a look briefly at the create action so this is from the docs on the top right you see dot the type the first parameter which is required is pretty much the name of the action the action type the constant and secondly you could optionally give a prepare action which is a callback function um this is kind of similar to the prepare key that we saw but in on Chris slice it kind of prepares or action for us otherwise it automatically creates the action for us so here is an example this is the old way of doing things so first we have to define our action type we see the Const increment is equal to counter slash increment and then we have the action creator so remember in the old redox way of doing things we defined our f creators using native javascript there wasn't any special functions to create our action creators it was just a regular JavaScript function so it's a function that optionally takes a payload and we return this action which is an object that always has a type and which is a string and optionally it can also have a payload which in this case we're just passing along the amount right so when you call this action if you look in the example below it says once you call it increment 3 then it gives you back an object called an action type counter is Encounter slash increment and a payload of 3 so using the create action function that Redux tool kit comes with you could just define an action creator called constant Kerman is equal to the create action and in this example we're not giving in our prepare action we're just saying hey look I want to create an action that's called counter slash increment then whenever you call upon the action you just get a payload or you get an action back with the type now you could also give it a parameter as you can see the third line with increment 3 then that parameter that you have Kabat or giving it automatically goes to the payload key so it automatically gives you the payload key so notice nowhere here did we manually define the type returning the action object with the type key and the payload key it automatically assigns you the payload key so for the most part this won't be a problem but maybe for whatever reason you didn't like to use the pillow key maybe you wanted to name it something else so in that case you're kind of stuck with it you're kind of stuck with the pillow key but I don't think that's an issue for most people now they overloaded those two string methods such that if you call the action dot to string you get back the action type so this is can be beneficial when you're using typescript for example let's look at also the an act great action with the optional prepared action callback function so here it is right here so here we are calling the action to do slash add and we have given the optional callback function which he is calling prepare it gets a text as an argument and returns back the action with the text on our ID or unique ID or with the UUID kind of like what we did in our demo and I'll created that which uses the new date so if you wanted to if the automatic action that it automatically generates free is not sufficient for you then just like great slice you could prepare your actions like such so this was create actions now let's look at the other part of this which is the crate reducer actually before we go on to create reducer let's look at this the return of this one more time so we are returning an object from this optional callback function as a second argument we're returning an object with one key in this example right we have the key that is payload oh and which itself isn't also an object the action to be more specific the payload of the action to be more specific notice we don't have the type key which is typically needed in an action and the reason for that is here we are just preparing the payload now this object that we are returning this function could also optionally have the meta key which you could put any many meta information there and also an heir key in case there is an error you could put any air data inside that key as well so that was create action ok now let's look at create actions counterpart the crate reducer function so remember this is the old way by the way remember in the traditional Redux application to make your reducers just like your action creators it's just a regular JavaScript function that takes in two parameters the first parameter is a state and you must always pass it a default value as you can see here equals zero and you also have the action now typically within a reducer you have a switch and a case statement where you are your each of your cases is all the activity action types that this slice of state is interested in and after you have made all your reducers like that you need the default case where you just return to state itself so this was the old way now they are using a crate reducer method you could just make that as simple like this so the crate reducer function takes in two arguments the first one is a default value and notice this because it's your first parameter you're never gonna forget about this right you can forget about a default value in the original way of doing things but here you can't forget about it so that way it prevents you from making simple mistakes and the second parameter is an object with key value pairs of all the your action type names as a key and a function that will be a reducer as a value and notice we don't have our default case here another good thing about using this great reducer function is just like our Chris slice we could use immerse emmer is included with this so that you could quote-unquote mutate to stay directly as long as this is an object and Emma will work his magic and make it into a immutable or update state update function or method so here is an create action and create reducer working side to side so we have increment we have defined two action craters increment and decrement now remember increment decrement that also automatically creates us the absent types of so she ate with it so when we define our reducer right below we are using you could either get the key the action type name by just calling the increment calling the or the result of the create action like in the first example with the increment or this will only work in JavaScript however if you're using typescript iSchool will complain to you so if you are using typescript all you gotta do is just do the action creator dot type and that will give you the correct action type for you so this was the crate reducer again it for the most part you don't need to use the create action and the crate reducer because Chris slice will do all of that for you automatically so I'm back on the readers toca documentation website the API section and we cover most of the important functions now we have this Chris selector I mean this is also important too but this is from this is a memorizing selector function from the we select library I don't want to spend too much time on this because this is from another library which is equally important and I use this all the time on my work and personal projects and I would definitely make our separate video on this so please stay tuned for that and we finally we also have these other exports too so we have this crate what this is actually an internal export that they say but crate serializable stay invariant middleware pretty much you could customize your state environment middleware over here and also let's see we have the crate next state which is part of Emmer combined reducers which we don't need to use or compose is from the original redux to we don't need to use this pretty much none of these we don't really need to use but they it comes with this library just in case you need to use them for all right so now let's go to the QA so probably the most common question the most freaking question is how we handle async logic using redux toolkit so keep in mind that redux tool kit comes with redux dunk by default and it's connected into our store but as default so we don't need to configure our store to use redux dunk oh and by the way the example that will show you guys right now I will be using the redux dong quai arms that is the default way the recommended way from the redox team to handle our ASIC najuk now there are again there are other libraries such as redox Agha and so on and you can use them as long as you install them and connect them I'll connect those middlewares to your store even using retox toolkit but I'll just show you guys how to handle it or using the redox dunk away so with redox Agha it will be pretty similar but obviously you can I set it up to read a sock away but let's get on with the redox dong quai so first of all within your slice of your state let's say your said great slice right add an error key for the case when your async all is rejected so here's an example of that let's say we are making a get request to some repo and we want to see we want to collect how many open issues are by the way this is all from the Advanced section of the tutorials or the official redox toolkit website so you could just follow along there too if you want but this is what our state looks like we have the open issues count this is the a number that we are fetching from the external API and we are following the directions where we have added an error key that will either be null if there is no error otherwise it will be a string with the error message and we have also initialized our state with open as you count negative 1 and err no so after you have done that create reducers for both the success state of the async all and also the rejected state so an async lock could either be a success meaning we have passed the data correctly we are successfully pass the data or it could be rejected maybe we got a 4 or 4 or 500 or whatever right then we have a rejected situation so we got a create manually create reducers for both situations so here is an example notice that we are using crate slice we have given the name the initial state that we have defined above and also we are putting two reducers the first one is of the action type get repo detail success and the next one is get repo details failed so notice within our success reducer we are doing state that open as you count we're updating that based upon the number of open issues that we have fetched from the API and we are setting the air to not because there's worth no error but now within our gallery full details fail reducer we are setting the openness you come to negative 1 because that's a default like no open count we didn't get any data from the API and we are also setting the air with the action payload so the action pillow in this situation will have the error message so after we have defined these reducers manually then separately on a different line of code on or on a different file whatever create your thunk function or your async tum function that either dispatches the sixaxis action or the failed action so let me give you the example here by the way before we do that let's extract out the action creators that are prey slices automatically created for us we could get it from the dot actions property and here we are extracting the kelipah little success carry ponytails fail that we have defined earlier and then we're gonna put them to use here upon this async don't function so notice we're getting two parameters org and repo and also if you're using typescript you could use the app dunk that this read of took it comes with you can just import that from the library and you make your typical dunk a sync function that returns a function right that returns the async function I mean and we have your typical try and attach inside and then we await we make the API call with the Cal report details and then if there was no error we dispatch the get repo little success that we have made right with the response that we got from the API otherwise if he fall into a catch because we had an error we just dispatched the air so this is how you currently handle our async functions in read of chocolate using redox talk so you might be thinking this might have a lot of boilerplate because we have to add reducers for the success situation and also the fail situation and make a separate function pretty soon however this will not be the only way to make one so in redox toolkits version 1.3 which as of the current time of the when I'm making this video it hasn't been released yet but the maintainer readers say it will be coming up very soon and actually the stable versions already done as a matter of fact but this 1.3 version will contain an additional function called the crate async dunk so let's take a look let's have a sneak preview about what that will be like very briefly so this is again from the official documentation website and here is them using the create async tunc function so they are first imported it from the redox toolkit and they are making a separate function it takes our crate async async dunk takes the action type as a first parameter which is a string and the second parameter that it takes is the async function the tongue function and after hey Adam so let me just move it over here real quick so that we have some more room and it will generate automatically generated reaction times for us and those are depending and the action type the way that that looks like the automatically generated action type it just has a slash pending or it has a fulfilled for when our promise is fulfilled and also the rejected for when our promise was rejected and then what we do with these is we add them to our reducers like here and all you got to do instead of manually making your reducer name all you got to do is reference the are crate async dunk result or the function that you stored in a variable and you just do that fulfilled for the fulfill state and you can also do that rejected for the rejected state and so on and once 1.3 comes out officially I plan on making a video a tutorial on how to use this how to make async our request using redox toolkit so please stay tuned for that as well the next question is how big is the package the redox toolkit package compared to redux so let's do a little Co bit of a comparison this is from NPM just at work I think that's the website note am/pm website and so here is redux it's unpacked size is 163 kilobytes now here is redox toolkit it's 708 kilobytes so it's pretty significantly bigger granted it does come with some additional packages but the majority of the size is because of Emer so Emer is around like 500 kilobytes I believe so most of this package is from Emmer now the redox team is hard at work trying to improve this so here is a post from Mark Erickson again when the maintainer of Redux from the one point 3.0 alpha top-10 build so pretty much what this is saying is they are refactoring the code to better support tree shaking in immer and this will reduce the size of the package later so maybe right now it might be a problem to you maybe if you want your package small but it will improve with time so let's just give the time and I'm sure that you'll get smaller okay and here's the final question didn't use context and use reducer hook killed off Redux so why should we care about this redox toolkit and the answer to this question is no it did not redox is here to stay I would especially if you're working on an extremely large application with not a state management I would not use use context and use reducer to handle that maybe for a small application I will do something something else but I would stick with Redux and as a matter of fact I guarantee you most companies will still continue using Redux as the number one state management system so it is here to stay and that is why you should learn about redox toolkit okay so before we end the video let's summarize what we have just learned and by the way if you're still watching this video after all these hours I really think it kudos to you I thank you so much for still sticking with this video oh it was fairly difficult for me to make all this especially because I do have a full-time job but you always a pure pleasure for me to make this and not only that I learned a lot on making this video so I encounter ruidoso kid about a week ago or maybe two weeks ago and just the past week I've been just devouring myself any free time I had on the redox toolkit so hopefully you learned a lot with me but anyways let's summarize our redox toolkit will reduce a lot of boilerplate in your code so with the old traditional way of building up your application you have a lot of boilerplate especially if you had a typescript application but readers toolkit will reduce a lot of that boilerplate for you not only that is build with typescript so using redox token with typescript is truly a breeze it makes the typing a lot easier and you don't have to type a lot of redundant code using typescript so this is a really big thing for me because I use typescript on a daily basis and I had lots of duplicated boilerplate code in my code base so using redox toolkit will reduce a lot of that it comes batteries included so a lot of the packages they already comes with that you're probably gonna be using such as the redox dev tools redox tunc and all that stuff it already comes included with it so not only that uh it comes with a lot of other packages that helps you prevent for making mistakes not only pictures packages such as Emmer or anything like that but the way that you set up your actions and your reducers or or just using the Chris slice which is the recommended way it's the way that you write it it prevents you from making mistakes such as forgetting about default because you don't have to write the default case in this using the functions in the redox toolkit and also the initial State it forces you to define the initial state so there's a lot of ways that it helps you prevent these common mistakes and it has a mer to allow you to mute according community to state directly making it easier to update the state and here also this is the more important thing I think in my opinion it makes your code a lot more legible so again what Emmer does is you write mutating state logic and you will convert that code into a immutable state logic for you and finally it's the official way to see that set up our redox application so what that means is it'll probably get more popular over time and this will probably be a de facto way of setting up a redox application and so it's here to stay so it's definitely worth learning okay so that was a summary of redox toolkit and the whole video a comprehensive guide on redox toolkit guys if you're still watching this uh right now that I thank you guys so much for still sticking with me again I said it before by hope I really hope that you guys learned a lot from this and I hope that you guys will start using this and see for yourself just how useful this will become now if you guys like this content please click like and subscribe to my channel I plan on making a lot more videos on redox coming soon such as series elect function use connect or the difference between using hooks with the react redox application and when one-point-three comes out I plan on making a video on that redux toolkit 1.3 by the way so guys if you guys like my content please subscribe and it's not just redux stuff that I make I also make a lot of anything related to coding especially react and JavaScript you will see it in my channel so guys again and let me know in the comment section what you'll be using that you have learned from here and what subject what topic you liked the most and if you have any questions then please let me know in the questions below and I'll do my very best to try to answer them anyways guys hope you guys enjoyed this and I will see you guys next time happy coding

Channel: Justin Kim

Views: 77,996

Rating: 4.9497185 out of 5

Keywords: Javascript, React, Programming, ES6, ECMAScript, Coding, Tutorial, Code Alongs, 2020, Hooks, useState, memoization, state, props, createSlice, Redux, Redux Toolkit, create-react-app, configureStore, typescript, immer, rtk

Id: 9lCmbth63k0

Length: 199min 4sec (11944 seconds)

Published: Sat Feb 29 2020

Reddit Comments

[u/acemarke]

This was posted a few days ago, but it's an excellent video and worth watching. (I'm admittedly a bit biased here :) )

Also, note that Redux Toolkit 1.3 beta is now available, with new APIs and smaller bundle sizes. Hoping folks will try it out and give us feedback. We need to add a couple more usage guide sections, but if no issues turn up, I hope to publish 1.3 final in the next few days.

[u/aliasthewannabe]

RTK is a gamechanger

[u/Vudujujus]

Thank you for the share! I needed this. I don't know why, but it's easier for me to watch videos to understand something.

[u/I-Only-Lurk-SRD]

I've recently used Redux for the first time using their hooks api. Mostly useSelector and useDispatch hooks with a single store and different reducers combined and passed to it.

It seems to get the job done and I found it pretty straightforward to use. But should I learn the older redux way? and Is Redux ToolKit separate from redux? If so why does it exist? and does it have hooks API that is as straight forward as the original redux hooks?

[u/taitai3]

Thank you for the vid

[u/TURKEY_CAKE]

Does this video go into setting up asynchronous action creators? Is there a clean way to do this with RTK?

[u/renaissancetroll]

good stuff