This course has been updated! We now recommend you take the Complete Intro to React, v7 course.

Check out a free preview of the full Complete Intro to React, v2 (feat. Router v4 and Redux) course:
The "Adding Async Actions to the Details Component" 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 completes the redux-thunk middleware integration by updating the Details component. The Details component will now call the getOMDBData() function which triggers the asynchronous action. Since Redux is being used in the Details component, it no longer needs to read the state from the local store. Code for the application up to this point is on the v2-21 branch.

Get Unlimited Access Now

Transcript from the "Adding Async Actions to the Details Component" Lesson

>> Brian Holt: Okay, so yeah, going back to action creators. Yeah, and then let's make it work in details. Okay, so now we need to import connect at the top. Import { connect } from 'react-redux'.
>> Brian Holt: And we also need to import
>> Brian Holt: getOMDBDetails from './actionCreators'.
>> Brian Holt: Okay, we're also gonna need func right there from PropTypes,

>> Brian Holt: And we're gonna need a couple more prop types down here. We're gonna need an omdbData,
>> Brian Holt: One with a shape that includes imdbID: string as well as a dispatch which is a func.
>> Brian Holt: We're gonna drop getInitialState.
>> Brian Holt: We're gonna drop everything inside of componentDidMount. Instead, what we're gonna do is if this.props.omdbdata.imdbRating.

[00:01:46] So basically hey if I don't already have information for the imdbrating that means I don't have it yet back from the server. So you need to go ask for it. So what I'm gonna do here is I'm gonna say this.props.dispatch, getOMDBDetails, with
>> Brian Holt: Does that make sense?

[00:02:14] Because think of the use case, where you go to the house of cards page and then go back to the search page, then you go back to the house of cards again. You already have all that data in. So the second time you don't have to request it because it's already going to be there the first time, right?

[00:02:29] Sorry, the second time. [LAUGH] We're probably coming on a point for a coffee break for Brian
>> Speaker 2: Could you circle back to the add omdbData again?
>> Brian Holt: In the Action Creators?
>> Speaker 2: No I think-
>> Brian Holt: Or in the reducers-
>> Speaker 2: Yeah, reducer. Okay, so Amber's wondering if the signature is right on that.

[00:03:03] Amber, if you're listening, could you please, tell which one you're talking about?
>> Brian Holt: So this is gonna be the newOMDBData, right?
>> Speaker 2: Right.
>> Brian Holt: Then we're going to merge it infrom whatever we got back from the API. Then we're going to merge that into the state object and we turn that as the new state.

>> Speaker 2: Yeah, I think it could be where you're calling that, not where you're defining it. You're calling it when you dispatch.
>> Speaker 2: Which one?
>> Brian Holt: In the Action Creators, 1.16 of Action Creators.
>> Speaker 2: Yeah. No, I see what they're saying. Yeah, this isn't supposed to be an object

>> Brian Holt: Yep, good catch, right, because this is just a function, imdbID and omdbData right there.
>> Brian Holt: Did someone else point that out, originally? I just wasn't paying attention. I think so, I think the answer to that is yes, someone else pointed it out.
>> Speaker 2: Okay, so we'll finish making this work, and before I get to the next section, we'll take a coffee break for Brian.

[00:04:24] [LAUGH] Okay, so back to details.
>> Speaker 2: So if the data is not there request new data, if the data is there then don't worry about it.
>> Brian Holt: Okay,
>> Brian Holt: The only thing we gotta change in render is rating now comes from,
>> Brian Holt: props, so I change both of those to props.

[00:04:55] So, if props at omdbid imdbRating. The rating is equal to this .props. So, these two right here have to change.
>> Brian Holt: Okay, and then, go down to the bottom.
>> Brian Holt: And we're going to say const mapStateToProps. State ownProps. So here's another little thing you can do. With mapStateToProps you can ask for a second parameter which is please give me also the properties coming in for details, right.

[00:05:43] So details is also going to get imdbID, which I need to select the correct show to provide to details, right? So this is just saying that please give me in addition to the state of the reduct store, give me the props for the react component. And that's what these own props are.

[00:06:07] Does that make sense? These are the props for the react component. So const omdbData = state.omdbData[] and then we're gonna do a turn area.
>> Brian Holt: So a turn area is just a really short way of doing a if statement, inside of JavaScript. So basically it's saying, if the state.omdbDate exists, then give me that.

[00:06:48] Otherwise give me, I think it empty object here, it's just empty objects. So if this first part is true, then give me the first thing. If the first part here is false, then give me the second part. You okay with that?
>> Brian Holt: So you could totally write this as an if statement if you wanted to.

[00:07:15] So if that,
>> Brian Holt: Then omdbData is equal to that, else, omdbData equals empty object. Well, I'll leave that up for a second, but this little part right here and these lines right here do the same thing.
>> Speaker 2: Looks like you have a typo in 55. imdb should be imdbID.

>> Brian Holt: Yep.
>> Brian Holt: Yep, so I'll just leave that commented out, if you wanna hold onto that.
>> Brian Holt: Okay, and then we just need to return an object of that omdbData.
>> Speaker 2: Question, if you access getState in the action creator is it possible to keep that logic there and keep the component simple?

>> Brian Holt: The answer is you would have to restructure, I'm sure that you can get that to work. But the answer is, we're not always going to call that action, right? Because on the second time, we don't wanna call that action because we don't want to request again from the API.

>> Speaker 2: Broader question, can Redux be used to maintain data that needs to be periodically refreshed? Like, for example, stock prices? In other words, is there some kind of built-in support for calling the function like OMDBDetails automatically every n minutes?
>> Brian Holt: I mean, there's JavaScript setInterval. [LAUGH] So no, there's no periodic refresh.

>> Speaker 2: No built in sort of thing, right.
>> Brian Holt: There's nothing special there. I would probably use something like, Redux observable would be a really good fit for that, because that does periodics really well.
>> Brian Holt: Okay, last thing, before I forget, we're gonna do connect down here, connect()(Details),
>> Brian Holt: And we need to give it mapStateToProps.

>> Brian Holt: Okay, so let's go make sure this works. After that I'll push a branch. Get rid of that, refresh. Okay, so now we're gonna go to House of Cards.
>> Brian Holt: Notice that this still shows up. But here's the beautiful part. If we're gonna watch the Network tab down here.

[00:10:22] Network, just refresh that so you can see what actually happens. So you can see this GET here from the 304 right there. Now if I go back, and I click it again it doesn't re-request it again. Whereas if I go to Daredevil, I'll get another request down there.

[00:10:45] So that's the compelling part here is that we're not re-requesting that data every single time. It's now built into our store. In fact if you want to see that let's just bring that up
>> Brian Holt: Where is our redux? My dev tools are having a hard time today. But you can actually look inside of the Redux dev tools and you can see the state, and you can see all of these shows being stored inside of Redux.

[00:11:23] We're now officially done writing app code, just so you know. That's the complete introduction to the client side react, client side Redux. You are well equipped to go out and write like Netflix style apps. We don't really use much more than that. So you can pretty well build just about anything with the tools I've showed you today so far.

[00:11:49] We're gonna do a little bit more with testing, cuz we broke all of our tests in the process. Go team. And so we're gonna do that, we're gonna do universal rendering, so rendering our app with node. We're gonna do chunking with webpack. And then we're gonna do a little fun experiment at the end to greatly reduce our file size with Preact, but we'll get there.

[00:12:18] Did you have any questions?