Redux CRUD Tutorial in React - Redux Toolkit Tutorial

hey guys how's it going i'm back here with another video and today i decided to bring this video where i'm going to be going over how to build a crud application using redux and redux toolkit so i've built many cruds in the past and made tutorials for it but i've never actually done one i'm using the redux library as the state management library for react so i decided that this could be a good learning experience and this is basically what we're going to be building you can see it's very simple i'm not focusing at all on ui or anything like that it's all purely based on the logic and how to actually implement this but basically we have a simple website with a list of all the users in the website and you can do a couple steps you can add a new user so like i'll add the user pedro and the username page of tech and when i click add user it automatically adds page attack here at the bottom as you can see i can also delete a user so if i want to delete pedro tech i can delete pedro tag i can also delete other users as you can see and i can also update a user so i can update this guy's um username to page attack if i want to and when i click update username you can see it updates this person's username now why are we using all of this um of these different features well it's because it'll help you understand how to implement all the different types of stuff that you need to know when using redux and we're going to be using redux toolkit for this tutorial i have a full-on tutorial where i go over all the basics we are going to go over the basics however if you want a more in-depth tutorial on just the basics of redux toolkit um i'll leave a link and i'll tag it up here in the in the video but yeah that's basically it if you could leave a like before we go into the video i'll be very happy because it will help push my videos to more people but yeah with that in mind let's get into the tutorial [Music] [Applause] [Music] [Applause] okay everyone so now let's get directly into writing the code um as you can see over here i created already the project um but it's just i just created a folder and ran create react app i didn't install anything didn't write any piece of code yet all i did was i again created a project and i deleted all the unnecessary files in the source folder and by that i mean i deleted the index.css file the logo file um the setup test file and the app.like the app.test file that comes with the create react app you don't need to delete those but i like deleting them and if you want to delete them make sure to delete the import statements for example i deleted the index.css and i have to delete the import for it over here in the index.js but you don't really need to do that it's just something that i do before i start every project now what i want to do is i want to start out by installing all the necessary packages to make redux work inside of our application so i'm going to open up the terminal over here and we're going to start out by installing react redux so i'll say yarn add and if you're using npm you can just run npm install instead of urine add but i'm going to say yarn add react redux now this is the first pad package we're going to be using um it is a it is basically the redux package that exists in react and then the next package we need to install is the redux toolkit package you install it by just putting at redux js slash toolkit and we press enter and this should start um installing both packages so what we want to do now is we want to start focusing on um actually running our project so i'll open up the terminal and i'll just run yarn start and you can see that now our local host should open over here in our browser and as you can see um it opened up over here now i want to come back to our project as you can see over here and i want to first of all start out by configuring our redux store inside of our project well every project that will include a redux as a state management library will have to have a store configured that is passed throughout all the components that you want to have access to the store so the store is basically where you're going to store all of your states and all of your variables so you need to be able to determine which components you want to be able to access those variables in those states and also be able to change them so over here since we want to create a state management store for our whole project we're going to create it on the index.js file and just pass it uh wrap it around the app component so that every component inside of our project will include and have access to that store so over here at the top and i want to import from redux toolkit i actually have to say at redux js toolkit and i want to import something called configure store so configure store over here this will be used to as as an implies configure the store for us but to use that we also need to have a provider the provider actually comes from react redux and it doesn't matter if you're using a redux toolkit you'll have to use this provider um if you're using redix as a whole in your project so i'm going to say react redux and this is actually a component it's going to be the component that wraps around our app components like this um to determine um which like components inside of this we'll have access to the store now this is very similar to the context api with the provider that exists in the context api so if you're familiar with that it's something similar to that so now what we have to do is we have to create a variable or an instance of our store i'm going to say const store and set it equal to configure store over here and we need to pass an object over here which is going to include the information about our store more importantly since we in redex toolkit all we have to do over here is we have to pass a property called reducer and this property will basically be an object containing all the different types of reducers that you need to have so with rudix toolkit it basically makes everything as simple as possible for you it it makes it the most simplest i've ever seen with other um redux libraries out there so all you have to do here is for example uh if we have states related to users uh we can create here a user's reducer and just set it equal to the reducer that we create in a different file and we're gonna do that uh later on in the video but you basically just set them up like this and the configure store function will know how to deal with everything so for now we actually haven't created any reducer yet um but we will leave it like this for now and we'll do it right after this what we want to do really quickly is just pass this store as the store for this provider so the provider has a property called store and we can just pass the store that we just created but as i mentioned we haven't finished it because we didn't create our reducer yet so we're going to do that right now by coming over here and creating a folder called features um that's the standard name you can use for this and this is where we will include all the different reducers you want to have in your application again as i mentioned if you if you want to have states related to users in your project and also states related to something else like uh maybe you want to change the keep track of the the the font color and text and for some reason you want to keep changing them uh well you can create a an another reducer just for font colors so it's basically every different aspect of your project that needs different state management variables um and they're not related to each other you create a new reducer for each one of them so in this project as you saw we have just users so i'll create over here a user's file over here is called let's just call it users.js actually i'll just put capital letters users.js and this over here will be where we will use or have our use reduce user reducer so how exactly do we create a reducer um in redux toolkit again if this is the first time you're actually learning redux toolkit and learning redux as a whole um i would recommend watching my other video because i go a lot more in depth i explain absolutely everything but if you want to create a reducer using redex toolkit they have a very cool thing called the create slice function so i can say create slice over here and say from um at redux js toolkit and um this will basically be used uh to facilitate almost everything that we usually had to do with like in the old days with redux then we can come over here at the bottom and basically just create a variable called and i'll export it after because we need to have access to this variable outside of this file but we need to create a variable called the user slice and we'll set this equal to create slice and this will be able to uh allow us to create all of the reducers and the actions for the variable for the state in a single place and it will merge everything together so that's kind of the idea of what this actually does um so we're going to create over here of object inside of this create slice function and since this is the user's reducer will give it a name of users so this is the name of the variable that or the state that we're managing in this reducer or in this slice and then over here we can give it an initial state an initial state would be the initial value of of the variable inside of here so for example uh users in their project they are a list of objects right so we have an initial list of objects that that that comes with the data imagine it being the data in a database right um initially it can be anything you want uh but this is where you put that information um and i and i like to put it like this i like to put it as an object and the object has a value so the state always has a property called value and then the the value of the of the value property is the actual value of the state so we can for now let's just put it as an empty array uh meaning that our list of users right now is just an empty array however i'm going to copy and paste fake data that i created for and you saw in the beginning of the video and you can download by the way all the code for this will be in the description um but we're going to be using that fake data and we're going to just import it and put it over here but for now let's just keep it like this and the next thing i need to do is then pass all the reducers for that that we need for this um specifics um slice so what are the reducers well there are different functions that we can call um to provide some sort of action to our state so for example uh you remember i can i was able to add delete and update users right so those are the three different reducers we're gonna add we're gonna add a an add user function a delete user function and an update user function for now let's just create the add user function and i'm going to go over how this like how this notation works and how the for how to format it correctly but basically you give it the name of the function add user then you have two different arguments to this function state and action and you create the function just like this now what exactly is state this state over here is where you access the current value of the state so remember this whole thing over here is you determining um you're creating a variable a state which in this case will be the list of users and determining all the actions you can have with that specific state so whenever we we act we want to access the current list of users so the value in it we can just access it by using the state argument over here inside of this function now what is action well whenever we call this outside of this file so i'm imagine i'm in the app.js component and i'm writing some code and i want to click on a button that adds a user well i will need to pass some data from here to uh so that over here we know what to do with that data so it is passed through this action object now it is obviously quite confusing if this is the first time you are using it uh and you might not understand it however trust me it will come a lot it will make a lot more sense as we get into this but basically uh over here is where we write all of the code for um adding a user adding a user as you can see and the thing is uh right now i don't think it's really smart for us to write this code right now because uh we still our website is still just a blank website we don't have an idea of how the flow of the project will go um so i feel like it will be smarter for us to first add into this project the fake data so you guys can can just look at it and then add all of the ui stuff so that like for example the buttons and the inputs and also display the data so you guys can see it and get an idea of what we're doing okay so as you can see over here i just added this file called fakedata.js and also again if you want to check out this file it will be in the description together with the code it just includes like a list of variable called users data and it is a list of eight users that will have as like fake users in an application they have an id a name and a username as you can see and it's pretty simple so if you want to just copy and create your own users um you can do that but we're going to be using them inside of this users.js file and to do that we're just going to come over here and say import um and we'll import from the the path to the file so two slashes back and fake data and we'll just import right over here the user's data variable and now we can just pass it over here because this will be the initial state of our variable right of our of our user slice so now that we have that let's start building out the ui for our project so to do that we'll just come over here and first of all divide our page into two parts the first part will be the inputs that we'll use to add a user and the second part will be the just the display of the list of users right so i'll just come over here and create two divs um one div will have a class name of um add user and the the other div will have the the thing will be the same thing but it will have a class name of display users um like this and for the add user we'll just add um two inputs so actually one input right no it's two inputs the the name and the username so we'll just say input of type text um and off let's just give it a placeholder over here placeholder and the placeholder for the first one will be just like name um just to demonstrate that it's where you put your name and we'll do the same thing for the other input but instead of name it'll be username and finally the last thing we need is a button so we'll just say button and say add user over here now you can see we have the three inputs over here it doesn't look exactly how it looks in the demo that i showed in the beginning because i do add some code for css at the end and if you want to copy the code it isn't the prettiest thing in the world but again it will be in the description uh that's why we're using class names so that i could just style it a little bit but i'm not going to show you guys me doing it in the video so now that we have the the two inputs in the button we also want to display the users inside of this div right so the way we're going to do this is very simple we can't just import the fake data directly inside of here we can't just import this list and just display it and the reason why we can't do that is because um that data is just the initial data right well we it won't change the screen like that if we just import and display that then it won't change what is being rendered if we make some sort of change to to the list for example add a user or something like that because that's not how it works we need to treat it as a state so we need to read it directly from the slice that we created over here now how do we do it in how do we do that in redux is pretty simple we need to use one hook that comes with react redux and it is a very extreme important hook that you need to learn called the use selector hook so i'll just import from react rubix and i'll just import the use selector and this hook is basically used when you want to read the current value of one of the states that you created in your store so in order to to get that value i'll just say const i'll call it like list of users our user list um like this and set it equal to use selector and in the the use selector over here all we have to do is we pass a function over here and let me just open this up a little bit and this function you can grab the state the current state of the application and you just return whatever value or whatever um reducer you want so what do i mean by that well you can say that you want to return the state and then it might have multiple variables so in the store over here in your index.js you might have multiple reducers right so you grab the reducer the state that you want so in our case it will be users and i'll just say state dot users over here and now you have access to the user's state so you go back to the users reducer over here and you see okay what is the value of it like what what is how do you read the the value of the state well it's an object and the value of it is represented by this property called value in an object so you just say state.users.value over here and this should work however one thing i wanted to point out is that we now created the the user slice right we created this thing we obviously hadn't haven't added any of the reducers yet but we did create it so we do we can now come into our index.js over here and finish this up so that it actually works in our um components so we'll come over here to our um to our users reducer and at the bottom we're going to export uh default the users slice or the yeah the user slice and we'll export the reducer from it so all the reducers so that when we come over here in our index.js we can actually just import that directly over here by saying import users from and then we put a path to um that file that we created the users file and over here now we can just say that we have a reducer called users and the reducer is equal to what we created over there this means that now this thing over here in our app.js will work because now we do have a user's reducer passed to our store and inside of it we pass the user's reducer which we created in this file over here and inside of this file you can see that you can access the value of the state by accessing this object which contains the property value so now which this should be populated with the fake data that we created so that means that over here i should be able to just say um users list um or user list over here dot map like this um grab the each user and for now i'll just say um like this i'll say i want to return just an h1 tag with the name of the user so user.name and let's see if it works um and it does like you can see it is placed in the name of the users that exist in that list so it means that we correctly used the use selector hook and correctly got the data and set up everything uh perfectly right so now what do we do well i want to display not only the the name but also the username so i'll come over here and i'll just say div i'll return a div instead of just an h1 tag and i'll display two h1 tags i'll display the the name and i'll also display the username so user.username like this and now it seems to be working perfectly you can see we see all the names and all the usernames being displayed in our website now how do we um transition this into being able to actually um write all these functions right so the add user function to add a user to this list how do we do this well it's pretty simple over here we need to recognize that we'll be calling this add user function inside of the app.js so when you click this button we'll call that function and we'll send the data that is written instead of these two inputs as some sort of payload some sort of object to that function so that over here we know what to do with it well that is where the action um argument comes in this is the payload for or this is where you include the data that you're going to be used sending from your component to um being added or changed or whatever you want um inside of our reducer so what we want to do here is is very simple um to add a user to this data we just have to manipulate the state the current state which is again the the current variable by saying state which is uh this thing over here it's an object with the value property then saying dot value dot push because it is an array right it's the array of users so we're just pushing when you want to add a user you just want to add a new user to the array and what do we push well assume that when you call this function you're going to be passing the action right the data so you're going to be passing the the name the username and we'll also pass the id just so we we maintain the the standard but basically we'll just pass the action the payload over here so this is basically all we have to write to add a user we'll just the function will just take in the payload from the front from the component and just add it directly to our state so how do we test this out well first of all we do need to export this function um to so that we like actually how do i say actually like import it and use it in your app.js so say export const add user equals to user slice dot actions so what exactly is this well um i'm basically grabbing all the actions and the from this thing over from the user slice so all the actions are all the functions that can be used to alter the state and then i'm just exporting it so that we can use it elsewhere outside of this file so in our app.js we'll import that over here so i'll import the add user from the from the path towards the the features slash users file and over here we want to call that inside of this button so we want to pass um this we want to call this add user function instead of this button over here however we can't just directly call the add user function because uh we need to um use a hook that exists in react redux in order to tell redux that this is a function call that should be registered with our store if that makes any sense we need to use this hook called the used dispatch hook over here and this hook is used whenever you have a component that you want to uh do some sort of action right so what we can do and all actually what we have to do is we just say const dispatch and set it equal to use dispatch and we do this and everything component we want to call an action um and basically that's all we do because now we can use this dispatch which is a function which by the name you might not understand what it means basically means that you want to dispatch an action you want to want to like incinerate and actually want to make an action happen so we're going to grab this dispatch function that we just created and now in the button over here we can pass an unclick very simply and this on click is just a function that will call the that will dispatch the add user um action so how do we do this well all we have to do is just call the dispatch as you can see over here and we just pass the action that we want to dispatch so the action that we want to dispatch is the add user action right that we imported now the add user as i mentioned will take in a payload which is the data that we want to send back to this slice over here and then push it towards uh inside as a new user right so it should be an object containing three things an id uh a name and a username right forgot to put the commas over here but basically it's an id a name and a username so let me save this uh i won't save until i actually put data but basically let me just put random values over here just for now so we can save this but basically as you can see over here this is the format of how we're doing this so what will be the name and what will be the username for the user we want to add well this will be determined by what data the user puts in the inputs so right now we're not putting any data in the inputs so one way we can grab the data from the inputs is by using a an individual state inside of this component so i can do something like i'm coming here at the top and importing the use state hook from a react as you can see then just coming over here and creating a state called a name and create a function called set name which will alter that state and say use state and make it a string because it will be a string then i'm going to copy this over here and i'm just going to paste it down here and change this to username instead of name and this to set user name instead of set name now we need to alter the values of the state based on the input values so i'll just come over here and pass it on change to this um to this input and on this on change we'll grab uh the event like this um let me just go over here grab the event and just set the name to be equal to event dot target value now this is very common in react uh if you want to set the value of a state to be the value of an input you always do something similar to this so we're going to do the same thing for the username i'll just copy this and paste it over here and just set the username to be equal to this and now the username and the name states hold the value of the inputs so that means that when we add a user when we click on the button we want to pass over here the name and the username states as part of the data and one thing a little tip that i can give you guys is when you're using javascript and you have an object and the like the the key is the same name as the the value as you can see the key's name and the value is a variable called name you don't actually need to say name uh call a name you can actually just pass the name once and we can do the same thing for username that's a little tip that uh it's called shorthand notation and i recommend using it now what do we do for the id well if we try this out right now it will work so you can see there's no one called pedro over here but if i add someone called pedro and with the user name pedro tech you should see that uh when i click add user pager and page attack appears here perfectly right and if i add another person like i'll just add random letters over here you should see they work as well however there's an issue there are both ids for this two users over here is zero because this is what we passed over here and visually it doesn't matter right we don't see the id we don't display the id however uh it will matter because um when we are working with updating a username and deleting a user we do need the id to know which specific user we want to delete or update so we do need to keep track of the the username right so or the the the id and if you look at the fake data that i created the id increments by one every time you add a user so an easy way to to do that is basically like this you just come over here into the id and say okay so the id for the next user will have to be the id of the last user in the list plus one right so it's always incrementing by one and you can just grab that id by saying a user's list then grabbing the last user by saying userslist.length and then saying something like minus one so that we can grab the last user and then grabbing the id of that user and adding one to it so again all we're doing is we're setting the id to be equal to the id of the latest user in our user list plus one and let's see if this works obviously it won't get a visual confirmation of it but let's see if anything breaks when we click the button it doesn't seem like it it seems like it's working and we added a new user so right now everything seems to be working perfectly we're now able to add a user to our list by using the add user action now i want to add some css real quick so that this looks a little bit more like what we had in the beginning of the video so i'm going to cut the video real quick come back when i add the css to this app.css file i'm just going to copy and paste because i already made the css but again if you want to check out the css the link will be in the description so i'll be back in a sec okay so i just pasted the css and this is basically what um happens when i paste the css it's not much at all but it's something right so the css is over here very simple like nothing much at all if you want to check it out again just check out in the description well now what we want to do is we want to be able to add real quick uh the functionalities of being able to update a user and delete a user those are the last two things that we want to do however to do that we do need to add the the input for updating a username and uh the buttons for updating username and for deleting the user so we'll do this really quick over here we'll just come over here to our div for each user and when we display each user we now not only want to display the name the username but we also want to display uh an input for uh deleting the user so i'll just say input no no for changing the the username of the user so i'll just give it a type of text actually i'll just copy this input over here that's going to be very similar and i'll just change minor stuff from it so i'll just paste it over here and i'll change this to new username because this is going to be where you write the new username for now let's just comment this out but let's see how it looks yeah this is looks okay then we need two buttons one button for the uh for updating the username so update username and one button for deleting the user so i'll just create over here um like this button delete user and let's take a look and it looks okay as you can see over here we have the two buttons and the input so now what we have to do is write the logic for updating the username and the logic for deleting the user i'll do the deleting the user one real quick because it is actually a lot easier um than updating a user what we have to do is we'll come over here into our user slice and i'll create a an action called delete user similar to add user and again it'll get a state an action and we'll just put finish the function like this and what we want to do is we'll need to use the filter function from javascript to be able to um write some logic for deleting the user over here it's a bit complicated but um you'll get the hang of it so basically uh differently from pushing a user we can't actually directly delete a user from the array we actually need to change the whole array to a new array without the user that we want to delete so we have to say something like state of value is equal to a new array that won't include whichever user we want to delete from our list of users so how do we determine which how do we create an array without that user well we'll just say state the value the filter so we're going to be using the filter function which i hope you're familiar with it because it is extremely important in react and javascript in general but we'll grab the user over here and we'll say something like we only want to keep the user whose id is not equal to the id that we're going to be getting in the payload so in the in this action variable over here we got the payload as you can see right and the payload will be an object containing all of the data that we sent from the component so in the component we can send an id as one of the the keys in this payload object so we can say uh action dot payload so dot payload dot id right now there's no we we haven't passed anything but we will be passing an id as part of the payload so we're just saying in this part over here is we want to filter out um all the users that doesn't meet this thing over here this conditional or this condition which is that their id isn't the idea of the user is not equal to the id that we want to delete um and then we're gonna set this array equal to the um state because that's what we want right so how do we test this out well we'll come to our app.js over here and also i forgot we need to export the delete user action over here so delete user is now an action that we can actually import here at the top so i'll just import it by saying delete user and now we can come to our button for daily user i will just pass an on click and it's unclick will be a function which we'll call the dispatch function from uh from from redux and in the dispatch function we'll just call the delete user action that we imported and the payload over here would just be a single object with an id right which will be the id of the user now we are inside of a map so we're inside of a loop and each user will have a different id so all the id we have passed over here is just the user dot id so now let's test this out let's see if it actually works if i delete uh irving howell you can see everyone how is not here anymore if i delete lynn graham they're not here anymore as well can delete every user if we want to and they'll keep deleting them um forever until we refresh the page or we restart the the website right so this seems to be working and then understand if this logic over here is a little bit confusing i was even confused when i started because uh i thought you couldn't just alter the value of the state like this i thought you had to do something like pushing or filtering directly but uh with the way that redex works you have to do it like this um and it you get used to it so i would recommend just playing around with it and also if you have any trouble with any uh stuff related to the filter i recommend just watching a video on the filter function because again it's extremely important for every single type of react or javascript project in general so now that we've finished the delete functionality we can start working on the update functionality to finally be done with this project so the update functionality will go as follow well to make this work we're going to uh similar to the other two inputs that we have in this project we're going to create a state that represents the value of this input so i'll create a state called instead of username i'll call it new username and instead of set username will say set new username and then i'll come over here and then i'll just change this to set new username instead of set username and then um what we what we need to do is we'll just have to later on um dispatch this updating username function inside of this button over here but we haven't created the action yet so we do have to create the action down here we'll say update username like this update username and similar to the other ones taking another state and an action and we create the function so for updating the username it's going to be a little bit different from the other ones the reason why i like credit is because every single thing that we add every feature that we add is a little bit different you know that adding a user is is easy um we're just displaying the users is even easy just displaying the users is even easier and then deleting is a little bit harder but the last one the hardest one is usually the updating right and in this case it's not different at all updating is a little bit weird but um i'll make do my best to explain it as as good as i can well what you need to do is um we want to update just a single user right we're going to pass here to our action our payload will pass in two things we'll pass in first of all the idea of the user we want to update similar to what we did with the delete user and also the new username that the the user wants to change their username to so what we have to do over here to change just one username is we'll have to map through the this thing over the list of users by saying state.value.map and mapping through the all the users and we'll for for this loop we'll just ask okay if the current user dot id is equal to the action dot payload dot id then we'll will actually change their username so we're only changing the username for the single user with the id equal to the id that we're passing in the payload right so the idea that of the user who wants to change their username so how do we change the username well we'll just say user.username is equal to action.payload.username like this so we're just changing it to the username that we're passing on the payload so this should be it will just export it over here by saying username or actually update username like this then come to the app.js and import the update username from the the file and now finally all we have to do is we'll come over here to our button we'll pass an unclick which will this we will actually call a function that will dispatch the update username action and i put the parentheses wrong but basically the payload that we're going to pass here is just the id which again similar to the delete user is just user.id and finally the username which will be uh just the new username state that we created so we'll say new username now we can check to see if this works by testing it out so i'll just refresh the page um let's try to change the username for for this person currently it's brett which by the way this fake data doesn't make a lot of sense uh just sometimes but like this makes no sense but yeah i'll just change the username from brett to um le leon one two three something like that and you can see that it works perfectly then i'll change internet to uh irvine 555 and you can see it works perfectly and i can delete all the users and i can add new users just to show you guys all the functionalities that we added so this is basically it for the video um i hope you guys gained value from it i hope you guys enjoyed the video um i was able to show a lot uh i know it's over complicated we could have easily done this uh much easier manner if we just used states like just a normal state uh um without having to use any state management but um this is just the basics right this is setting you up for using um redix for future projects bigger projects and redux helps manage bigger projects believe me it will help you a lot in the future so doing this in the beginning just helps to sell to set that foundation for future work and teaches you a lot about the library and how state management works in react as a whole so again really hope you guys enjoyed this video i'm sorry if i didn't post a lot this past two weeks which was new year's week and like the holidays and whatever because i got sick unfortunately i got sick um i wasn't home i'm not home still my setup right now is is um horrible um i don't even have a keyboard i don't have a mouse i don't have anything i'm just recording from the worst place possible but i had to put this out this video for you guys because it's been a while it's been like a week and a half or two weeks so i really wanted to apologize for that but um when i get back which is in five days six days um i'll i'll be able to record as many videos as i can i'm also studying so i'll have to see how that goes but i really appreciate you guys watching check out the code in the description subscribe if you're not subscribed and i see you guys next time [Music] [Applause] [Music] you

Channel: PedroTech

Views: 101,972

Keywords: crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, redux, redux toolkit, reduxjs, react redux, react-redux, redux tutorial, redux tutorial for beginners, redux crud todo app, react redux tutorial, redux toolkit tutorial

Id: bml92jhF4t8

Length: 45min 36sec (2736 seconds)

Published: Wed Jan 12 2022