API Call in Redux Toolkit | Fetch Data with Redux Toolkit | Fetch Data using React-Redux

hello everyone in this video we will use uh redax okay redax toolkit to F data from an API okay this is this video is all about to fch data using redax toolkit so this is the API that where we will Fitch these toos okay and I have created my react app so this just I have fresh react app which I have created now first of all we will install those dependencies that we need to use okay so let's move to the terminal inside this terminal I will install npm install react redact this is the first one and the second one is Art RX gs/ toolkit press enter and we will install these dependencies right now yeah the has installed successfully now let's close it and we will use them okay first of all we will create a folder inside this SRC folder let's name it reduxx inside this reduxx I will create a file by the name name of store. jsx where I will create my store as you know uh if you don't know about the redx toolkit I have uh created a video uh how to use the reduxx and what is all about this I have explain explained in a video so you can watch that okay you have Link in the description for that video so now let's create a store first of all so let's import import from AR Redux J toolkit we will just import configure store okay configure store so after importing it now let's use it use it const um store is equal to configure store and inside it we will create it okay like for example we will assign a name to do and here we will assign our slicer okay right now we did it uh uh imported our slicer so first of all we will create that then we will um uh as use it okay let's export it also export we will export store uh so store also so now let's create our slicer okay just come here uh to do slicer jsx and inside it first let's import from uxx JS toolkit oh this is from jait what we want to uh import uh create slice method create slice okay this is selector and also create a sync method create a sync tank method okay this uh these are both method where this we will use this method okay this uh create a sync tank which is used to pitch API data so this function just just accept two parameters the first one is an action string the second one is a call callback function so now let's create it um just const uh to do slice slice is equal to um we will just call it create slice and inside the slice first we will create um assign a name to this okay name is like to do and then the initial State we will just use it the initial state by default the initial State we will assign three properties the first one is is loading is it in loading or the case has done or not okay it means that by default that is false then our data that we have initially data we can assign an array or null and the third property is error if there was any error we will store that we will assign it true to this after that here we will use our reducer but uh we will create them later so let's export it okay export default uh to do slice now let's use it inside our store let's first of all import it to-do slice from to-do slicer and we will use that here okay to do we will assign too slice uh we can just import to do slice. reducer okay reducer and we will name it to do reducer to R sir now let's use it okay copy this and paste it here so this is our store okay that we have sted we will use this to do uh now let's come here okay here we will use now create a syn t method okay so for that let's const we can export it also okay export const uh we will name it f to do is equal to we will create Now call create a Sy tank method and we will assign first of all a string like to do uh F too okay F too and the second one is a call back function this will be a a synchronous function with us let's create this function and inside this function we will fit our data from uh our URL okay so for that let's const uh data is equal to a vit keyword then we will call Fitch okay you can use accs also to F the data but I will use f method okay and let's come here and we will copy this URL to copy our to-dos and paste it here after pasting them now let's convert our data to Json Json format return data. Json that's enough okay so we have did it now let's create here our extra reducer come here sorry extra reducer and here we will create a function Builder inside this ex ex is used okay for asynchronous requests so inside this we have three cases okay the first one is whenever the data fing is fulfilled the second one is when it is pending the third one is if there was an error these three cases now we will create these all these three cases so let's create our first builder. add case okay inside this ad case uh we will just use now see ad case um action Creator okay so the string okay that we had pitch to do okay this pitch to do pitch to do do fending if that was in pending state it means the data was not pitched uh pending so here um what we will do now we will uh just get a state in action here and we will create this function if that was in pending State what we will do we will just assign to this as loading true state do is loading is equal to true we will assign this true to is loading this was the first case with us uh now let's add the third the second case that is like builder. add case and that is a f to do do fulfilled okay if that fulfilled so then SK State and action what we will do here if that fulfilled so then um state that is loading we will assign it false and State do. data is equal to action do fail out this was the second case with us now let's create third case uh builder. add case and that is uh F to do. rejected okay if that has rejected so then state in action uh what we will do now we will assign an error to error false okay state. error is equal to true so that is okay okay these are three cases that we has created right now so this is all about our slicer and this was our store now let's come here to our main. j6 we will wrap all this app. j6 inside the provider let's first of all import the provider provider okay Provider from react reduct that has imported uh now let's import our store also import store okay store from SL ru/ store.js now let's use this store okay first of all we will use our provider inside this we will use this that's okay let's assign our store to provider it means all the component inside this will access the store store so that is okay let's come here store export here that is exported store so now let's remove all the default code okay that we have uh we will remove the default code and I think we faced with an error so we will check it later so now let's come here to the up j6 I will remove this default code remove this also remove this and we will create a new component by the name of to-do JX and inside this to do we will uh fit all our to-do and display them so inside this to-do first of all we will import let's import use dispatch and also use selector is dispatch is used to dispatch an action and is selector to receive our data and also we will import our um P to do fun function okay const F to do okay this function from sorry import F to do okay from or slicer to do slier we have imported this function also so now let's create first of all an instance of use dispatch const dispatch is equal to use dispatch and also we will get retrieve our data using use use selector const data is equal to use selector we will pass our State and we will return state do data State let just we will return State and let's print it okay first of all we will print it console.log data and we will import this to do inside app.jsx yeah that has imported now let's move to our browser so let's check it okay let's move to the console so we faced with an error reducer yeah just come here to the store I think we missed the reducer yeah here we should use reducer reducer inside reducer we should do this task okay that is okay let's move and check it now so let's repeate once again what happened so we paste we got this to-do and inside the to-do what we have data null error file false is loading false I think we didn't receive our data okay so let's check it okay what happened just come here to do uh yeah to two component okay just comp here to yeah first of all we should dispatch this action okay this is in action with us as we should dispatch it first of all so for that we will use use use effect hook okay whenever at the first we render our component so it will dispatch the action use aect and inside it we will create in function and or the last array dependency and here uh we will just dispatch our action dispatch we will call F to do fetch to do okay after calling that now let's check it okay what happened let's just come here and see let's check out our data so I think we got our data okay see we have the data 200 records in our data okay so just come here now we will assign a state. to do state. to do to our data so save it what we will receive now we will receive this object okay data error and is loading these three properties in the data we will have our data error if there was an error is loading if there was uh if that was in pending State just come here now we will display our data okay so to display the records we will come here and first of all I will check if that was loading so we will display a loading message okay uh for data okay this data data do uh is loading if that was loading so what we will do then we will display H1 tag loading okay otherwise if sorry what happened else what we will do we will display our our records so to display our records we will use map function data. data do map we will get to do and we will uh print that to do okay return in Just A P tag okay or we can say in yeah P tag that is okay print we will just print the title too. title title of our todos let's sa it and now let's move and check it what happened see we fixed all our dat data okay let's repeate uh we faced with an error the resultas the error is because uh we will change it to the array okay an empty array okay in empty array not null because we are uh pitching an array let's come here close it and let's appre it see by default that displayed loading if there was uh an error so what it will do it will display as loading uh whenever it is in fending state so it will display loading check it other whenever it pit successfully so then it will display the records for us so we pit just just the title we showed the title so it was all about okay to display and fit the records using use uh Redux to get okay we used createing T function I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel and like the video comment down thanks for watching

Channel: Code With Yousaf

Views: 4,099

Keywords: redux toolkit, redux toolkit tutorial, redux, API call, Redux Toolkit, Fetch data, React-Redux, async/await, thunk, Redux, createasyncthunk, fetch data with redux toolkit, fetch API data, data fetch in React, react-redux

Id: wx1v2F2XFb4

Length: 15min 40sec (940 seconds)

Published: Fri Oct 20 2023