React Redux Tutorials - 28 - Async Actions

welcome back everyone in this video let's learn about asynchronous actions with react and redux earlier in the series we had a look at async actions in the vanilla JavaScript application that makes use of redux this video is going to be very similar except that we now have react which can be used to render the UI in a browser for the sake of completeness I am going to quickly recollect what we have already learned about async actions and also the application we are going to be building let's get started when it comes to actions we have two types synchronous and asynchronous with synchronous actions as soon as an action is dispatched the state is immediately updated if you dispatch the bye cake action the number of cakes right away decrements by one if you dispatch the by icecream action the number of ice creams right away decrement by one with async actions it is slightly different you now wait for a task to complete before dispatching your action a typical use case is making an API call waiting for the response and then dispatching an action based on the response this is something we do often in web applications so it is crucial to understand this pattern before we dive into the code on async actions though let us first understand what we need to accomplish with our application the application we are going to build simply fetches a list of users from an API endpoint stores it in the redux door and then renders it in the browser let's quickly recollect how our state is going to look like what are the different actions and how the reducer would work once that is clear let's write the code first let's talk about the state of our application typically with data fetching we go with three properties for the state object the first property is a loading flag which indicates whether the data is currently being fetched or not in our application this flag would help us display a loading spinner in the component the next property we would have is the data itself the data in our example is a list of users the initial state though we would have an empty array as no users have been loaded yet the final property is an error message now our API request might fail for some reason in that scenario instead of getting back the data we get an error which we store in the error property this message can be used to display the error to the user so that is our state object next let's talk about the actions we are going to have three actions in our application the first one is to fetch the list of users from the API endpoint the action type would be fetch underscore users underscore request the second and third actions are dependent on the first one the data was fetched successfully we have an action with type as fetch underscore users underscore success if there was an error fetching the data we have an action with type as fetch underscore users underscore failure so we have three actions finally the reducer if the action type is fetch users request we basically set loading to true if the action type is fetch users success we set loading to false and users to the data returned from the API if the action type is fetch users failure we set loading to false and to the error returned by the API and that is pretty much our application so with these points in mind let's go back to our editor and implement the code we're going to start off by creating a new file called user container dot j s within this file I'm going to use the snippet RFC II to create a function component this will be the component where we render the list of users next let's focus on our Redux store within the redox folder I'm going to create a new folder called user within this folder we need to include three files one for actions one for action types and one for the read user let's start with the action types I'm going to create a new file called user types dot Charis we have three action types which I'm going to copy paste accusers request success and failure next let's define our action creators in a new file called user actions dot Jas again to save us some time and since we have already been through this before I'm going to copy/paste the three action creators the first one is to fetch the data so we just have the type property set to fetch underscore users underscore request the second action creator is to store the list of users if the request was successful so we have the type which is fetch underscore users underscore success and payload equal to the list of users that is present as a parameter the final one is to store the error message if the request failed the type is fetch underscore users underscore failure and the payload is the error message that was passed in as a parameter let's also make sure we import the action types so at the top import the three action types from the user types file all right now let's define our reducer function I'm going to create a new file called user reducer dot J s I'll start off by copy pasting the initial state of this reducer we have loading set defaults users and empty array and error an empty string next I'm going to copy/paste the reducer function so if the action type is fetch users request reset loading to true if the action type is fetch users success reset loading to false users to the action payload and error to an empty string if the action type is fetch users failure we set loading defaults users to an empty array and error message to the action payload make sure you export the reducer as a default export and also import all the action types at the top the next step is to export all our action creators from user actions rather than specifying all the export you can simply say in index dot yes export star from dot slash user slash user actions this exports all the three action creators the final step is to include user reducer in art combined reducers function so in route reducer Jess import use a reducer from dot slash user slash user read user and specify as the third key value pair user user and user and that pretty much is the code for actions state and the reducer or this left now is to use async actions to make an API call dispatch appropriate actions that we have defined already and render the list of users in the browser let's see how to proceed with that in the next video

Channel: Codevolution

Views: 59,119

Rating: 4.958549 out of 5

Keywords: Codevolution, React, ReactJS, Reactjs, ReactJS Tutorial, React Redux, React Redux Tutorial, ReactJS Redux, React Redux Tutorial for Beginners, ReactJS Redux Tutorial for Beginners, Async Actions, Async Actions in React Redux

Id: tQ80uAyqVyI

Length: 9min 25sec (565 seconds)

Published: Mon Dec 09 2019