This course has been updated! We now recommend you take the React Native, v2 course.

Check out a free preview of the full React Native (feat. Redux) course:
The "Exercise: Async Redux" Lesson is part of the full, React Native (feat. Redux) course featured in this preview video. Here's what you'd learn in this lesson:

In this final exercise, you will use a utility function called createAsyncCreator to generate the async operations in the Sweat Book application. You’ll also update the application to dispatch the new async actions.

Get Unlimited Access Now

Transcript from the "Exercise: Async Redux" Lesson

>> [MUSIC]

>> Scott Moss: So now what you're gonna do inside the app, if you pull it down from the branch that I pushed up, which was
>> Scott Moss: What was it?
>> Scott Moss: Yeah. If you put on the list-view-solution, which is the solution we just did, right now we took that action to add exercise and it is just static.

[00:00:23] You need to switch it over to where it actually talk to the server. And then there's already a db.json, just do json server db.json, and start that port 3000. And you need to actually create exactly what we did it, create if you go to, let's just go look at it, I'll show you.

>> Scott Moss: So, if you go to ActionCreators, dang, did I leave those in there?
>> Scott Moss: Looks like I left them in there already for you. But you still got to use them. Okay, so already in there, [LAUGH] but I'm actually using this really cool abstraction. That's really cool, you can check it out.

[00:01:08] It's in services/AsyncCreators. So I made it a generic function that will take a starting action and in the action, and then async function, and it will dispatch it for you. It'll dispatch the startAction then it will run the async function, then it'll get the result of the async function, and it'd dispatch the EndAction with the result of that async function and also any possible errors.

[00:01:33] So it's very generic. So I use that inside the AsyncCreators to just create AsyncCreator, like that. Start action, into action, function to run.
>> Scott Moss: But I'm actually just gonna get rid of this. So you can't use it. [LAUGH] No, I'm not gonna do that. Yeah, totally use this and what you need to do now is actually bring this into, if you go to CurrentWorkout.

[00:02:00] Right now those methods right here, addExercise, it's static. So instead of dispatching the static at exercise method, you need to dispatch the async at exercise.1 which is called addExerciseToCurrentWorkout. So you need to dispatched that and then you also need to go ahead and fetch the current workout too when the app first loads up.

[00:02:20] Cuz right now when it first loads up, it's not gonna do anything, it's like there are no workouts. So you need to fetch the current workout. So that means you need to go back into current workout here and somewhere in here, looks like it's already commented out. You just need to fetch the current workout.

[00:02:35] So you need to add that action to your map to action props. And then somewhere like componentDidMount, you want to call that action to fetch all the workouts.
>> Scott Moss: So convert the addExercise to use the async version and then refresh the current workouts when current workout component loads up.