Redux For Beginners | Redux Tutorial with Redux Toolkit

hello my friends today i'm gonna make the clearest explanation of the redux i know it's a nightmare for beginners and still confusing for others but after this video you are gonna see how easy it is and i promise you will be more confident if you are tired of simple and nonsense increase and decrease number examples don't worry i'm gonna show you how to use it on a real world example first you will learn how to define and update your redux states and then we are gonna be using async functions on redux and learn how to use it with a real api after that you will be able to understand the real usage of the redux and implement it to your projects okay i hope you will like it if you want to see more tutorials like this you can subscribe to the channel and like the video if you are ready let's get started okay firstly i created a simple react application i got some components here my nurbar left bar and each item is here is a different component and we have an update page update component here and this warning is a different component also and finally the right part and each recommendation here each item is a different component to better understanding i can show you this graphic so main components are connected to app and child components are connected to left and right bar okay basically we have a user in our application and we are gonna try to update our account but as you realize our username is not only here it's here on the top here here here and here so when i update my user i expect that updating all username areas around the app the first thing you probably think is creating here a state and pass our name as a prop okay it's a good idea let's create our new statehook here i will say name and set name and initial value will be let's say john and i'm gonna use this name inside my top bar if i go to the page as you can see it's still the same if i change this name it's gonna affect here perfect but it's not only the number we are gonna use it inside this list item but to reach this item we should first pass our name to left bar and then it's child there is no way to pass it directly from grandparents to child and after that we need it here and also we have to pass our set name to update our account because we are changing our name inside this component and for others as we realize we don't need the username in these components but we have to pass it to use in our child components for this small tree it's totally okay it's just a one page of this application imagine a complete react app something like that and you need to use a name or whatever only in these red components it's a huge problem to pass probes through all these three and it's called prop drilling it doesn't only consume your time it also consumes your resources because when you change your username these all components are gonna re-render even if you don't use that username basically it's a terrible solution so what if we got a store somewhere here independent from any component it just stores our username or other informations like username email address so on doesn't matter and whenever we need any of these informations in any component it just provides immediately and we have a username right now we don't need any parents we don't need to re-render other components and for others it will be the same and moreover we don't have to use set state in the update component because at any time and in any component we are able to change our store state yeah we can update our state everywhere and it changes every username in other components directly it's awesome so we are lucky that we have many state management tools and the redux is one of them and probably the most popular one i know some of you are gonna say probably what about context api it's appsome also but i wouldn't say that context api is a state management tool with a state management tool you can choose any specific item inside your store state and re-render your component depending on only that element but the context api depends on the whole state anyway i'm not gonna deep dive into it it's just a redux course if you want me to compare state management solutions you can leave a comment so i will create an independent video anyway let's continue and let's create our first redux i'm going to open here to official documentation of the redux and installation and as you can see the official documentation recommends using redux toolkit it's the more clear and easier version of the redux so you are lucky that it became the official redux approach in the documentation before the toolkit it was more complex and learning curve was a little bit higher so it's good news for you so let's follow the documentation as you can see firstly we should add redux js toolkit if you are using npm you can write npm install but i'm gonna use yarn doesn't matter so i will come here and in my console i'm gonna open up new one and i'm gonna paste it it says create a react app but we already have so we don't need that and after that we are gonna install our original redux so i'm gonna paste it and we are gonna install our redux and there is an example here as you can see it's a little bit confusing because we are using switch case block here action types and cases and your reducer actions it's a little bit confusing so we are gonna come here as you can see it's more basic and easy to understand and write so we are gonna be using redux toolkit and don't worry about redox toolkit that because it's the official recommendation so it's not just a package or something if you want to of course i can explain this later so we are gonna start with redux toolkit okay firstly as you can see we should import our create slice and configure store functions but in this example everything is in the same page our store our reducer our actions our dispatch so we are not gonna do this like that we are gonna make more real work to example so what i will do is coming here and creating redux folder i will say redux and inside i'm gonna say user slice it's gonna be our slice here and i'm gonna create store also it's gonna be independent so let's say store.js so basically i'm gonna separate them let's copy this and i'm gonna paste but we don't have configure store and for here i'm gonna delete create slice okay so after that as you can see we are creating our redux slice here in the example it's a counter slice but we are gonna create user slice basically in this store we are gonna have a user and it's gonna include our username email password whatever our user information so let's create i will say export const and user slice and my create slice function and inside it's gonna be an object firstly i'm gonna indicate my store name it's gonna be user for example we are gonna have store and inside this store we are gonna have user and maybe have posts and settings whatever let's delete this and here i'm going to create my initial state at the beginning when we run our application you can give empty username and email but in this example we can just write something else to see better it's gonna include our name let's say john and email john gmail.com and after that as you can see we should create our reducers and it includes our actions like increment and decrement here basically when we call this action it takes the state and increase this value here inside this state and for this action it just decrement this value so we are gonna do this similar thing what we are gonna do is changing our user so i'm gonna say reducers and it's gonna be update action and it's gonna take state and action you will understand better right now don't worry and here i'm gonna change my user if you go to the update as you can see we have username input email input and password input we are not gonna use password it's not important for this example and we have a button basically we are gonna write here our username email and when we update we are gonna send this information to our reducer so how i'm gonna do this let's come here and write to use state so it's gonna be name and set name and i will say use date and at the beginning it's empty because we didn't write anything inside our input and the email will be the same okay so how i'm gonna change these items let's come here for this input i will say on change and i'm gonna write to event and whenever i change this input i'm gonna update my name state set name and it's gonna be event target and value so i can do the same thing for email let's copy this and paste here and this time it's going to be set email so let's write here console log and check whether it works or not i will say console log name and email let's see i will open up my console and i'm changing here as you can see our name is here and this is our email it works so in this case when i click this button i can send this name and email to our reducer and they are gonna be basically our action payloads so if you realize i wrote here action so if i say action and payload it means it's our new username and new email here so it's like name and email okay so it's easy to use it right now so this state is our user state here basically i can change my name and email so i will say state dot name equals action dot payload so if i say dot name it's gonna update this name so i can do the same thing for email our email inside our user state will be new email which will pass here perfect i will come here and export my actions i will say update which is my action name and i'm gonna write here user slice and actions i just export this action in this case i can use it in my update page i will just write here on click function when i click this update button i'm gonna dispatch this action that's why we are exporting okay i should export one more thing it's gonna be our reducer so we are gonna use it in our store so let's do that i will say export and i will say default so we can call it in any name i will say user slice and reducer okay it's ready let's come here and let's create our store i will say export default and configure store and i'm gonna say reducer and my store name is user and i can call my reducer let's import this here i will say import user reducer from user slice basically we just import this and i can write here user reducer so our store is ready we can import this anywhere and after that we will be able to reach our user information in our state here and we will be able to reach these actions so how i'm going to use this store i can't use it directly so what i will do is wrapping my application let's go to the index.js basically we are gonna wrap our app and we are gonna provide our store so in any component inside this app we are going to be able to use our store and actions if i don't drop my app if i go to the app.js for example and just wrap this update it means i can use this store and actions only inside my update component i can't use this in left bar right bar or number okay so how i'm gonna wrap my application to do that i'm gonna add here another package it's going to be yarn add and react redux oops redux okay right now what i will import is react redux provider from react redux and here i'm gonna write my provider it's gonna be provider component and it's gonna wrap my application actually i can just delete this strict mode you don't need it and here it's gonna be my store i will say store and equals my store but we don't have here let's import import store and from redux and store so i can pass it here okay right now i can reach this store let's prove it i will come here for now bar for example and how i'm gonna use it here it's really easy we have an awesome react hook so i will say const name because i'm gonna just need this name remember we are using this prop let's delete it and it's gonna be empty for now and i'm gonna use use selector hook use selector and i'm gonna write state and state dot user remember this state name is user and here we have name and email i just need this name so if i say dot name i can reach this value so if i write this name here let's check this out as you can see drone is still here if i change it because it was john you can be confused so i will change it and if i refresh the page as you can see it's anna awesome so i can do the same thing for our recommendation here and our item or this warning so let's do that i will just copy this and for recommendation for example i'm gonna paste it of course i should import this hook and my name is here so i can add my name as you can see it's anna perfect it's really easy let's close them and for menu link inside our left bar i will paste and instead of john i'm gonna write my name of course i should use backtick here okay and i'm gonna import my hook let's see okay it's anna perfect but we have more we have john here let's copy this again and open up our warning component where is that here i will paste again and import use selector and finally i will use my name here and anna i have some and also we have username here and email we can update them also let's go to the update of course we need that but this time i don't need only name i need every information here name and email so instead of name i will say user and i'm gonna delete here let's import this selector okay so i can use this user let's delete this console log by the way and here placeholder will be user dot name and here placeholder will be user.email let's see as you can see anna and john gmail.com where is this f come from okay and i'm gonna change this also okay perfect everything is ready to update our user and i'm gonna dispatch my update action here so how i'm gonna dispatch this action it's really easy we are gonna use one more hook which is use dispatch so i'm gonna say cons dispatch and it's gonna be use this patch hook as you can see they are coming from react redux they're really useful so right now i can dispatch my action but before let's create here a function so i will say on click when i click this button it's gonna call let's say handle update let's create this function i will say const handle update is gonna be taking our events and i'm gonna write here event and prevent default why i'm writing this that because if i don't write this after clicking this button it's gonna refresh our page it's a default behavior of html so to prevent this i just write prevent default okay it's not gonna refresh page after that i'm gonna take my name and email and dispatch my update action so let's say dispatch and here i will call my action which is updates and here let's check as you can see inside user slice and here i'm gonna give my payload which is my name and email by the way you can create your user and say name is this name and email is this email and basically you can just pass here user it's exactly the same thing so it doesn't matter and let's go to the application and i'm gonna write something here let's say check gmail.com i'm gonna update and as you can see here is jack jack jack and jack perfect it works and right now i'm gonna show you why redux is perfect i'm gonna write console.log inside this number and we are gonna check when it's re-rendering so let's come here okay so i will say console.log now power re-rendered as you can see at the beginning it's re-rendering and i'm gonna change here and here i'm gonna update and it's re-rendering again that because we changed this name inside this number but the awesome thing is if i change this email only and update as you can see it's not re-rendering it's selecting only our username that's why this use selector is awesome if you're a beginner it's not important for you but in the future after creating complex application the redux will be your hero trust me okay so i hope you understood how we are changing our state let's actually delete our account also i will come here let's close here actually and i'm going to create one more reducer and it's gonna be remove and i'm gonna take state and action actually we don't need any action and payload because we have just one user in our application so i need just state here and i will say take this state and make it no that because we don't have any user anymore let's try i will write here remove after creating one slice and one reducer others are gonna be really really easy as you can see we just write here action and just export it that's all and we don't have to write anything inside our store okay so let's come here and where is my plate button here and i'm going to create one more onclick function and it's going to be handle delete let's copy this it's going to be the same thing actually i will just multiply this and change my function name and this time instead of update it's going to be remove and remember we don't have any payload i can delete here of course i should import and when i click this it's gonna run this remove action and our state will be null by the way we don't need here object because we are not updating email or username so it's gonna be directly now or basically you can write here empty array so in this case name and email will be stay but they will be empty string so let's try i will delete account and as you can see they are empty and undefined here perfect it works in this case you can go to this component or others and you can make a condition you can say if there is no username don't show this logout and here don't show this user and username here okay so you can write here anything let's say for example add hello and i'm gonna take state and action and i will say state dot name and it's going to be first hello and after action dot payload dot name let's see i will go to the update and here instead of update i will say add hello what was the name yeah at hell but i didn't export this that's why i can't see it let's try again okay it's here i will import and let's see i'm gonna write here john again and i'm gonna update and as you can see hello john perfect i hope you understood how to update delete or add something inside your user state but what about api imagine we have a real api we can log in and register and update our user so i created a mini api here it's really small application and i just write here a post request it's gonna take this url and i set here a timeout that because we are not gonna be using any db so it's kind of fake api and it's gonna be running on this so let's use this application i will start this i will say node and index.js okay our backend server is running right now i'm able to use this endpoint and update my user as you can see we are sending our request our username and email and its response will be exact the same thing we sent nothing will be changed maybe we can add here user id or something but it's not important it's gonna return our users again after two seconds so how i'm gonna use async function inside redux let's delete these reducers and this time our state will not be only name and email also we are going to add expanding and error variables so i will come here and cover this name and email it's gonna be user and after that i will write here pending it's gonna be false and error at the beginning is going to be false so so what i did here we have user object it includes our credentials and also when we start fetching any data or posting something to our api our pending value will be true for example when i click this button it's going to be true and we can show here some progress bar or we can disable this update button and after updating data in our api in our mini api it's going to be false again it's going to be active and if there is an error error in our state will be true so in this case we can write here something we couldn't update the user or something went wrong something like that to do that we have two solutions firstly you can write here your custom reducers update start success and failure and also you can use redux tank and you can use the default solution of redux toolkit first let's try our custom reducers and then i'm gonna show you second solution firstly i will say update start i'm gonna take my state so when i click the update button our pending will be true state dot pending will be true and after that if it's successful if we can update our user in the api i will say update success in this case we will take state and action also that because after successful creation it's gonna send us a response and we can use our new updated user so let's say state and pending false that because we finish our process and state and user by the way i can change this user we have to come here and say user dot user and name so it can be a little bit confusing so instead of double user i'm gonna write here user info so you can understand better i think and it's gonna be our action and payload the last case if there is an error update error and it's going to be only state again we are not going to handle any error status so basically i will say state dot error and it's gonna be true and pending will be false again because we finish our process even if we have an error okay so i will delete them and update my actions first one will be update start update success and update error so how i'm gonna use this action and payload if you want to you can write here your api calls but i prefer creating here other file you can do whatever you want but i will say api calls and i'm gonna import my actions import from my slice user slice and i'm gonna take my actions first one update start update success and update error okay after that let's create a function here i will say export const i set export because we are going to be using this inside our update component i will say update user for example and it's going to be async function and my function so what i'm going to take as parameters if i go to the update this time we are not going to dispatch anything here that because we are going to handle this inside api calls i will say update user and i'm gonna pass my new information which is name and email and finally i'm gonna pass my dispatch so i will say here user info or just user remember it's our new email and name and here i will say dispatch okay firstly when i click the button update button i'm gonna dispatch update start let's write here dispatch and update start action okay after that i'm gonna make my api call so i will say try catch it's really important if you are making any async process you should write try and catch and if there is an error i will call my update error action so i will say dispatch update error and here how i'm gonna make my api call to do that you can use javascript fetch but i prefer using axios so i will say yeah add and axios and we are gonna take this response and dispatch our update success so let's do that i will say const response and i will say await axios and it's going to be post method and it's going to be my api url which is http localhost and part number and let's remember our endpoint here api users id and update i will just copy this and paste here and this id is a parameter so you can write here any number doesn't matter because it's just a fake api we don't have any user id and after that i can dispatch my update success and pass my payload so i will say dispatch update success and my payload which is response and data okay let's see i will come here i will save and for update let's close them actually and update our user and this patch i'm going to save we just import this from our api calls and let's try i hope everything is okay okay remove is not exported that because we don't have remove anymore so i can just comment this out okay by the way they are still undefined that because we changed our state it's not include our name and username it includes our user info object here so i should change them so our user is not user it's gonna be user info and for the others not user user info and i'm gonna update others and menu list i'm warning let's see as you can see it works right now i'm gonna update my user to see that better i highly recommend you to use redux chrome extension let's come here and open up redux you can download this extension it's really useful and it's a time saver so i'm going to change my username and email i'm gonna update as you can see it just run update start first and pending was false and it changed it to true and after that it just dispatched error pending is false and error is true right now but what was the problem let's check this out inside our network cannot post i have a mistake here i think let's check i will close here and api calls okay i have a mistake here just one slash and i forgot here two slashes and after writing my url i shall send my new information and it's gonna be user i forgot this also okay i'm making requests and sending my name and email and it's gonna return us response and data let's try again i will open up again redux tool let's open up here okay i will change check and hello i will update update start and after two seconds update success perfect as you can see it updates our user info right now it's jack and hello gmail.com awesome and as you can see in this start action our banding is true after 2 seconds it's false so i can use this pending i can disable my button here did i write something for this update css let's check okay we don't have disable so i'm gonna write update button and disabled and i will say cursor not allowed and background color will be a little bit softer let's choose here something like that okay and i'm gonna come here and if you want to you can delete here you can take user and you can they structure your user and pending and error actually it's not user it's user info so i can use this pending an error but before i'm gonna update my user here user info dot name user info.email okay so how i'm gonna use this pending at the beginning remember it's false and if i come here and say disabled and it depends on my painting if it's true it's gonna be disabled if it's false it's gonna be normal button and after this button i'm gonna write here if there's an error right here some spam and i will say something went wrong [Music] and let's give class name and i will just say error and in the css let's write here something quickly color red and font size let's say 40. let's try something else and i will update as you can see it's disabled after two seconds it's updating our user and they are here awesome so what if i change my url here it's going to be error let's write here some numbers and try to update again i'm updating it's disabled and something went wrong perhaps maybe i can write margin left 20. okay perfect so i can write successful also let's come here and i will copy this and it's to be success and this time it's going to be green let's come here and i will say if pending is false it's gonna call success class name and i will say account has been updated but if i do that it's gonna always write here account has been updated that because at the beginning our banding is false if i change this to null for example and i will refresh the page okay and i will correct my url let's try i will update after two seconds account has been updated apps so our custom api call works perfectly but there is one more solution if you go to the documentation again as you can see there is one more function create async thunk so here as you can see we can import one more function and we can write our api call directly here and after that it's gonna give us some default actions which is pending fulfilled and rejected it's exactly the same thing with it remember we set update start update success and update failure so redux toolkit just do this for us we don't have to write any custom api call so let's do that if you ask my opinion i will say this way is better that because you are free you can write whatever you want inside your api call but i just want to show this way also so you can compare and use whatever you want so i can delete this so i will write here create async thunk okay after that i'm gonna call my axios here that because we are gonna make our request axios from axios and here i'm gonna write my function it's gonna be export const again update user if you want to i can say just update user 2 because we created update user from api call so it's better i think and after that i'm gonna create my function and here i'm gonna write my action name you can write here anything doesn't matter users let's say updates and here i'm gonna create my async function and i will take user which is name and email and after that i'm gonna make my api call i will say const response and await axios and post methods i will just copy and paste my end point and after that i'm gonna pass my body which is mail and username and after that i'm gonna return my response i'll say return response and data as you realize we didn't write here try and catch block this function just does that for us and we didn't make any error handling everything is gonna work automatically okay so i'm gonna write here something different and it's gonna be extra reducers when you use async redox you can use this function inside your x-ray reducers so how i'm gonna use this here it's a little bit strange but you are gonna use like that update user 2 our function and pending our first action and it's going to take our state and state dot bending it's gonna be true and error will be false and we are not gonna have any user so for the second one is gonna be our function dot fulfilled which means successful and i'm gonna take here my action because i'm gonna use payloads so in this case pending will be false you don't have to write your error and state dot user info it's gonna be action dot payload it's exactly the same thing it's just a little bit different and for the third one if there is an error it's gonna be rejected we don't need action pending will be false and arrow will be true perfect if you write here for example another api call let's copy this and let's say delayed user and your delayed methods here and you will come here copy this and paste again this time it's gonna be played user it's that easy it's your choice so let's try i will go to the update page again i will check here if everything is okay or not okay it returns our data okay let's try only thing i should do is writing my dispatch here and my function name update user two and i'm gonna pass my email and name i should import this why it's not coming i didn't export now i did it's gonna be update by the way not updater why i didn't see this so update user 2 okay if it's not coming i will just write here manually import update user 2 and from redux and user slice of course from here ok let's see i will refresh the page and open up my redux tool okay let's change here i will update pending and fulfilled and our user info as you can see it's updated awesome it works as you can see there are action names which we write here let me show you here pending and success if i change here let's try again updating okay rejected but why i'm seeing this updated ah that because we just set here as false it should be null let's see again because when it sees to be false it automatically right here updated i will try again something went wrong okay perfect pending is null error is true okay we finished writing what else i can show you i can show you root reducer for example we have another slice here let's say post slice so in this case our store is not going to be on the user on the team usually right here is post and post reducer that's all of course you should import it first and after that if you go to the any component and instead of user if you write here post it's going to fetch post state it's that easy seriously after redux tool everything is much more easier and i hope you understood everything if you are still confused don't worry if you are beginner it's totally normal only thing you need is making more practice just watch this video again it's not that long and just try to make an example by yourself if you already tried any of lamadeire projects you can just replace with redox and after one project i promise you you're gonna feel more confident and you're gonna be able to create more complex and more beautiful projects okay i hope you enjoyed i'm gonna keep uploading this kind of videos and after them and after creating glamadel projects you are gonna be a react master i promise you you don't have to watch useless videos everything is here is real world okay i hope you liked it if you learned something new today please like the video and leave just comment even just one word it's really important to me i can feel your support and don't forget to follow lamadev social media accounts it's gonna be really useful for you you can ask your questions and get inspiration from other users i love the guys there seriously they are helping each other so just follow these accounts okay thanks for watching i hope i will see you in the next video goodbye you

Channel: Lama Dev

Views: 13,755

Rating: 4.9891305 out of 5

Keywords: redux, redux tutorial, redux beginners, learn redux, redux course, react redux, why redux, redux vs context api, state management, redux state management, redux toolkit, learn redux toolkit, redux toolkit tutorial, redux toolkit course, react redux toolkit, why redux toolkit, redux toolkit full course, rtk, rtk tutorial, learn rtk, redux hooks, redux thunk, redux async, redux reducer, store, react, learn react, react tutorial, react for beginners, react course, lamadev

Id: DYtYyFOfpBY

Length: 55min 10sec (3310 seconds)

Published: Thu Jul 29 2021

Reddit Comments

[u/nesikim]

Source code: https://github.com/safak/youtube/tree/redux

[u/sevenadrian]

oh man, Redux. I used Redux pretty heavily for like a year (a few years ago, so I'm sure it was a bigger pain than it is now), and there was just so much boiler plate.

Ever since moving to next.js + graphql things have been much more smooth, but I'm glad to see Redux continuing to get better