Create React App + Redux Template - Getting Started

so just a couple of days ago the official redox template for create react tab has been released just like how create reactive is supposed to be the de facto way of starting a react project the maintainer of redox have released this template to be the standard an easy way to get a react we dogs project up and running so what does this template come bundled with and what is this quote-unquote official way of setting up a redox project you'll find out about all of there plus more in this video by the way if this is your first time watching my videos my name is Justin and I'm a professional software engineer based in Los Angeles and make a variety of coding videos ranging from react tutorials new JavaScript topics and random but fun projects so if you want to get more coding goodness like these please smash that like button and subscribe to my channel to get more content like this one anyways on with the video and on with redux alright so what does this all come with first off since it's just a special template of cray react app it comes with all the standard dependencies that create react I've come with but on top of that it also comes with number one and this is the most important react redux and this special package called the redux toolkit which I will explain in more detail in a bit number two the Redux tour is already configured and created for us to use number three the provider is already set up for us and the redox tour connected to it and finally a small Conner app already made for us so that we can study it and see how it all works in a bit we will spend some time with this counter app and see how it's all set up we will also create a small to-do app with this setup as well before we dive into our editor and begin coding I want to spend some time going over one of the dependencies that this comes with by the way if you're watching this video I'm going to assume that you have already some experience for Redux and so I'll be assuming you know things such as how to set up a reader's application know what it looks like and know what action creators and reducers are and so on but anyways the interesting package in question is called the Redux toolkit and it's a package created by the official redox team according to the website it's the official opinionated batteries in the tool set for efficient Redux development this tool key is a relatively new package from the Redux team as a matter-of-fact version one was released on October of just last year in 2019 and to be honest I have never even heard of it uncle toll couple days ago before making this video when I take the round to see how he's all set up I was shocked as to how see how different it was compared to the more quote-unquote standard way of setting up our traditional redox app now I don't want to spend too much time on the various functions it comes with and compare how it's different than the traditional redox setup although I may make a separate video explaining all of that a new feature but I do want to spend a little bit more time on some of the more interesting features that it comes with the first function of note is called the configure store function it is an abstraction over the usual crate store function that the redox comes with for example it comes with redox dunk by default so you don't need to npm install that separately it also has the redox dev tools enabled by default so if you have the Chrome extension it will work with your app out of the box the next function is called the crate slice function this function is a replacement over the traditional reducer setup we have you know with a bunch of switch case statements but not only that it also automatically generates the corresponding action craters and akka types associated with your reducers and if you're like me the idea is kind of mind-blowing by the way the name of this function was initially very confusing for me but it's called the Chris lights because it takes a slice out of the entire state it also allows you to update the state by writing a quote/unquote mutated update logic such as calling push on an array or slice or splice on the array I mean now personally I don't know if I'm a big fan of this idea yet but the creator of this talk is that it's there because writing immutable update logic by hand is hard and since you can still write your reducer it's a traditional way of writing traditional immutable update logic I guess this can only be a plus by the way if you're curious how they achieve this they did this by including another package called Emmer alright so let's go to our code editor now so I'm on an empty folder right now I call my folder CRA - redux and I'm gonna create a new crate react up except using the template Redux so I don't know if you guys are used to the template hi syntax but this is how it looks like so what we're gonna do is MPX crate react app and typically you will write your app name right here which is coming the name of your folder but because I already created or empty folder called CRA Redux I'm just gonna say created here by putting my period here and so for example if you want to create a typescript application i'll react application what you do is you do table - template and then typescript however we're not interested on typescript application right now we're interested in a redox application so we just have to write redox here and we are gonna go and install everything so this might take a while so I'm gonna pause the video here and skip to when it's over so - finish installing and you might see in your terminal something that looks kind of like this except I use a yarn instead of NPM so my sets yarn start but yours if you don't use yarn you'll it will say NPM start right here okay so let's look at our folder structure here and then they created let's look at our sole source folder and if you look here it looks very similar to a typical crate reactor is that with a few differences first we have the storage is in which if we open it we have the configure store function that I talked about earlier and look how nice this looks so it looks a lot cleaner than our typical create store from the redux and keep in mind that this complete your store has redux dev tools installed by default and also redux dunk by default so we don't have to configure that here you know I know how tedious that could be so this is not the only extra file that we have in this redox template we also have this pictures folder right here so within the features we have the counter and this is the counter example that showed you that they're using this app as an example if you will of how to use this so let's open this see what it's like so here we have the counter functional component I believe and as you can see this it has been updated to use hooks they have a use selector here they have used dispatch they also have a use state hook here and this uses this folder this file called the counter slice so this is the crate slice that I was telling you guys earlier and we will spend a little bit more time looking at this and see what it's all setup what it's all like however before we do that let's just go to our terminal and start this application we could do that by writing MPM start and once that has finished loading this is the page that you will see so not quite like our typical crate reactor it looks a little different and they have a fancy little redux logo here and we also have this small counter example down here and also it says we could use a redox dev tools if you look at my Chrome extension right here it's green it's lit up that means that we could use it and as a matter of fact if I open it let me just get it into view right here we look at our state and we have our counter which has a value right now cranial zero and if I play around with this maybe blue plus one plus plus plus this all seems to work and whenever I do this I go back to here and now i can see that my bradley has been updated my store so that has that's already pre-configured with this template I could also add by two so this is pretty much the starting the example that this comes with so let's now take a deep dive and look at the code so I am back to my code and we are in the counter folder within the counter slice of file right here so this uses the infamous crate slice function that I talked about earlier so it takes a couple parameters first we gotta give it a name so this is pretty much the name of our slice of our state and we are calling this counter we have to give it an initial state and they have intentionally created an initial state or object with a key value pair of value so they could have just as easily made it like this so that the counter is just a single primitive value like this but because they want to show off their Emmer and how we could mutate all our objects are objects like this they made it intentionally into an object and they have a little note here so these are the reducers so notice we don't have a typical switch and a case statement here except we have an object with key value pairs now let's read this comment that they have given us he says Redux toolkit allows us to mutate the state it doesn't actually meet it a state because it uses the emergent library which detects changes to a draft state and produces a brand new immutable state based off those changes so check this out remember our initial state is an object we have an object right here and look at what they do here so we have this increment reducer right here and we are getting the state table value which is from here by the way and we are adding directly to it one normally without Emer this is not allowed what we had to do typically is just do like something like return state top value plus 1 that way we don't mutate our original state however because of Emer we could do crazy stuff like this where we mutate the state directly and EEMA will take care of that so that it will make everything work fine by the way one thing important to note the keys here upon these reducers these become your action types so we don't have to make this like Const increment equals the string increment action type we don't need to do all of this nonsense the keys that we give to these reducers become our action types so we have our decrement reducer here which again it mutates our state right here and we also have an increment by amount now this just doesn't just have a state as parameter but he also uses the Hasse action and it's because this action we could give it exactly how much by what amount we want to increment our state by so we from the action we get the payload and we get the amount and we add it to our value so let me just show you guys what's going on here so remember the name of this slice was counter and we have these three increment decrement and increment my own map right so let's go back to our app and I'm gonna have this next to me the dev tools let me just kind of make it like that check this out let me refresh the page whenever I do an action like so you could see here we have the name on a slice counter and in the name of the reducer the action crater that we just did the action type I me and this one is called the increment whenever I press this button now it's a decrement we could also add by a specific amount and that cost increment my amount so notice that these names are identical to the names of the keys up are within our reducers so that's how it automatically generates we can see that the animatic regenerates the action types based upon the key names oh not only that we have something here we have to select count by the way this is not that important this is just a selector and side note although this example doesn't use it that my computer kind of baggy sorry so this Redux toolkit also comes with I'll reselect they call it a crazed Lecter it uses the reselect so for those who knows this is a way to memorize your your selectors so that you don't always call it and grab it from the store again I mean anytime something updates or however that's not the point of this video and they don't even use it here so let's just ignore that for now am I making a video but at the future but what I'm very curious about and interesting was in the beginning when I saw this was this right here we also the structure a couple action from this slice so what is this slice we call this Chris slice function right here and we put that in a variable called slice on top up here now in the bottom we are exporting a couple action creators that this Chris slice function automatically generated for us based upon our three reducers here so if you look at this this structure right here we have the increment we had a decrement and we have to increment by amount so these were action craters that were automatically generated by this Chris slice functions by these reducers that we have vetted so this is pretty interesting to me and it cleans up or cold significantly we don't have a separate file for our action creators we don't have a separate file for types and so on now some people may see this as negative and we can structure our code still the similar way but it may not be as needed especially in a smaller app like this now also notice as a last line we are exporting export default not this slice that we created from the slice function but sliced our reducer so this slice this will give us just a reducers and let's see where this is used we let's go back to our storage areas which is right here in our source directory and we are importing the default import which was the slice top reducer and what we do within this config your store we have kind of like the combined reducers combined reducers from the typical way that you will configure your store so we have that by default here we don't have to import that from redux and this counter reducer that we got we just put it within our you reduce your key value pair here okay now let's go back to our counter functional component and alongside it let me just open reopen the counter slice file right here okay so first off if you aren't used to using hooks with your Redux application so about a year ago the react Redux has been updated to use hooks so instead of having a select down here with map state the props and map this that pastor props you don't have to do that anymore you could just use a used selector and that will you could just put pretty much your map stick to prop stuff here in this example they just use the Select count just to grab the counter value from the state from the store and also they also use the graphic dispatch function by you calling this use dispatch so again this is not new new this came out about last year and it's using the redux with hooks notice from the color slice Wow here we are importing all the action creators that were automatically generated from the sliced actions from this Chris slice function and we are gonna use a here so again the Select count is not that important it's just a state that color that value function that's a selector the one that's important let's check out the increment we for this button for this plus button we have an on click event handler which calls it dispatch on the increment action creator we also do the same thing for the dispatch decrement now what I want to focus on is the Adam up by a specific amount so check out this event hammer here we have a dispatch whoops increment by amount and we pass it an object that saw it as an amount as key and the increment amount number this by the way is from the state from this input right here from this you stake right here and we pass it as a number so notice we don't typically have the action of type what type is it and also the payload they just say the amount is gonna be number increment amount so what I want to do is going back to our counter slice I wanted console.log what this action is all about so let's count so log what this action is action now I'm gonna go back to my application refresh the page open up my terminal if I could get it open there we go I don't know why my computer's kind of laggy right now but if I use this I increment by amount I could see the action here and you can see they already for some how has he type within the object is called Conner slash increment by amount which happens to be the name of our action type and also it automatically created this key called the payload with the amount in there so we don't need to create our actions by herself but this automatically creates it for us and the way that that happened is this increment decrement and increment by amount actions that this criticized function automatically created for us he already creates those actions for us with the action types with the proper names and also the payload so that's why within this increment by a mount reducer we could just call upon the action that payload that amount that this action crater has already created automatically created for us so that's pretty useful okay so what I want to do with the rest of this video is make like a little dumb to-do app using this new paradigm of making reducers and action craters and all of that so I'm not gonna explain too much about what's going on so hopefully you guys are already familiar with how to set up a Redux like I said at the beginning of the video but I just want to show you guys kind of like the steps that I would take so let's just open up my folder let me just close this file for now within my features I'm gonna make a new folder next to the counter directory and I will just call this to do tol deal and I'm gonna kind of style or structure it very similarly to a common example so let's make a new file in there called let's see this will be our functional component which I will call capital T to do J s don't ask me again it's just asking me from a DAT get and I will also make a to do slice function and let's just get some boilerplate or to do in our to dysfunction of component I'm gonna let me just zoom in for us real quick let me just zoom in both of these real quick okay so I'm back on my to do is let's import react first of all and for react from react Const capital to do you'll be a functional component without any props I think and let's just return for now div to do how about that and then export default to do let's just make sure that we could see this correctly I'm gonna go to where do I want to go to the apt is and let's erase all of this nonsense for now I'm just gonna leave the outer tip I think and within here I'm gonna first import or to do functional component import oh did I make it at the default export yes I did I made a default export so instead of putting a named export I will say import to do from features to do and to do I will personally never structure my code this way but because they're doing it like this I will choose to do it like this as well and let's just use our to the component puller to the component within our div so again it's not that I look pretty I will not focus on stylizing here let me just zoom in for us real quick and you can see the to do that we made here okay so now before we go on and putting more things within our to do functional component let's build up our to do slice so we are gonna make our to do slice let me just make this a full-screen we will make this like the counter slice as a matter of fact why don't we open up the color slice side-by-side you don't have to do this I will just do this as reference so that we could create our to do slice from function function here so first of all we will import a named export called Chris slice from at redox JX / toolkit export constant slice will equal crate slice and I will take in an object the first one will be the name of our slice which I will just call to do our initial State so pretty much let's just think about what our to do is gonna look like so our two deuce will be a list of two deuce as a matter of fact why don't we just call it two twos do I like that word do I like to do it yes because it will be a list of two deuce so our initial state will be an empty array and as we fill up the two deuce we will fill up objects in here and the shape of the object I will describe in a little bit but let's define our reducers reducers we will have a couple let's see we could first have arm add to do how about create normally I would like to do I would have named my reducer like a more descriptive title such as crate to do or something like that but because of the way that this Chris slice function creates our action types by first prepending our action creators with this action type with these two do's and in our slash and then the name of our reducer here so I don't need to make this a very descriptive name here for the reducers I could just create call it create and let's see this one will receive a payload so instead of just having a typical state like this we will have state and then an action kind of like our increment by amount that we have here in the counter and let's think about what we're going to do we're on we're going to we're going to push to this array a new to do that we have gotten let me first the structure the payload from our action Const payload from our action and let's see I'm going to assume that the payload let's see what will be in a pillow let's just pretend that a pillow contains the name of our to do and I have to keep a unique ID to our to do so I'm just gonna do something really like hacky I will just say let to do ID our set that equal to one and whenever I make a new to do I will just increment this I will use this to kind of give each of our to do so unique ID okay you will never do this in real life maybe you might use our librarian like you you ID to generate unique IDs but you know I don't want to call to the process of installing all that so let's just do it this way okay so we will do normally if this was a typical non aimer reducer we would return perhaps spreading our current state and then making a new to do object like so but because we are using ml we could mutate our scorin called muted our state and they'll be fine so what I'm gonna do is I am instead going to push up on to our state state that push and we are gonna push the object that looks like this not sure what's going on there we go I feel like I'm missing a quotation mark I think I am yeah okay so I am going to push up onto our us to this our to-do state maybe we'll just call it description will be our payload that's the name of our to do and let's first give it ID ID will be to do ID this variable that I have to find up here and I will say is complete is false initially so later we could toggle this to be true and afterwards so this we have added to our state and then we will just increment the to do ID so that whenever we add another to do you'll use the next ID so that is our first reducer I'm kind of going crazy with our object what is this called curly brace here not sure what's going on but let me just try fixing it just a little bit I think that's a little better okay so that's our first reducer and we will also have let's see edit so this one will sorry this one will also have action because we're gonna eat the payload and why don't we the structure the payload again and in this instance the payload will have two things so why don't we just is the structure from the payload as a matter of fact actually our payload and we're going to restructure the ID and also the description so the edit we could edit the description of a particular to do so what we will do is we first got to find the to do with in our state which is an array so let's do that so Const to do to edit it's going to be state dot find and we will iterate through each of our two dues and find out to do that has the same ID as the ID that we have given it like so that we have the structure from our payload now this is giving me an error but it's because I want to use triple equal signs okay so if we have found the corresponding to do from our state I will update it by doing this to do to edit that description is gonna be the new description that we got from our payload so again here we are mutating or state directly and this is fine with Emmer so I guess it does make our code a lot cleaner maybe maybe easier like what the author of this redox was saying that this email makes it a lot easier what else do we want create edit mm-hmm how about toggle completes toggle complete why not and this one I don't need an AK actually I didn't interaction I need a payload so I will get both and I'm in this structure the let's see I'll just be structurally payload and in this case the payload will be the ID action like so I'm not being very consistent with the way that I formed my my payload but whatever okay so I will do Const to do to toggle state that find to do to do that ID is each triple equals to the payload and if we found out the to do to toggle then I will update to do to toggle that is complete is equal to the opposite of its original is complete like so what else you have how about erase or remove or delete so this one will also have an action and its payload will also be an ID like so let's find constant to do to delete state oh let me actually think about how I'm gonna do this so normally how we would delete from an array is we will first find the index of the to do that we want to delete and then we got our we do this crazy thing like let's say I was the index right so maybe constant I that was our index that we found that we're gonna delete what we would typically have to do is have a return see we're gonna return a new array with data that state that sliced that goes from zero to our index and then that that that state that slice starting from index plus 1 all the way to the end so this would this would have been out of way without Emmer to delete a particular element in an array right however because we have a map we don't need to do this crazy stuff anymore we could use this splice method which changes the array in place it gets through it could get you could remove some elements of it in place without returning a new element so that's what we're gonna do here so but let's first find our to do to delete so Const to do to delete state defined to do is to do that ID triple equals payload and if we found it if to do to delete then we will do this um actually do I want to do that how about I know I want the index five index let's use that instead and I'll just call this index and if we find the index if we didn't find an index and this will give us negative one so we will say if this does not equal negative one that means we did find the index so how do we get rid of it we will call a slice method splice method I mean state that splice and we say ok look at the autocomplete series that we start at index that we found in a deadly car how many elements starting from this index do we want to leave and we just wanted to do one so that looks much cleaner than the spread up or nonsense that was going on without immer I think so is that good enough for us I think that's good enough for now if we need more reducers we will add them later now the beautiful thing is the next thing they have is a select count which is just a selector we're not bad we don't need this so we're not gonna make one however the beautiful thing that I want to do is the structure from our slice that we just created here all the action that he has created for us let's do that right here export Const what do we have we have the crate we have the edit we have the toggle complete and we have the delete from sliced actions hopefully I'm doing everything correct export console wise is giving me an error let's see that expected not sure why it's expecting that and let's also export default or slice that reducer I'm not sure what is going on here oh I know I think delete is a reserved keyword maybe so we can't use delete delete as a variable name let me see if that is true constant elite yeah we can't do that is turning purple so I won't call this delete I will just call this remove how about that unless remove is also keyword okay so that seems to be fine okay so again delete is a keyword in JavaScript that's why I can't call this a delete so that's something to watch out for make sure you don't name your reducers as 100 javascript keywords good lesson to be learned now that we have created our slice let's go to our storage a s let me zoom it for us and here we have the combined reducers things going on here why do I keep on doing down here okay so let's add a new reducer our slice we are calling it to deuce let's see and let's first import our reducer import to deuce reduce time varying being inconsistent with the plural s within my to table whatever sorry about that that's bugging you features are to do to do slice so and this will be to do this reducer okay so now we got our two dudes reducer connected let's just make sure that we could see that how do we tell to how do we know if it's connected to our store open up your debt this handy dev tools bring it in right here and if you see my state you now we now have to do so I know that we have coded this correctly now let's um mess with our to-do functional component let me just zoom out just a tiny bit and just for reference let me get my counter functional component put it here just to use it as a guidance um so first I need let's see what do I need this is not the file that I want to be editing I want to be editing the to do functional component so make sure you're here I know I'm gonna need ru state so let's just import that from reactor right away and I also do need all you select your hook and all so I'll use this patch hook not juice dispatch but use dispatch from react Redux and we are gonna import our various action creators that this crate slice automatically created for us from to do slice and what were they called our called create edit remove and toggle complete right okay so what else do we need we don't have a style function we don't care about that let's first take out our grab T - dues from our store so the way that we've ended is const to do is use selector I will just do in my selector your selector here we will say state state that - dues did I have Esther or no s this is terrible I'm sorry guys about this inconsistencies I'm just trying to get this done real quick but it's a s so state a to duce okay so let's do make sure that we got that correctly I'm gonna console.log to those make sure that that is an empty array right now let me refresh the page open up the terminal and we have now raised to do this arrays of 0 that's good ok so now let's get this all set up first I am going to make a form with them my tip like so this will be deformed to create new to do so on submit I will just make a handle submit here and make that method here above our return handle submit gets an e the first thing I want to do always is either prevent default right now and then I will just finish this later to do to do finish this to do submit later what I am interested in right now is not the handle submit but an actual input within this form input what should we call this input let me make a state variable right now we'll say Const input text set input text is going to be from the new state if we're gonna initialize it as an empty string input value will be from our input text like so and we will also have an on change event handler for this input handle input know we don't even need to do that we'll just do it night so e IC set input text is going to be either target up value like so let's just make put new lines in that I really don't like coding with that prettier but whatever and also we will have a button here great new create new that will be R text and this will be a type submit' like so okay now let's take care of our handle cement first we're going to prevent the default of for submitting the form what else wanted at the end of our end at the end of it all I just want to set the input text back to an empty string that's at the very end but what we are interested in is we had to dispatch an action or inaction so in order to do that we gotta first declare the dispatch function by from don't use dispatch hook so now that we have a dispatch we could do let's see dispatch and we want to dispatch a great action this accepts a payload right what type of payload did this was set it's just the text I believe so if I go back to my crate we do sir yes I get the text the text is in the payload and I just put in the description so that's what I would do going back to here let us crate and we will give the input text and that will be our payload okay so I think that is all good let's just make sure that that is working are not displaying the to Do's here anywhere noticed our to deus from our you selected is unused it's grayed out but I just wanna using this handy Redux that toast toolkit I want to see if my stake gets updated and my actions call so let's try that test one two three notices two discrete action has been called right here and if I look at my to do is now we see one element with the test one two three with the idea of one is completely small so that's very good now let's display that within below our form so I'm gonna do to do some map to do and we're just gonna inline this div just put some space there if that class key is going to be the to do that idea just give a unique key so that react us and complain to me about not having any keys to our children and also we're just gonna show the description for now to do that description like so let's see if we see it now test one two three yep we see here test one two four and we see it here as well that's very good that is very good let's also create couple buttons here and how about this hmm how can we show it whether it is done or not I'm just gonna do something very sketchy I will say if to do that is complete if I could type it correctly if that is true then I will right here done otherwise don't show anything like so obviously there's no way to test that because we don't have any toggle let's see next to it I will have a button and this button will be to edit our description let's do a delete first delete and this on click will be handle delete which is a method that I will create and I'm just gonna pass it along the ID to do the ID so let's make the hand italy here can't handle delete this takes an ID as a parameter but because we got a passive functions reference I will do this and let's see what can we do we are going to dispatch I think all Italy because that was cured remove and the payload that we're gonna give is the ID let's see if that works so let me test it here let's create a new one and then I delete and it got it got rid of it and if you could if you look at the read of stuff tools we have that to do action here okay so that is good art delete is working let's make another easy one button on click handle toggle handle toggle give it a to do the ID toggle and let's see this will mark it as complete or not complete handle toggle looks the same like this I don't need these parentheses so let's just get rid of them okay so we're just gonna dispatch the Tarwater toggle complete action creator and we are gonna pass the ID as a payload let's see if that works maybe see Targo and we see the dot we toggle okay and it gets rid of it so that is working as well and if we look at our dev tools we see that our complete so that is good now let's get on with the final one which is edit button on click handle edit to do the ID edit okay so how should we handle this Const handle edit let's see just gets an ID this is what I will do I'm gonna make a new state variable cost is is edit mode is editing is a better yeah haha no no is editing to do about that set is editing to do this will be a boolean you state which will initialize as false and we will say set is edit to do but how would I know which to do we are editing so maybe I can't do Falls but I will put an ID here I will initialize it as negative one and if we are editing a particular to do we will set that as the ID so let's do this if let's see yeah within here actually let me undo that this is what I'm going to do if is editing to do it's equal to due to our current ID within our to-do SMAP method here if that's equal then we're going to show something special which is our input form to edit our current to do otherwise we are going to just display all of this so I am going to put our fragment and put that inside and we just have to create our input form here so let's see how I am going to do that I am gonna put a form element on submit handle update how about that and we're gonna have a input and let's do make a new stable here can't edit text set edit text we will initialize this as an empty string but when we click handle edit we will also mmm maybe I just I don't need just t ID I also need the description right yes or handle edit let's give it pass it our description now why are we passing the description is because I also want to set the edit text initially with the edit text say was before said let me get the description here like so and let's see within our input value now will be from the edit text and we will also have a on change here II will do an inline function I'll set edit text eat that target down Talia okay so let me just put that in a new line no just terrible okay alright that's good enough and then we will have a button type submit update it's about that and we also need a handle update method can't handle update gets it e first thing first ether prevent the font and then we are gonna dispatch so dispatch up until we call it edit yes we called it edit edit and what payload does this receive let's go back to our um to do slice let me check out the Edit we have given it an ID and a description to our payload so we gotta pass in an object so I'm going to pass in an object ID will be is editing to do oh I don't like this name anymore but whatever we should have called it like to do editing to do ID but I didn't and I'm too lazy to refactor right now so let's just write is editing to do that will be our ID and the description is going to be our edit text so once we have this passed this action I want to reset everything set is editing to do two negative one and set edit text back to an empty string so that should work if everything is correct let's see if that solder issue are makes the Edit successful let me try that ABC let's edit notice the ABC is hearing now let's do ABCD ABC ABCD update and we have successfully updated rest as well so that is good and I think we are done with this very basic and very poorly written to-do app using this new paradigm of new quote unquote official way of setting up a Redux application if you guys like this content again I'm very sorry that my point of this tutorial this to do was not to really show you guys how to properly call this one I just want to show you guys really quick how to make a redox application using this crate slice function that this redox tool kit comes with so if you guys are interested I may make a more formal more hardcore video explaining all the intricity 's in trick instead of crack world all the nuances of the redox toolkit so guys if you guys want to see that please comment in the section or comments section below let me know if you're interested then I will make a very elaborate tutorial video on how to use it and all the different functions that you also comes with I will explain those too so guys if you guys like my content please click like and subscribe below I release these type of coding videos on a couple times couple times a week I haven't posted a video about the past six days and that was because my computer was getting repaired but now I got it back so I will be back here on YouTube making videos for you guys anyways guys hope you guys like this I personally will mess around with this great react up Redux template a lot more to get more comfortable with it and hopefully I think you'll be pretty useful so hopefully you guys like this too and you guys will use this in your feature react read applications and have a good day happy coding and I will see you guys next time

Channel: Justin Kim

Views: 9,816

Rating: 4.9376945 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

Id: xbgwyhHmCyU

Length: 52min 52sec (3172 seconds)

Published: Sat Feb 22 2020

Reddit Comments

[u/tbone6778]

Would be nice to make a video comparing the toolkit to the “standard” set up like you say in the video. I subscribed to your channel. Great work with Redux Mark and keeping up with the React team

[u/acemarke]

Nice video! (Also pleased that you actually read my "Redux Toolkit 1.0" post and referenced it :) )

[u/hermit-the-frog]

Very very cool. Well done video and a great example to explain how redux toolkit makes things easier and cleaner.

I've been a bit hesitant to use redux at all due to the added complexity, but this makes the benefits clearer and it's much less messy, especially when using hooks.

[u/ShineOn_CrazyDiamond]

Very nice! Any plans to support redux+typescript together?

[u/Vtempero]

Noob question: does redux and hooks solves the same kind of problem in a react app?

[u/benlorantfy]

Nice video! Crazy someone made a tutorial about something I helped make 🤯

[u/Ethan-Nathaniel]

Nice video. Though I'm still wondering how you would make a thunk with RTK. Could you put it in the reducer and the action would be generated for you? That sounds too easy

[u/rodrigocfd]

Newbie question: why doesn't the template offer a plain Redux solution? It would be the starting point to whichever libraries you like, if you ever want to use one. Then, upon it, other templates with other libraries could be written.

It seems to me that start off with a library will eventually kill everything else (not really, but it's like having a privilege).