Wiring Redux to Components

[00:00:00]
>> So now we have it all set up to track our adopted pet, but now we have to start using it. So let's go to details.jsx, you can delete this import up here. From React, we can get rid of useContext, we're not using context anymore. We are going to have to import dispatch.

[00:00:33]
UseDispatch rather. From react-redux. And then we're going to import adopt from adopted ./adoptedPetSlice. Okay, so now get rid of the context we don't want this, line 16 and 17 here, it can just be dropped. And we're gonna say const dispatch = useDispatch. All this does, this useDispatch, is it gives you back a function here called dispatch which allows us to give actions to our core store.

[00:01:32]
Okay, so this is just a function. Down here where we do setAdoptedPet. All we're gonna do instead is we're gonna say dispatch. And then we are going to wrap this in a function called adopt. So if you remember that little function I coded for you. This is just going to make a action object out of this pet payload, and then it's going to give that to redux, which is going to run our reducer for us.

[00:02:12]
So there's a couple steps there. And again, this used to be a lot more explicit when you were writing raw Redux. But this is a lot less code, but it does the same thing. Good so far? All right, so now this is changing. So now every time I click that adopt button, it is going to get stored in redux.

[00:02:38]
But now I have to read it out of redux. So let's go do that, hop over to SearchParams.jsx. Get rid of the AdoptedPetContext up here. Okay, you can drop useContext as well from react up here. And we're going to import useSelector from react-redux. This is a function that allows us to get stuff out of redux.

[00:03:16]
Okay, you can drop this line right here on line 15. In fact, you can just replace it, const adoptedPet = useSelector. This you're gonna give a function to pull data out of redux. So I'm gonna say give me all of the state of my redux store. But only give me back state.adoptedPet.value.

[00:03:48]
And now this adoptedPet is going to be whatever I had stored in the adoptedPet. So this function is actually more important than just give me the information that I'm looking for. Obviously, it's important for that. It's also a subscription to redux. So when you hand this function to Redux toolkit, it's gonna say, okay, I'm going to use this function now to understand when I need to update.

[00:04:23]
So if this function changes. So if I update my redux store and then this adoptedPet.value changes, redux knows something changed. Therefore, I'm going to tell searchParams it's time to re-render. Why is this important? Why can't I just do adoptedPet or let's say store = useSelector(state-state) and then say const adoptedPet = blah.

[00:05:10]
This will technically work, right? I'm doing the same thing, it's gonna pull out the correct data, but it's gonna use this as the subscription. Now if anything changes in redux ever, it's always going to force searchParams to re-render. That's bad because you're gonna force a lot of unnecessary re-renders.

[00:05:34]
Does that make sense? So this function's important is what I'm trying to underline. Please make sure that you're only pulling out the bare minimum amount of data that you absolutely need for this particular component. Do not pull out unnecessary data, okay? Okay, so I think now, we should be able to go, look at our app.

[00:06:02]
And everything should work the same way that it did before. So I'm on Luna here, I come on here I click adopt Luna. And you can see here Luna is showing up over here. But what's cool is this is all coming from Redux now it's not coming from React context.

[00:06:20]
It's more in direction but let's talk a little about the testability of this now. I can test this reducer, I can test how this gets created. I can test the action creators. There's lots of steps here now that I get to test. How would you test that with context?

[00:06:43]
It's possible but it takes a lot of introspection on your components to test context. In other words, we don't typically test context cuz it's such a pain to test.