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

Before Brian implements the universal rendering, he first externalizes all state so it only exists in Redux. This will make it easier to manage since all state is located in one place.

Get Unlimited Access Now

Transcript from the "Externalizing the State" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: So we're going to have to do a bit of refactoring of many parts of our app to actually get this to work correctly. So first thing I want to do, we don't have to do this but this is going to make things much easier, we're going to move all of our shows to redux, cuz that's just going to everything way easier to deal with.

[00:00:21] Then we don't have to be passing it around everywhere.
>> Brian Holt: So go to store.jsx,
>> Brian Holt: And what we're gonna do here is we're gonna add another require up here. We're gonna say const shows = require(../public/data).
>> Brian Holt: Okay, and then an initial state. We're going to put shows in here as well.

[00:00:53] So I'm just gonna say shows, right? Remember that this works because we were doing shows shows right? But we can also just do that. And then we also need to pass this into all the connected props, so we have to update our map state to props. So it's made for some multi-liner.

[00:01:14] And we're gonna say shows: state.shows.
>> Brian Holt: I did that wrong initially but that's fine. [LAUGH] My notes are wrong. Again, this makes sense, what we've done to redux here is now we're just passing shows in with our payload, with the rest of our state. So the nice thing is we don't have to be requiring shows everywhere.

[00:01:59] And we can get rid of all that boiler plate logic that was taking advantage of that. So let's go and refactor details first.
>> Brian Holt: So save that, move to details.
>> Brian Holt: We're gonna bring in our connector because this is not a connected component yet. This needs to be in curly braces.

[00:02:29]
>> Brian Holt: Require('./Store'), right? So fun part is here, instead of doing params, what we're gonna do here is we're just going to say this.props.shows, this.props.params.id. So what we're doing before is we're letting on enter take care of this selection of a show, but because now it's in redux we might as well just use redux since it's already there.

[00:03:20] So we just changed the right half of this assignment to be this stuff probs.show. This.props.params.id.
>> Brian Holt: And now go down to your prop types. This is going to be shows now,
>> Brian Holt: And this is actually going to be an array of, so I'm gonna say an arrayOf. And I'm gonna say arrayOf(object), which is required.

[00:04:03]
>> Brian Holt: Yeah, and then we also need to use our connector down here as well.
>> Brian Holt: So that should fix all of details to use redux instead of depending on it from onEnter. Let's also go fix search while we're at it. Search will be pretty easy, which is nice.

[00:04:29] Search. So what we're going to do up here is we're going to refactor this where it says this.props.route.shows. We're just going to delete route. And here where it says route, we're actually going to change this to be the same thing. Shows: ArrayOf(object), and we just gonna bring that in with our PropTypes as well

[00:05:02]
>> Brian Holt: That's it for search. Since it was already connected right, so we don't have to connect it again.
>> Brian Holt: Okay, any questions about what we did to search?
>> Speaker 2: They're asking, can you go over how the show is passed down to the details for redux?
>> Brian Holt: Sure. So we're using redux here, right?

[00:05:29] So we have shows which we're putting into our redux store when we initialize it, and then never changing it right? We're never touching redux or we're never touching the shows after we put it into redux, that's what I meant to say. And then here, we're doing map state to props.

[00:05:47] Now anywhere that is a connected component that we use with this connector right here, is automatically going to get shows pass into its props. That's where that automatically is showing up. It's thanks to the magic of reactRedux connector.
>> Brian Holt: Questions about that? Does that make sense? This is the same principles of how we're passing around search term, it's the same way we're passing on the shows.

[00:06:18] This is just another branch of our redux state tree.
>> Brian Holt: Okay, so let's go fix client app finally. This is fun cuz we get to delete a bunch of stuff. In fact, all we have to do is delete stuff. So delete this, the shows part, from the requires.

[00:06:40] [SOUND] Delete shows from search. So delete this part right here. Delete assign show, we don't need this anymore. [SOUND] And delete assign show being passed down here, on the onEnter. So notice our client app just got ten times more simple. Which is pretty cool, right?
>> Brian Holt: So that's what I like about redux.

[00:07:20] By externalizing our state, our react components get to be more dumb, which is always a good thing. You want your UI usually to be pretty dumb.
>> Brian Holt: Any questions about what I did to client app?
>> Brian Holt: Okay, looks like people want to see details again, so we'll hop over there.

[00:07:46] Make sure you're saving everything along the way too.
>> Brian Holt: So here, we did connector to get it connected to redux. We added a propType as well and that arrayOf to get the right kind of propType. The only thing we changed up here, besides this require up here, it's getting the proper show from this.props.shows right because shows is being passed in this as a prop and then we're using this.props.params.id.

[00:08:22] This is the param, this is the ID from the URL. If you remember correctly, that react router gives us. And so we're just pulling it out. This is not going to work the way that I think it is. Nope, okay, so.
>> Speaker 2: I think they're saying you need to add a params to the propType?

[00:08:40]
>> Brian Holt: Yeah, that's gonna be true too. So yeah, I have to make this a little bit more complicated than I wanted to. So.
>> Brian Holt: This is Science Show Business.
>> Brian Holt: So I need to get this logic from here. I need the same logic that I had up here.

[00:09:03] So.
>> Brian Holt: That's not what I wanted to do.
>> Brian Holt: Okay, that should be fine, go back to details. The dangers of changing things while you're writing them. So if you put this here, I don't actually want that, I want a signed show and I want it to take it in an id.

[00:09:35] And then I just want this to be equal to id. And I'm gonna do this with this.props.shows. Get rid of this replace thing, I don't need that.
>> Sneezing Student: [COUGH]
>> Brian Holt: Bless you. And then instead I'm going to return showArray 0. Equals, okay, so now I want this to be this.assignShow.

[00:10:23] And I wanted to pass in this.props.params.id. Okay, so this is doing the same logic that we were doing before but it's going to filter it down to exactly the one that we want, return that, and that's going to be our show right here.
>> Speaker 4: Do you want to remove the comma in there?

[00:10:46]
>> Brian Holt: This is not a, it is. It is a class. Thank you.
>> Brian Holt: Okay, and then you also do have to put params down here, I forgot about that cuz it's still an object. So, with a comma.
>> Brian Holt: Okay, that should work now.
>> Brian Holt: Okay, so let's see what Linter errors I'm getting here.

[00:11:24] Nope, no Linter errors. Cool. So let's see if I successfully externalized all the state.
>> Brian Holt: So let's go to home, I'll search for house, for the house. Okay, so everything moved successfully. I'll cut a branch here in just a second.
>> Brian Holt: So yeah, looks like that's all working now.

[00:11:59] Is that working for some people? Cool. So I will push a branch in just a second. Scott is making an observation that one might think about a binding show. The reason why that we don't need to is because I'm calling it here, which every time I'm in render it's gonna be guaranteed to be the right context.

[00:12:25] So this is always gonna be correct. So I actually don't need to bind in this particular case. It's the callbacks for like on-change and on-submit that you have to worry about. Those are the ones that are have to be bound. So this one actually is okay as is.

[00:12:40]
>> Brian Holt: Okay, so we've successfully refactored to move all of our shows into redux. Any questions about that?
>> Speaker 5: Getting an unexpected token with shows.
>> Brian Holt: What line?
>> Speaker 5: Line 35.
>> Brian Holt: On which?
>> Speaker 5: It's in details.
>> Brian Holt: Found it. Cool.
>> Brian Holt: Other questions? Make sense? I don't think any new concepts are necessary explored here, it's just more applications, more refactoring.

[00:13:20] And again, I think it's good for you to be able to see how you refactor react, cuz half of our jobs is refactoring, right? That just happens a lot when you're writing code. Okay, we broke another one of our redux tests. Now our initial state one is not gonna be correct anymore, but hurray we're not gonna fix that right now.

[00:13:39] [LAUGH] Okay