Check out a free preview of the full Complete Intro to React v2 (feat. Router v4 and Redux) course:
The "Async Actions" Lesson is part of the full, Complete Intro to React v2 (feat. Router v4 and Redux) course featured in this preview video. Here's what you'd learn in this lesson:

Brian now creates the getOMDBData function. Redux will call this function and trigger the asynchronous axios AJAX call. The result of the AJAX call will then dispatch the addOMDBData action.

Get Unlimited Access Now

Transcript from the "Async Actions" Lesson

[00:00:00]
>> Brian Holt: So, yeah, let's go tie all this up, and then, hopefully, if there's more questions, we can, kind of, tie it all together. So, we're inside of Action Creators now. We need to add two action creators here. We need to add one for our synchronise action, which is just going to be like sending an object to Redux, right?

[00:00:21] And then, we also need to do our async thunk. So let's do our synchronous one first, because it's going to look a lot like setSearchTerm.
>> Brian Holt: So I'm going to do ADD_OMDBdata up here.
>> Brian Holt: We're going to do export function addOMDBData, imdbID, omdbData
>> Brian Holt: That's going to return type ADD_OMDB_DATA, imdbID, and omdbData, right?

[00:01:09] Looks almost exactly the same as the other one.
>> Speaker 2: Mark is asking, shouldn't we just pass state.omdbData as the state for add_omdb_data reducer?
>> Brian Holt: I don't understand the question, one more time.
>> Speaker 2: Shouldn't we just pass state.omdbData as the state for the ADD_OMBD_DATA reducer
>> Brian Holt: Do you mean it's just sending that part of the state instead of the entire state out there?

[00:01:50]
>> [SOUND]
>> Brian Holt: Sorry. [LAUGH]
>> Brian Holt: Should we pass state.omdbData as the state for the?
>> Speaker 3: Instead of add omdbData, sending the entire state, he's saying, why don't we just a portion of newState? But in redux you're supposed to send the entire state. Not a portion of the state.

[00:02:17]
>> Brian Holt: Okay. I see where we're disconnecting here, so yes. So newState or state right here is literally the entire state of the entire redux.
>> Speaker 3: And it's always supposed to be that way. It's never supposed to be a portion of the state.
>> Brian Holt: Yeah, it's never going to be a portion of the state or anything like that.

[00:02:31] It's literally the entire state.
>> Speaker 3: That breaks consistency.
>> Brian Holt: Right, so you want to be careful that you leave the rest of the state alone and you only modify your corner your interested in, and then you return the entire universe, right? So your handed the whole universe. You make your tiny little modification and you return the new universe.

[00:02:50] Because if you don't return the rest of the old universe, right, it just gets blown away. Which is exactly what you don't want to do.
>> Speaker 3: I think people are just used to passing the only minimal amount of parameters until-
>> Brian Holt: Yeah, I mean, I like that mindset, right, that you're working with the smallest amount of data possible.

[00:03:17]
>> Speaker 3: But it doesn't work, because you need to return the entire state
>> Brian Holt: Right, because you want these functions to be repeatable, no side effects, all that kind of good stuff. Cool. So, lets go back to action creators, and we're going to do export function getOMDBDetails. And it's going to take an imdbID.

[00:03:56]
>> Brian Holt: And what this is going to do, this is going to be our Func creator, right. So what's peculiar about funcs as opposed to actions, these return objects, right? What a func creator is going to do is it's going to return a function. So we're going to return function dispatch, and getState.

[00:04:29]
>> Brian Holt: Okay, so the function returns a function. It's kind of weird, but bear with me for a second, and I'll explain to you why that weird contract works well, okay?
>> Brian Holt: So dispatch, this is exactly what you would expect it to be. This is how you dispatch a object to Redux, right?

[00:04:50] This is the same dispatch we've been working with inside of React, with React Redux. GetState is a function we're actually not going to use here, but it's important, so I wanted to let you know that it exists. That if you need to do something based on the current Redux store's data, you can call this get state function and it's going to pass you the state from Redux.

[00:05:14] So it's a convenience feature if you need to do something based on that. We don't need it, I just wanted to let you know that it's available. Okay? And then what we're going to do, is we're going to go to details. And we're just going to grab everything that's in component in mount right here.

[00:05:34] So just copy and paste this axios stuff.
>> Brian Holt: And go back to action creators and just paste it in there. But instead of this.props.show, we're going to drop that so it's just imdbID, right. It's going to refer to the same one right here. And then instead of dispatch, sorry, instead of this.state, we're going to dispatch,

[00:06:10]
>> Brian Holt: imdbID and omdbData: response.data.
>> Brian Holt: Okay.
>> Brian Holt: So, let's talk about what's going to happen here. Well, you call getOMDBDetails, and you dispatch that to redux. Redux is going to call the function that this returns. So redox is going to call this function, right? You called this function, getOMDBDetails, redux calls the inner function for you, okay?

[00:07:03] That's going to kick of this axios, which we have to import, I forgot about that. Import that at the top. Import axios from axios. So redux calls this, axios is going to do this thing it's going to call dot get which is a synchronous and takes some time because it has to go out to the API servers and return, then once it come back, it's going to dispatch this action, that I did not call correctly.

[00:07:35] So dispatch, sorry, addOMDBData, right? So we're actually going to call this one that we just created.
>> Brian Holt: So that's what's actually going to dispatch that action that gets thrown to the root reducer.
>> Brian Holt: Does that makes sense? We follow so far?
>> Brian Holt: So I'll show you how to invoke this here in just a second.

[00:08:13] Because we still need to go actually call that inside of details, right. But I just want to make sure that it makes sense that, you call this function, it returns this function right here. This one gets called by redux. This is going to happen, right? It's going to axios.get and then once it's finished, but then it's finally going to dispatch the action that we created up here.

[00:08:37] So we're not actually going to call addaddOMDBData from within details, we actually technically don't even have to export it. However, you just do, you export all of your action creators. Because what happens later if we want to synchronously do that. So, up to you though. I just choose to.

[00:09:00] Okay. Any questions before we go make it work?
>> Brian Holt: So go back to details.
>> Speaker 2: Does this patch expect a function? Or if you just wanted to have it dispatch just the object, could you do that? On line 16 there.
>> Brian Holt: Mm-hm.
>> Speaker 2: Is, so dispatch is coming from, Redux is going to call dispatch, and so does it always expect a function?

[00:09:34]
>> Brian Holt: So-
>> Speaker 4: It's expecting an action, right?
>> Brian Holt: An action, right? So, could you just do the action here instead of the function? Absolutely.
>> Speaker 4: Yeah, if you didn't need to To do then.
>> Brian Holt: Yes; I mean if nothing ever, would ever call addOMBData, then you could just do the action directly there.

[00:09:52] I just personally always make that a function. Because then this is reuseable, right? And I don't have to care about the shape of that, I just have to care about what parameters I pass it. I find that to be a convenience, but up to you. These are design decisions you can make.

[00:10:13]
>> Speaker 2: Going back over to the discussion about the state and what you're returning, Jacob said you could use combine reducers too.
>> Brian Holt: Yep, you can. So instead of the root reducer, there's a convenience function called combined reducers, and you're more than welcome to use it.
>> Speaker 2: Amber's asking does add omdbData take an object for args?

[00:10:37]
>> Brian Holt: Does it take an object for what?
>> Speaker 2: For args, I guess arguments.
>> Brian Holt: For args, sorry.
>> Brian Holt: So imdbID is going to be a string. And omdbData is going to be an object, right. Are you talking about the action creator? I think there's also a reducer called that.

[00:11:03] So there's the state and the action here, as well, right? But this is the action we create via the actionCreator. And yeah, this is the state.