Making API Call in React Redux | axios & redux-thunk | Async Actions |React Redux Tutorial

in this video we can talk about asynchronous actions and how to make APA call in Redux so in order to we can fetch the data so finally I am going to display in our application okay so first I am going to create the required files the first one is component so image gallery this is my component so next we can create the Redux files so let me create one folder image so here we can create three files the first one is for action and the second one is for reducer and the final one is for our action type okay so next we can install some required packages for making the APA call I am going to use this axis and also the Red X thing so let me install the packages npm install axios and the next one is Redux tank okay the installation gets completed we can verify so in this package section see this axios and also this Redux thing was there so the next thing is we can include this index thing in our middleware let me go to my store section so in this middleware already we have this logger so after that I am going to input this thing okay if it is not coming we have to include it manually I mean import it manually so let me include it here okay and let me save this one now let me go to the reducer here we can Define the initial state so it is the upset so as I mentioned it is having three properties the first one is loading the initial value should be true and the next one is data so it is having the empty array and the final one is error for showing the error message the default value is empty okay so let me save this one and next we can move on the action type so in this action type we have three action types okay of a stone is so the first action is making request so so we can give the name is fetch image request and the next one is the success scenario so fetch image success and the final one is the failure scenario so let me include it here and we can save this one and next in our action side we can create the action creators so the first one is fetch image request see this kind of function will return the object okay and the type is fetch image request so let me save this one and the next one is Success scenario fetch image success but it is having one parameter the data so again it is also returning the object so instead of this image request we can use the success okay and the additional property we have this payload so here we can pass this data that's it so we can save this one and the final one is failure so the input is error and the type is which image failure and in this payload we can pass this error information okay so now our three action creators are ready now let me go to the reducer section so this one also a kind of function so it is having two inputs the first one is state so we can pass our initial State here and the second one is action and here we have the switch statement action DOT type then let me check the cases so the first one is fetch image request so this is the initial state so here I am going to return the initial state and also I am going to make this loading as true and in our next case for this success scenario which image success so here first the loading should be false and the next the data data should be action dot payload and the error value is empty okay and the finally for the failure scenario so in this failure also the loading should be false and the data should be mtra and again this action.payload should be added in our error section okay and this default it is returning the state now let me save this one and also I am going to export this one then only we can use in some other places so next let me include this reducer in our store okay so in this store already we have two objects one is the bat and the pad so that actually added based on my last examples so here I am going to include the new item okay image list equal to our reducer okay it is imported from the image slash register okay so we can save this one and next let me go to our action once again I am going to create one more function okay so this is the function will return the another function and it is having the parameters dispatch okay so initially we can dispatch our the action of which image request okay and the next we can call our APA for that as I mentioned we can use this axios okay let me import it here axis dot get and our API URL so for the APA I'm going to use this Json placeholder okay so if you have your own API you have to use it otherwise we can use this free fake APA okay so here we have a lot of items so I am going to take this one photos so this is the get request and here we can dispatch our next action creator which image success so it is having the parameters the response dot data so the data we can pass it here okay and next in this catch I'm in the exception scenario so here we can dispatch the action creator of failure fetch image failure so here we can pass this exception message so let me save this one and also I'm going to export this one okay because I am going to use in some other places so as of now we have completed for the Redux action action type reducer and also in the store so now let me going to make the changes in our component send this image gallery I am going to make two functions so the first one is map state to props so it is having the input state so it is going to return the data image list and state DOT it should be image list I believe anyway let me check in the store yeah it is the image list only so we can use the same one here let me format it and the similar way I am going to create one more function so that is for map uh dispatch two props okay and the input is dispatch and [Music] fits images and dispatch off our main function that actually we have defined in our actions okay fetch image list so let me import it there I'm in the top of that fetch image list and finally I am going to use the connect option okay it is not coming so basically it is available in our reacted X so let me import it here from reacted X connect so here I am going to pass this two functions map state to props and also map dispatch to props okay okay this is fine and so in our component we have this props as the input so next in our component I am going to use this use Hereford hook from react so this one also kind of function and we can set the empty dependency okay so here we can call our dispatch function fetch image that's it so let me save this one and in this content section so I'm going to check props dot image list dot loading if it is like this we can say this loading next the props dot image list that data I mean not a data we can first complete this crr okay if we have any error messages so we can display the error here okay and finally it is a positive scenario so here I am going to have one due tag and the header it says image list okay here actually I'm getting some error okay this saying the fetch image is not on function so let me verify function yeah this is actually a function so then I have to use like this so let me refresh the screen so slightly we can see right so the loading and it is replaced in the image list and in our state we can see we have around 5000 record so that's what the API all about so if you noted here so in this photos APN point we have the 5000 record so that's what we are getting here so let me extend this one we can take one of the record yeah so we have all the items like album ID title and this URL so what I'm going to do let me bind this in our application okay so first we can have one conditional template and I'm checking and then image list dot data if everything is the positive case okay here we can use the map option so here we can bind the title also we can have one image tag in the source so it is not just a title item.title okay at the same time we can get this uh I mean URL so let me save this one okay initially this saying loading after some time it is fetch all the records and then displaying in our application so we have this title and then images so around 5000 records so everything is binded here so in this real-time scenario we may load in the tables or kind of list but anyway so this video I'm mainly focusing on fetching data so that we have completed okay and still if you have any dots or clarification please post in the comment box and also please don't forget to subscribe my channel in my next video we can see one of the interesting topic thank you thanks for watching

Channel: Nihira Techiees

Views: 9,493

Keywords: React redux tutorial, why redux, react redux full course, nihira techiees, React redux full course with api call, how to fetch data using axios, How to call api from redux, fetch data from api using redux-thunk, HOW TO MAKE API call in react redux, async actions in react redux, async api call in redux

Id: e0TAzSSEJ_0

Length: 19min 26sec (1166 seconds)

Published: Mon Mar 27 2023