Complete Intro to React, v3 (feat. Redux, Router & Flow) Adding Async Actions to the Details Component

[00:00:00]
>> Brian Holt: We still haven't closed the loop here so we actually need to go make details actually do all of this stuff for us. So go to details.JSX.
>> Brian Holt: So the first thing we're gonna need to up here is we're going to import,
>> Brian Holt: You're gonna get rid of Axios up here and we're gonna import, connect from react redux.

[00:00:33]
>> Brian Holt: And we're going to import action creator. My notes are wrong here so sorry, I'll fix that. Get API data from ./actionCreators.
>> Brian Holt: Okay? We're gonna get rid of the state here
>> Brian Holt: And instead of doing all this axios stuff and component did mount, what we're gonna instead do is say if I'm not getting ratings back, so if this.props.rating

[00:01:16]
>> Brian Holt: Then I needed to go request it so you're gonna say this.props.getAPIData.
>> Brian Holt: Cuz you have to think of the case of, what happens if I click into Orange is the New Black, go back to the search page, and then go back into Orange is the New Black?

[00:01:36] You don't need to request the data a second time, right. So that's [INAUDIBLE] component [INAUDIBLE] check. Do I already have data for this? If not, go request it. That's why we're doing this check up here.
>> Brian Holt: Props for this, we're going to get rating.
>> Brian Holt: Which is going to be a string, and we're also going to get a function called GetAPIData which is going to be a function

[00:02:16]
>> Brian Holt: Okay?
>> Brian Holt: So everywhere that says, this.state.apiData, we just need to modify it so it says, this.props cuz it's gonna be coming from props, not from state anymore.
>> Brian Holt: And I modified that. So yeah, not API data, just this.props.rating.
>> Brian Holt: Right, so if this.props.rating, then put it out there, otherwise, put out the loading spinner.

[00:02:52]
>> Brian Holt: Okay, then at the bottom we're gonna make our map state to props, so const mapStateToProps equals (state), which is going to return an object. Yeah, let's actually make that a full function. I think this is more clear if we do it this way. I'm going to say const apiData = state.apiData.

[00:03:23]
>> Brian Holt: We have to get ownProps as well don't we? So secretly mapStateToProps, there's a second parameter in here called ownProps which is gonna be the props passed down from the parent, right? And we need this because that's how we're going to determine which API data we're going to pull out of our redux store right so that's what ownProps is.

[00:03:43] So if you look up here ownProps we're going to be getting the show from the parent, right? So we're going to use the show coming from the parent to determine which API data we're gonna pull out of our redux store.
>> Brian Holt: Okay, so we're gonna do here is [ownProps.show.imdbID], right.

[00:04:06] That's where that show is coming from. So if that exist then return that, right?
>> Brian Holt: If you're not familiar with this, this question mark, we're doing what's called a ternary operator here, right?
>> Brian Holt: So if this is true do this first thing otherwise, after the colon here, do the other thing, right?

[00:04:37] So if this, if I have API data for this particular show, return that API data, otherwise, return empty object. You could totally write this out as a IF statement. I am 100% okay with that.
>> Brian Holt: And then were going to return down here an object with rating colon API data dot rating.

[00:05:09]
>> Brian Holt: Oops, I don't need that semicolon. So if it's this empty object, then the rating is going to be undefined, and that's fine.
>> Brian Holt: If you want it to be empty string, you could totally just do this as well, either way.
>> Brian Holt: Okay, now we need a map dispatched to props, so we're going to say, const mapDispatchToProps.

[00:05:46] It's going to take in dispatch, which is going to be a function. And it's also going to take in the ownProps as well. And it's going to return this object with the function on it, get API data. Which takes in nothing, that's fine. And you're going to dispatch getAPIData with ownProps.show.imbdID.

[00:06:25] So if you call this function, it's gonna say, Okay, what show are you?. And it's gonna grab that show, it's gonna take that imdbID and throw that out to the thunk which is gonna take care of all the data requesting behind the scenes. Then down here at the bottom, we're gonna say connect.

[00:06:49]
>> Brian Holt: Map dispatch or map state to props, and then map dispatch to props.
>> Brian Holt: But now we should be able to save this, go over to application
>> Brian Holt: And oops that is large, let's go back to normal. So I'll refresh the page, let's open our redux tools so we can see what's happening here.

[00:07:16] So if I click into billions
>> Brian Holt: Am I getting an error here?
>> Speaker 2: It's supposed to be add api data.
>> Brian Holt: Add api, no, you wanna get api details, that's what it is. So details getAPIDetails.
>> Brian Holt: And then down here, we're going to call this getAPIDetails.
>> Brian Holt: Yep, okay.

[00:07:56]
>> Brian Holt: So, just to recap we changed this to getAPIDetails cuz that's what I called the function. Inside of action creators. And then down here, I just change that as well, to be getAPIDetails.
>> Brian Holt: Okay, now if we go back over here.
>> Brian Holt: Let's go into Redux.
>> Brian Holt: We can see what has happened here.

[00:08:21] We can see that an ADD_API_DATA Action was called and we were able to get this payload which was billions right. Well now what's really cool if I go back and then I click on billions again notice that I will not get the loading spinner and it's just gonna instantly load that rating.

[00:08:39] Cuz it already has it in the store
>> Brian Holt: So same thing. If you're go into Atlanta,
>> Brian Holt: First time I made the request, you can see the request down here in our explorer.
>> Brian Holt: So,
>> Brian Holt: That one, and [COUGH] now if we go back, click into Atlanta, it's still gonna be there.

[00:09:11] And the same thing if we go back to Billions, still there, right? But if I refresh, notice on the first time, it's gonna make that request, so.