React Redux Tutorials - 12 - Async Actions

welcome back everyone in this video let's get started with asynchronous actions up until now we have had a look at synchronous actions or in simpler terms as soon as an action was dispatched the state was immediately updated if you dispatch the by quick action the number of cakes was right away decremented by one and the same goes with by ice cream action as well now this works perfectly fine for our cake and ice cream shop application however you will eventually build applications where things happen in an asynchronous way for example you will make a sync API calls to fetch data from an endpoint and use that data in your application but before we dive into the code on async actions let us first understand what we need to accomplish the application we are going to build simply fetches a list of users from an API endpoint and stores it in the redux door so let's try to get an idea of how our state is going to look like what are the different actions and how the red user 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 3 properties for the state object the first property is a loading flag which indicates whether the data is currently being fetched or not if you have an application with UI this flag would help you display a loading spinner in your component the next property we would have is the data itself the data in our example is the 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'll get back an error which we store in the error property this message again can be used to display the error to the user if your application has a user interface 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 this first action if the data was fetched successfully we have an action with the type as fetch underscore users underscore success if there was some error fetching the data we have an action with type fetch underscore users underscore failure so we have three actions finally let's talk about the reducer function 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 error 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 for this new application I'm going to create a new file called async actions dot J s within this file we need to define three things the state the actions and the reducer let us first start with the state the state is going to be an object with three properties as we have already discussed say Const initial state is going to be an object with three properties loading initially faults users an empty array and error which is an empty string next we have the actions now remember earlier in the series we spoke about action creators basically functions that return an action we are going to be doing the same in this application as well so let's begin by declaring the constants for the action types Const fetch underscore users underscore request is going to be equal to the same string value Const fetch underscore users underscore success is going to be the second type and the final one is fetch underscore users underscore failure alright next let's create our action creators the first one is to fetch the data the Const fetch users request is equal to an arrow function where we are going to return an object with type fetch underscore users underscore request the second action creator is to store the list of users if the request was successful say Const fetch users success is going to be an arrow function where the argument is an array of users and we return an object where type is set to fetch users success and now we have a second property which is payload set to the argument users the third and final action creator is to store an error message of the request failed set Const fetch users failure is equal to an arrow function where the argument this time is an error message and we return an object where type is fetch users failure and the payload is the argument error message all right now let's define our reducer function Const reducer is equal to an arrow function an arrow function gets two arguments state with a default value of initial state which we have already defined and the second argument is action based on the action type we need to return a new state so if the action type is fetch users Qwest we're going to return an object where we make a copy of the existing state and only set the loading flag to true if the action type is fetch underscore users underscore success we return an object where loading is false users is going to be action dot payload which is the property that we are now sending through the action creator and we also clear out the error message if at all there was any the final case is fetch underscore users underscore failure so if the API request failed our loading is done so loading is false users is going to be an empty area again an error is going to be action dot payload so action dot payload in each of these cases corresponds to the payload property that the action now contains if the request was successful the payload is an array of users and if the request failed the payload is an error message the same we are using in our reducer all right now the final step is to create our redux door so at the top Const redux is equal to require redux and const create store is equal to redux dot create store then at the bottom Const store is equal to create store and we pass end the reducer function and that pretty much completes our setup to understand about async actions what is left now is to make an API call and dispatch the appropriate actions we have in our application let's see how to proceed with that in the next video

Channel: Codevolution

Views: 114,097

Rating: 4.9332094 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 Redux

Id: yGyj0mSfVuk

Length: 9min 30sec (570 seconds)

Published: Mon Sep 23 2019