Check out a free preview of the full Intermediate React, v4 course:
The "Providers" Lesson is part of the full, Intermediate React, v4 course featured in this preview video. Here's what you'd learn in this lesson:

Brian integrates Redux with the rest of the application. A Provider is added to App.js. Only the components within the provider will have access to the Redux store.

Get Unlimited Access Now

Transcript from the "Providers" Lesson

[00:00:00]
>> Random the corner here, let's go to app.js. We're actually going to go integrate. We've finished all of our Redux implementation. Now we're going to connect Redux to react. So delete theme context. We're going to use context anymore. And delete use state because we're not gonna do any hooks anymore.

[00:00:21] We're going to import provider from react Redux, and then we're going to import the store from store. Okay, delete this use state here. And we're going to replace this theme context.provider With store equals store. Okay, and then notice I changed it down here as well on line 22.

[00:00:59] So it's provider. So this works exactly like context as that now this store is available to everything underneath it, right? So, if I had some h1 here. And I was trying to read from the provider here it would not be able to, cuz it's not inside of the component here.

[00:01:25] Okay, so now this is available everywhere like context. Let's head over to SearchParams.js. Okay, delete theme context, done. Delete use state we're not going to use that anymore. You can delete use context as well. Actually, I think we do need still we still do need use state but we don't need use context anymore.

[00:01:57] Okay, you can delete the theme here. You can delete animal, you can delete breed, you can do delete location. Okay, we're gonna still store pets here, but you totally could move that to Redux as well. Okay, and then up here we're going to import a new function called use selector which is a hook from react Redux.

[00:02:27] So now const animal is going to be equal to use selector, and then you write a function that says, all right? So this is the overall state of my entire Redux store and then you're going to just return the part that this thing cares about. So in this case, all I care about in my Redux store is state.animal.

[00:02:58] Right, now animal is just going to be pulled out of Redux, and so on and so forth location. Use selector, state return, state.location. Const breed = useSelector. And I'll show you if you wanna write this a little bit different way, which is breed, this is destructuring breed out of this.

[00:03:30] These two things are doing relatively the same ones just using destructuring. Honestly, this is probably a bit clearer. It's a bit less dense in terms of all the parentheses and curly brace it up to your discretion which one you prefer. Const theme=useSelector. State return, state.theme. Now the first thing that people always ask me here is like why don't I just return all of the state.

[00:04:01] And then just instead of yet right just say current state equals use selector state state, and then I just say instead of state.theme right down here, I'll just say state.animal and so on and so forth. Let me tell you why this is a bad idea. So one this is useful for you getting animal out of this.

[00:04:20] So now you just have animal here. But Redux is also going to use this as the subscription function. So If you do this, it's gonna say, whenever state changes ever across my entire application update search params. That is not what you want, right? What you want is like if animal specifically changes, then update search params, right?

[00:04:43] So these serve both to get the information out of Redux. And it also serves as a subscription to let react know when do I update this? That makes sense. So don't do this line 14 is an anti-pattern. Okay. That should be it, at least for this.