Learn React Redux Thunk with Project | Redux Thunk Middleware | Axios Async Actions | Redux Tutorial

hey guys welcome back to another video so in the last video we built a react redux application from scratch but with redux we always make use of a middleware to get the side effects like async api calls so in this video we will use redux middleware thunk and we will see how we can convert a synchronous action creator into an async action creator using redux thunk so if this sounds interesting then stick around also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started [Music] alright guys so before we get into our video i want you all to have a look at this amazing platform as your job they provide complete training for full stack web development for free until you actually get placed for at least five lakh per annum this is an extensive six months online course that anybody can enroll in for free even without prior coding knowledge you have some amazing mentors and they have a lot of students already placed in companies like amazon paytm and many more they start a new batch every month and you can apply for the next entrant test that is on 28 june which is absolutely free they provide you with everything from complete data structures and algorithm to full stack development along with focusing on soft skills for interview rounds they will make sure that there are opportunities lined up for you to crack your dream placements complete details are available on their website so do check it out the link in the description below all right guys so i'm using the same application code which we built in our react relux tutorial where we created a fake store using the fake apis so if you have missed that video then i recommend you to watch that first you can just click on the card above and jump to it directly let me give you a small walkthrough of the code so in this we have used the react router and we have two routes one is the home route which has the product listing component and we have a another route which is the slash product product id which goes to the product details page so in the product listing page we actually fetch the data from the server and once we get the data we dispatch an action which goes to the reducer and then we update the data in the store and after updating the data we fetch that data using the use selector and we display all the products on the product listing page and when you click on any of the product we go to the product details page where we again fetch the detail of an individual product and once we get the data we dispatch an action with the data which is go to the reducer and then we update the state for the selected product so i'm already running this application on the local environment so let me show you the demo that we have built so this is the application which we have built and this is the product listing page where we list all the products and once we click on any of the product we goes to a product details page where we fetch the data for the detail of that particular product and if i go to the inspect and on the dev tool if we go to the redux then in the state we can see that we have two states one is the all products which list all the products and another one is the selected product which is the product which we click and we select the product and when we click on the back then we have an another action creator which is the selected product and remove selected product so this was the redux store but if we go to the application code again and you will see that all our logic for fetching the data from the server is inside the component so if i go to the product listing then this is the logic we have the fetching of data from the server and same with the product details page now as we are using the redux then we should remove this logic of fetching the data from the components and put it in our action creators we should only dispatch an action like fetch data and then it should go to the action creator make the api call fetch the data go to the reducer and then update the store so what we need to do is we need to remove this logic of fetching of the data from the component and put it in the action creators so before we go and do it let me show you a slide that will explain you how redux is working in this project all right so right now we are not using any redux middleware so how the redux works without a middleware so if we want to make any change in the state we actually invoke an action creator this action creator returns an object which we call as an action then we pass this action to a dispatch function and this dispatch function will forward our action to the reducer now reducer has a power to update the state and manipulate the state so reducer will create a new state and that state we are going to use it in our components so this is what we are doing in our fake api store so now let's go and remove the logic of fetching of the data from the components and put it inside the action creators so let's go back to the visual studio code so i will first create a new folder so i'm going to name this folder as apis and then i'm going to create a new file inside this and name of the file will be fake store api dot js and inside this i'm going to write import axios from axios all right and then i'm just going to do an export default axios dot create and inside the create i'm going to have an object with a base url and the value of the base url would be are this one so i'm going to copy this and i'm going to add this in the base url all right so now we have this and now we can use this in our action creator so let's go to the action creator all right and i need to make a new action type so this action type will be the fetch products and this will be equals to the fetch product so i'm just going to copy this and i'm going to add this all right and now let's go to the action creator and write an action so i'm going to just copy this and i'm going to add it here i will change this to patch products this is not going to take anything and here i will do the api call so i'm going to write a constant and that will be equals to the response and i'm going to write an await so this will be equals to the await all right and then i'm going to have the axios dot get and this will be the products so i'm going to write products here all right and once i get the response i'm going to pass this response as a payload so i'm going to add this here all right i will save this and let's go to the product listing page and inside the product listing we don't need to call this anymore so i am going to comment this out all right and inside the use effect i am just going to dispatch the action so we already have the dispatch reference so i'm going to copy this reference and i'm going to add this reference here and inside this i need to pass a action creator so our action creator is the fetch products so right now if i go to the action i need to import the fetch products so let's import the fetch products so now what will happen when this component will get mount a use effect function will run and this use effect will dispatch an action creator which is a fetch product so it will go to the fetch products here and here i have missed the async so let me write the async here all right and after writing the async i what i will do i'm just going to console log the response as well so i'm going to write console.log and it should log my response all right so once it gets the response then i need to return this action now let's go on the browser and see what actually happens so if i go to the browser and i will just zoom this in then you will see that we get an error and this error says that action must be a plain object use custom middleware for async actions and now what this error means because sometimes your interviewer will going to ask you some questions based on this error so what we have done we dispatch an action which is the fetch products then we go to the action but it says that action must return a plane object and if we go to our visual studio code then we can see that in our product action we return actually the complete javascript object which is a plain object having a type and a playload but still we are getting an error and that is because when you actually make an async api call in your action creator you need to convert your action creator from a synchronous action creator to an asynchronous action creator and this conversion can be possible if we use a middleware and that is where we are going to use a redux thunk which is a redux middleware to make an async action creator so let me show you some slides to explain this a little bit more so this was the slide which is the redux without a middleware and now what we have we have two types of action so before we had a synchronous action which immediately returns the action object with type and playload so in our before case what we used to do we used to make the async api call in the component itself and once we get the data then we used to dispatch the action which immediately returns you an action and it gets to the reducer but now the scenario is that we are having an async api call inside our action creator and that is going to take some amount of time to return the object and the type of the payload so you are doing an async task inside and synchronous action creator which is why you are getting an error so what we need to do we need to convert this synchronous action creator into an async action creator and this can be done with the help of a middleware so after using the middleware how our redux application will look like so to change the state we will invoke the action creator it's still the same then it's going to return an object which will be an action and then it is going to dispatch an action so this we are doing we are calling a action creator in our dispatch function so right now it directly goes to the reducer and when it goes to the reducer at that time we don't have the data from the server so now this dispatch will first go to the middleware and now middleware will be in between the dispatch and the reducer so before what used to happen the dispatch immediately forwards the action object to the reducer but now what we want that the dispatch will first forward the action to the middleware now this middleware will hold the action creator until it receives the data from the server once it gets the data from the server and then it's going to dispatch again and it will send the data to the reducer and then the reducer will create a new state so that's why it is known as a middleware because it has the ability to get the action from this dispatch and then hold for a time until it gets to the all the side effects like the api calls and everything and once all the side effects are done it can manually dispatch the action to the reducer to continue our redux flow so let's install this middleware inside our application so i will go to the terminal and i will do a new terminal and inside the new terminal i'm going to write npm install redux thunk so this is going to install the redux thunk in our application so meanwhile what we will do we need to make some changes in our store so i will go to the store and inside the store we are going to import the thunk so i'm going to import and what we will need to do is we need to import one more thing which will be coming from the redux which is actually going to bind this middleware to the redux and that is apply middleware so i'm going to import apply middleware and i will also import a compose so i'm going to explain you what this compose is so right now what we have is our create store have a reducer and then we have the initial state so i can remove the initial state we don't want and this is where we actually have the tools so now we need to add a middleware here so what we will do we are first going to create a compose enhancer so you can find the code of this compose and answer on the github for this dev tool so let me show you so this is the redux devtool extension and here you will see that we are using with redux if we have a basic store so right now we have a basic store we have a reducer and then we have this this redux devtool extension but now we will be using a middleware so so what we need to do we need to make a little bit modification for the advanced store setup we will have a middleware so we need to create an enhancer so you can directly copy this part from here so i'm going to copy this and i will go to the store and inside the store i'm just going to add this here all right so now we have the compose and answer and we are just going to add this compose an answer here so this will become compose an answer so i'm going to copy this i'm going to just add it here all right and inside the compose and answer i will write a apply middleware and the name of our middleware is thunk so i'm going to copy this thunk and i'm going to add this thunk here all right so we have added we have integrated actually our store with redux and redux thunk and meanwhile uh our redux thunk is also installed so let's go to the uh product actions so what this middleware is going to do a differently let's go to the github repo of this redux thunk and see so this is the github repository of the redux thunk and you can read the documentation so i just want to highlight here something if i go to the source and if i go to the index.js so this is the small 14 line of code you will see is the redux punk middleware and that's it the redux middleware is so what happens is the middleware actually returns a function and inside the function you have two arguments you can have a dispatch and you can get a state so what we are going to do once we dispatch the action from our component it will go to the middleware and now middleware is going to make an api call and once the api call it gets the data it's manually going to dispatch the action creator so this is the dispatch the same dispatch we used in our components so let's go to the visual studio code and make this changes in the action creator so i will go to the products action and inside this product action i'm going to remove this async and what this actually going to do is this is just going to return a function so i'm going to return a function and this is my function all right this function will have two arguments one is the dispatch which we just saw in our in the github documentation of the redux tank and the other one is the get state all right and from this what we will do we are going to do the api call so this was the api call we were doing so i'm going to cut it and i'm going to add it here all right i'm using a weight so i need to add an async here so i can add an async in the inner function but i cannot add an async to the main function which is the fetch product because if we add an async to the fetch product we are not going to return a plain javascript object the action creator and that is where we are going to run into an error again that you need to apply a middleware so this is what the middleware we are applying so the middleware is helping us to do an asynchronous api call inside our action creator so here i'm going to get the response and once i get the response what i will do i'm going to take this dispatch event so this is the dispatch so i'm going to copy this dispatch event and inside this what we will have we are going to dispatch an action which is uh having a type so the type will be the action dot fetch products and we need to add a payload so this payload will be equals to response dot the data so if i now remove this we don't want this all right so now what we have done is we have converted a synchronous action creator into an asynchronous action created using the middleware thunk all right so if i save it and let's go to the browser and see the output what actually happens so if i refresh my page i cannot see anything so let's go to the inspect and inside the network i will just refresh the page so i'm getting the 404 and that is because my url is not correct so it's not picking the base url correctly so we have made some mistakes somewhere so here we have the axios.get so this is wrong this is not an axios we need to import a fake store api from apis and from the apis we need to have the fake api store all right and i'm going to copy this and this should be added here all right and now let's go and check so if i refresh my page then i can see that i get the products but inside the products i need to have my state so let's go to the state and it's not getting added inside the reducer and the reducer is not updating the state so let's go back so before we go and debug the reducer part we can actually refactor this code a little bit more so in this we don't need the get state so i will just remove the get state and i'm going to convert this into an arrow function and this code you will pretty much you will see everywhere while you use the thunk and inside a arrow function when you have a single return statement then what you can do you can actually eliminate this return as well so i'm going to remove this and i'm going to add it here and i will also remove this as well all right and now if i save it then this is a perfect valid javascript code where you have a function which is actually returning an another function which is this one so now we have done it and now let's go to the reducer so if i go to my reducer where's my reducer i'm gonna go here and inside the reducer we actually need to write a new switch case so i'm gonna copy this and i'm gonna add it here all right i will just change this and this will be my fetch products so i'm going to change this to the fetch product so when i have a fetch product what i need i need to have a state and then i need to have a payload all right now if i save it and let's go and check if i refresh my page then i get action may have not undefined type have you misspelled okay so let's go back to our reducer we have the fetch products and let's go to our constants so i will go to the constant i'm going to add this i'm going to just do a search so this is correct now let's go to the action creator and inside the action creator i have misspelled it here so i'm going to copy this here all right and now if i refresh it then we will be able to see that we get our data back so here now we are using uh the async action creators and we are using a middleware so now if i click on the detail of a product then the logic of this fetching of the product detail is still in the product detail component so let's remove that as well so let's go here and if i go to my product listing now then inside the product listing i can actually remove this we don't want it i can also remove the set product i can also remove the axios so now this is completely decoupled from the fetching of the data because all this is now handled by the redux and the redux thunk which is the middleware all right so now this is fine i can close this and let's go to the product details all right so now we are in the product details and here what we will do we will go to our action and here we have the selected product so we are going to make changes in the selected product so what we will do we will create a new function which will be the fetch product so this was the fetch products now the other one will be the fetch product so it is just going to fetch a product it is going to take an id we are going to have a dispatch then we are going to call the fake api store and i'm going to do a backtricks and slash dollar the id whatever the id we get it all right and the action type we are still going to make use of the selected product so i'm going to copy this and i will add it here so this will become selected product all right so whenever we do a selected product now we need to make this call in the product details so let's go to the product details from the action creator instead of the selected product i'm going to call the fetch product and this fetch product i will just remove this we don't want this all right and instead of this i will be dispatching so i'm going to write a dispatch and we will dispatch the fetch product and we need to pass an id here so let's pass this product id i'm going to pass the product id here all right so now we dispatch the fetch product which is an async action creator we go to our action creator we have a call of the api with a middleware and then once we get the data in the response we do a dispatch manually and this is the selected product and this will go to the reducer now inside the reducer we are going to have a selected product reducer and in this we get the type we get the payload and this is all working fine so let's go and test it so if i go back then if i refresh it then we should be able to see all the products if i click on any of the products so let's click here and we get the product details as well so this is how you can actually add the middleware to your application when you are using a react redux so you can enhance this more so right now we are only doing two operations fetch all data and fetch an individual data you can also make use of the create new product and delete a product so this will completely accrued operation using a react redux and a redux thunk which is a middleware so that's all i have in this video i hope you now have a good understanding of how to use react with redux and how to use the middleware inside the redux to make your action creator a sync action creators to have these side effects like calling an api so i hope you like the video a thumbs up is appreciated you can also connect with me via facebook or instagram you can also follow me on twitter i will add the links in the description below and before you go don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one thank you thanks for watching

Channel: Dipesh Malvia

Views: 13,329

Rating: 4.9766989 out of 5

Keywords: thunk, javascript, redux thunk middleware, react, react redux tutorial, redux tutorial, react redux, react redux axios crud, redux tutorial for beginners, react redux tutorial for beginners, Learn Redux, react with redux tutorial for beginners, react with redux example, useselector redux, usedispatch and useselector, redux store, redux get state from the redux store, how to use redux thunk, async actions react redux, async actions, thunk middleware redux

Id: JDZRfLGNWdc

Length: 23min 56sec (1436 seconds)

Published: Fri Jun 04 2021