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 "Calling Async Actions" 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:

With the asynchronous actions created, Scott can update the Todo application to call these actions to load and create todo items. Once the application is updated Scott starts the JSON server and tests the async operations in the simulator.

Get Unlimited Access Now

Transcript from the "Calling Async Actions" Lesson

>> [MUSIC]

>> Scott Moss: Here we have a static prop, which is todo's where we connecting at all right so we're connecting down here. So create todo instead of firing off a static action like this. We won't do that and what instead what we'll do is will dispatch we need to get those methods that we created So we'll import {createTodo, getTodos } from './actionCreators'.

[00:00:43] There you go. And what we can do now is handle text change, so on press this.props.createTodo, this is gonna be an async function now. So if we head down here, we can say createTodo we want to dispatch the actual create to do. Property here with the actual to do value in there.

[00:01:08] But this is going to be a string. Every time a JSON.stringify, so we should probably just add an object on here that has a name property on it. There we go. Yes.
>> Speaker 2: Why do you need to do the dispatch(createTodo())?
>> Scott Moss: Yes. So createTodo is this, this method right here right?

[00:01:34] So we need to wrap this in dispatch as this is how we tell Redux about it if we don't dispatch it we're just calling the function and it won't be past this function the actual dispatch once when we dispatch it. When we, so when we invoke this function we're gonna get back on another function that's going to be expecting dispatch and that's what this backs does, it passes itself to the return function.

[00:02:00] So we can dispatch any later actions later on.
>> Speaker 3: How do you differentiate between those two createTodos?
>> Scott Moss: This is scoped inside of an object so there's no way you could refer to this createTodo outside of its object.
>> Speaker 3: Right, but in the next line.
>> Scott Moss: And then in the next line, this is a global to do because it's up here.

[00:02:25] Yeah like if I did this, is referring to this one.
>> Speaker 3: Okay. But I mean.
>> Scott Moss: Yeah, I mean you can change it. And yeah, you could definitely change it. This is why they made bind and action creators cuz now if you change now you got think of a different name for both of what that are doing the same thing as bind actually cares will just make them the same for you.

[00:02:44] But I kept the same to like not have different names but if it's confusing to have the same names Is it confusing to have the same name-
>> Speaker 3: It's confusing to me and it may not be confusing anyone else but it is.
>> Speaker 2: It's the same thing whatever the state or something your like {todo:todo}.

[00:03:02] Doesn't want kind of thing.
>> Speaker 3: I don't think so.
>> Scott Moss: Yeah, this is a global, this is just scoped here And then we did the other one which is addTodo or really we have down. Sorry, getTodos which takes no argument and it just dispatches getTodos which also takes no arguments.

[00:03:29] There we go. So what we want to do first is, let's say, componentDidMount so when a component did mount we're gonna say this.props.getTodos. So we're going to get TodoList and we're gonna call that function which is going to get the TodoList. And because we're already subscribed to the todo state we don't have to update our state locally because the todo's are already here.

[00:04:07] So at that we get todo's we don't have to say. Then, this.state. We don't have to do that. It's all the fine. And then now here I want to create todo. We'll say this.createTodo I'll pass in the new todo state here and one more thing I need to do is because I pass an object now this is gong to .name.

[00:04:26] There we go. Now let's actually try this. Different app. Go, go. I can't remember if I ran this. Am I running this? I don't think so. I think I'm still running the other app. Yeah. Cool. We'll run that. And then we'll run the server. Adjacent server.
>> Scott Moss: Cool.

[00:05:08] All right, we'll let that build.
>> Scott Moss: But the meat and potatoes here is really just adding Redux .to the middleware and then just dispatching your actions when you're done. That's it. We can do more stuff here, we can do another promise and we can keep this batch and keep this batch If you wanted to.

[00:05:29] That's the whole point of this is do all the asynchronous stuff and then fire up the events that you want. So this is called an action creator or in this case an async action creator because it itself is not an action but when it's resolved that it is an action or will dispatch an action.

[00:05:46] There we go.
>> Scott Moss: I don't care whether it will debug.
>> Scott Moss: Okay.
>> Scott Moss: Okay. You just don't wanna run, do you? Let's build it again. Any questions on this stuff?
>> Scott Moss: All right. Are you built? I got two servers running. That's why that make sense. Okay, anyway there's a to do, sweet.

[00:06:35] So let's make sure we've got a PR server running so it looks like it already tried to get it to do. So as I did that on component. It tried to first of the dues right,
>> Scott Moss: Right here. So the podium out. It ran this meant that they started to do this.

[00:06:53] There were to do so to do anything but if we add one and we say clean up there you go. It adds it right here, and we can go look at the server log we can see that it actually did post to the server. Now if we go look at db.json, it actually added it, clean up.

[00:07:15] And the reason it came back here is because if we follow it through Redux one more time. When we create a todo we say post that to do to the server, the server gives it back to us here, we dispatch a new action with a type called create_TODO.

[00:07:32] Pass and then I need to do that in services gave to us. That's gonna run to the reducer on create to-do just return the list of the dos with the new one at the top. And because it's a do.JS, we're subscribed to that to-do state here and we're iterating over it.

[00:07:54] Here it's going to update. I don't know why it's hot module reloading. Why it's doing that. Any other questions? So two things to remember, use Redux stock as a middleware and then just dispatch a regular action inside of your resolution of your asynchronous operation and that's it. And it's the same thing, you use it the same way as you would a static action.