React Redux Toolkit Setup and CreateAsyncThunk on API

hey guys welcome back to my another video in this video i'm going to show up basic tutorials on the our redox toolkit uh using the uh great async tonk so let's get started so i have the project here for react to it's called the react tool and this is running on localhost 3000 as you guys can see here it's a blank rear project nothing else so on the react project here if you are go to my packages i have installed the redox js toolkit i have installed the xeos for api call i have installed the react redox okay and this all this react and it's it's come with it come with the the uh when i built this project using the react uh command line and if you guys don't have these projects on your own then you guys can go to the redux toolkit chest or these websites here on the top and quick start if you go here you can directly sorry and get started here you can directly create your react application using this command here and it will also install the redox here and later on you can install the redox gestures toolkit on it but if you have already a project then you don't have to do this you just need to install the toolkit and i installed the xuse as well i'm going to put this code in a github so you guys can download it easily so let's get started on this redux toolkit with the using the create async tong and i will also put the a link below what is the redux what's the basic of the redox if you guys didn't know what the redux does and i'll try to explain on this video uh but i have explained well on on other video which i'm going to put it down there in below okay this video is only focusing on the react toolkits quickly and especially focusing on the uh create async talk so furthermore without wasting any time i'm going to start creating a new folder here called store and inside this store i'm going to create something called store.js okay so on store.js now so i'll create a constant here called store from our react redux so let's import that configure store from sorry redux toolkit so once i get this configure store from redox toolkit i will export this as a default okay so now it's exported as a default and in configure we don't have anything configured here so what we're going to do is i'm going to create a reducer which is an initial of it so inside the radios there could be a multiple reducer so i'll just create and one reducer card load m and this load m is basically it will call our reducer okay so what i'm going to do for load m is i'm not create a lower m at this point i'll just leave it like this i will create as come back this later on so after i create this store i need to bind this store with my app so in my index.json which i don't have anything so now i need to create or something called provider the provider is coming from react redox so provider i need to wrap my whole applications our whole application in a provider and in the provider there is a field called store which we need to tell where the store is from so a store is coming from there okay so i don't need this now okay so once i do this now my or our application is wrapped up with this so if i go in here and i have this redux extension tool which is installed here if you guys don't have this then you can install the extension then you can install the redox devtools which you can see it here so i have already added my uh the state on my application so that's why we can see this but we don't have any not annoyed at this time so now let's create a reducer so if you guys follow my another video for redux toolkit which i'm going to put a video down there too then we need to create a reducer so there is different ways to create a reducer we can use this waste this is the initial way of how the react redux work but this react toolkit provide or something called slice which we can initially create our slice and inside this slice we have our name we can provide a slice name we can create the reducer here i have already created the the for another video to talk about this reducer here but in this video i'm only mostly focusing on this one creating calling the apis and this is the api which i'm going to call guys so this is the api which i'm going to call okay so now uh what okay so what we have is to the next part is to create a slice so i'll just copy this doesn't so now i'll just go in here and in store another create another folder called features and inside the feature now i will create uh the let's create a folder called lorem so this is the data that what we are getting it so i will create something called loadingslice.json.js so once i have this is a counter slice which i copy so there is a function called clear slice and which we need to import from the redox js and this is a counter so we don't this is not our counter this is called lorem slice so our lorem slice so the name we need to provide here is a load m and this is the initial state which we need to provide here or we can also provide like this so what would be our initial state also would be a data maybe the empty and if a success is true or false right on we can also provide any kind of error message if we have it and we can also provide something called if the loading bar is true or false something like that okay so so far we have like this kind of initial data what we have and this is our reducer so we don't need to use this any reducer for this demo at this point we need to do something called extra reducer because this reducer is is just to manipulate the data of the state this will also manipulate data but when we do call the apis then we will use something called extra reducer okay so once we use the extra reducer then if you guys can check it here it also shows the example that how we can use the extra reducer right here right if we use the extra reducer then yes of course here we could use the builder and it will provide a builder and inside the builder we could able to create our own action here inside the builder and specifically this action is is coming using the uh apis or or not or it couldn't be used calling the apis you can create your own accents and you can using using the extra reducer here but let's go back and let's use our the functions there so you know in here so what we do extra reducer is basically we'll just leave it as empty first let me yeah export this right export default let me export the loading slice here so if i export the loading slice now i export this already so now if i go back on my reducer i'll just import here so i'll create something called lorem and i'll just create the loading slice and if you do dot then it will give you a reducer it will give you accent it give you a case reducer name but we need the reducer here so i save it now my store guide or reducer which is coming from this and my initial data is this guy so if i go to back to my app and if i check it out then if i go my stats see my it get my initial data right that's how i can get my initial data here which was i have it already got it it was already wrote in there so the first thing what we need is we need to use that functions call create async tank where is it here it already show you that how we can use these functions here using the builder and we can add our add case which i'm going to show you how we can use it okay we can create this on different folder different files somewhere on here for this or we could also create on top without it really depends on it really depends up to you but it's better to create a different file okay but for this one i will create it right here and this is going to be get the loading right loading data right so this logo will be again loading data and we're going to use a create uh create a sync tank okay so basically this will create async tank the first thing what we need to provide if you check an example it it's provide here something called users basically the name of the users and what would be the uh these functions do basically what it's supposed to do it basically it's trying to get the fetch user by id right so we don't want to fetch user by id hour is a loan so what we need to do is we don't need that we need uh basically we need to get data that's it get data or get loan data doesn't matter but just data so once we provided this just so the next parameter is basically if we are providing any argument here then we can get the arc here if we want right we can get our arguments from the uh function from dispatch what we're trying to do and and here now we need to return what this asynctank does okay so what our aging tone does is basically uh let's do a try and catch because we need to call the api here using the axios so we have x use if i import the axios okay my visual studio doesn't like the x series it does not give the axios let me let me import it myself let me force the visual studio to import it okay so once i get the xcos now i will use that dip api call where is my disk api it doesn't matter just put it there api so once i get this actions i will get this data here so it will excuse will give you basically it will call the get request and it will give you in data so i'll just write your data so once i write a data here so i'll just return it and return this data so what if it's failed right here in the second argument uh this guy provide a bunch of functions here some something called dispatch if we're trying to dispatch any other functions from this inside uh we'll get loadem then we can do that too but there's something called reject with value so basically if there is an error then we can use this functions uh here if there is error then we will just reset it if it's not then we will use a get loaded okay now once we get this so now this get loadem is action and this will provide a couple of more this is going to be a type and this is going to be a payload for this action and now we need to tell this accent to our slice so how we can tell it so how you can tell it is using the this one extra reducer and as you know that is there is a builder which we can use in example but there is another way that what we can do using this using here to get lorem now it will provide the three functions here the first thing is pending what if if this is pending then what is supposed to do now when we can tell what it's supposed to do right so it provide me the uh the the state the first thing and the second was this payload okay oh oh one thing sorry uh we don't want this here it has to be like this okay so so what happened now is basically oh this would be action and this will give me a payload here sorry sorry guys so what happened now if it's pending then what is our state supposed to do uh so what we do is we will use a state and this state has the the loader so whenever is uh the data is trying to fetch it then we will just put our state is true true so we don't have to mutate our state here uh the reason behind is because our the slice is already using the uh library called immer for mutating the objects so we don't have to do anything okay we can literally can uh change our state which makes our life a little easier so now let's go back so here when his loading is pending basically this action is going to be pending then we just change our state to true so now it will provide me at three functions uh one is called pending the another is called fulfill and the last one is called rejected so one is fulfill the loading data is false and our state data is going to be a payload which is going to be a data that what we're going to return it okay and uh and each success is also true okay and we don't have to provide a message but if it's error then we provide a message which is going to be a payload and of course the loading is false and it success is false as well okay we're going to have to provide the hit up because it's already or empty field so once we assign this and our slice has already extra reducer and it's binding with this guy the only one thing what we need to do is we need to call this function how we can call this action right how we can call this grid isn't done so now let's go back so our work is done here actually on our store instead so now only thing is to go to the component and call it so this is my component here so i'm going to remove everything here and in here whenever the use effect is triggering then we will dispatch so there is a hook called use dispatch which we can import it from react redox and and on this patch what we do is we'll use the get and what is the our action credit async done that what we created was get low ram oh we need to export this as well okay so once i export this now i will use this gate log ram inside here okay it got from here it dispatched here so once it's dispatched now our state will be changed as a data let me check so once i refresh it as you guys can see in my state the first thing it does is initialize in action second is it's called the type called lorem gate data and the pending this is a type and this is the payload it's trying to depending in the pending state so now if it's fulfilled if i click on fulfilled and if i check the fulfill it give me a this as a fulfill here okay so if i check my state it looks like i didn't return i did some mistake here if i go back i returned the data but it doesn't get the data yet uh so if i do a console.log data just to see oh oh wait sorry it was should be await here and this should be a sinkhole sorry for that forgot about this so once i do a weight async i already got a data if i check my reducer here if i go in my initial state then my initial state is already no just let me go to action first init action the pending action fulfill action i got the payload already a data here if i check my state i'm in fulfill my state is changing and it has bunch of data's which is good success is true if i go pending yep this is our pending state and this is our links real estate so we already got the data in our state which is perfectly fine what we need and when it's the form is loading at the first time then it's called get load ramp and it will update our state but how we can print on the screen so there is a function called not function is it's a hook called use selector and in this selector it will give me the all the state but we just need a lowering state so i'll just use as a lowering state so whenever our main state will be changed then this selector will be trigger and we will get the data in a loading here so if i check it here if i redo ah refresh it okay we need to import the selector of course from the our react redux so once i save it so now we already got the data here if i refresh first time as you can see quickly you just see uh faults there and if i make this as a slow so now you call a little slower so if i refresh it as you guys can see here now success is false loading is true it's loading it now loading is false success is true and if i refresh one more time let me check one more time success is false loading is true and now success is true loading is false and we got the data all right so that's all for this video guys i'm gonna put this code inside the uh github and yeah you can let me know if you guys have any questions and please do subscribe and like my videos thank you very much guys bye for now

Channel: Sam Lama

Views: 27,229

Keywords:

Id: Oc14xbizA2o

Length: 18min 23sec (1103 seconds)

Published: Wed Dec 08 2021