State Management in Pure React, v2 Routing & Thunks

[00:00:00]
>> So the question where I missed the dependency on dispatch leads this very perfectly into our next thing, which is missing dependencies with useEffect and how it can bite you, right? Cuz before we've seen what happens if we don't define any dependencies, right? And we talked a little about if we give it that empty array, it only fires once, and all of our problems are solved, right?

[00:00:21] We never really saw how not defining dependencies that truly existed could bite us. So what we're gonna do is we're going to add a little bit of routing to this application, so I've got the router, plural, or router, singular, I'm gonna bring a Route in as well. I'm also gonna bring in this character view, which will show us details about a given character.

[00:00:56] Right, and we're just gonna add a little bit to our kind of rendering here, which is, we've got this sidebar. We're also going to add, through the magic of pre-written CSS, We'll have a section with the class name, Of CharacterView. And in there, it will have this. We'll actually have a Route that will say, okay, if the Route, path is, /characters/id, Then we'll render the component, CharacterView.

[00:01:49] All right, let's make sure that all works. Endpoint is not defined, index, that's cool. Line 44, All right, everything's good in the world. We've got those fetch characters. We'll go ahead and fetch some characters. If we click on one, we'll see what is currently right now an empty details page, right?

[00:02:43] And you can see the URL is switching through React Router, doing a bunch of work for me. I can see that the right thing is highlighted. Everything is great in the world. So we technically, from the API, have all the data, and we could pass it through. But what we wanna do is read from the URL right?

[00:02:59] If it is character/1, let's go and hit the endpoint for character/1 and load that data, right? Because I get a lot of API's in my job that come across my desk, it'll tell you, lot of, especially hypermedia API's, which will say, okay, all the children, it'll only give me the IDs, right?

[00:03:18] And then it's my job to fetch. Or for the listview, I'll have a very small subset of the data. But when they go to the actual detail page, I will need to load more data, right? All the rest of the data for the campaign, or anything along those lines.

[00:03:32] So what we're gonna do is, okay, which one do we load? We look at the URL. The URL is that ephemeral state holding onto location. If we're on character/1, go get me the character with the id of 1. If we're on character/7, go get me the character with the id of 7, right?

[00:03:52] And so we'll go ahead and we'll take a look at that. So right now it's just getting an empty character cuz it's expecting to get passed in. We're actually gonna go fetch that ourselves. And so instead of that we're gonna say, const [character], and, setCharacter. We'll useState, and we'll just give it that empty object for now.

[00:04:29] All right, a sensible default, and then we're just gonna do a useEffect. Like just as we've seen a bunch of times here before. And all that is going to do is it's gonna fetch, endpoint +, '/characters'. So React Router passes in some props for us, right? The most important one is this one called match.

[00:05:03] And you notice that when I defined the route in index.js, I gave you this dynamic segment here, which was :id. So, I'll do characters/, match.params, whoop, .id. Then, Go ahead and parse it. And then we'll say, And the response we'll say, go ahead and setCharacter(response.character). And we should deal with error messages, but we're not.

[00:05:59] We'll pull in useState and useEffect, as well. Cool, so you can see I was at 7, so I simply went ahead, and it loaded 7. So let me go hit 6. It's reloading it, But it's not changing the character.
>> Cuz your id hasn't changed? Your id's hardcoded.

[00:06:35]
>> id is getting from the URL. So id's good, right? But you're dangerously close. Remember we said that if we put in an empty array for the dependencies, it loads when the component mounts. Now, normally, we're throwing away components and remounting components, so it hasn't bitten us yet.

[00:06:53] But in this case, with React Router, it's simply keeping the same component on the page and replacing the props, the match prop that's getting passed in, right? So it's like, yeah, yeah, I loaded the data for you based on the id. It's like, I'm done, and some on, do the mount, I'm out, right?

[00:07:12] But we're saying, hey, you have a dependency on match.params.id. Why I point this out? There were no errors. If [INAUDIBLE] you, you might've gotten a warning, but there's no error message, nothing will break, you will just be sad. And you will not know why, and then you'll figure it out.

[00:07:32] You will figure it out, right? But it will take you way longer than you would have wanted to. And you'll question yourself. And it's not really your fault, right? So now if we fetch the characters, I can actually switch between them, right? And so that little tiny omission there, basically, cuz it's doing what it's supposed to do.

[00:07:53] It said, I don't have any dependencies. I don't need to run again. So it didn't, right? But we have to say, no, no, if you get a new param, cuz it wasn't super clear to us the difference between mount and unmounting components and having one when we replace them.

[00:08:10] That is an implementation of React Router, right? We didn't really think about it. And that's why it's important to make sure that you are declaring all those dependencies. Because it's not always clear to you the difference between when one is getting unmounted remounted and when one is simply getting new props passed to it.

[00:08:24] Right, depending on the library that could be extracted away from you. So making sure that if you use it and it comes from the outside world, that it is declared in the dependencies, right? Doing it does not hurt you, not doing it could make you lose an afternoon.

[00:08:41] Nobody wants to lose an afternoon. So making sure. And that's kind of an example of what happens when we miss it, Paul?
>> I expect this to bite me in the future. So you said it was exclusive deps is the library thing?
>> Exhausted deps.
>> Exhausted, okay, cool.

[00:09:00] And, yeah a lot kind of pretty canned ones will tell you about it, But yeah, having ESLint reinforce this for you will help you. Sweet, so we've got that in place.