Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "react-redux: Provider component" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Provider sends the Store to all of the components in the application..

Get Unlimited Access Now

Transcript from the "react-redux: Provider component" Lesson

[00:00:03]
>> Steve Kinney: So the black magic here is Redux has so far in our experience been very explicit, right? When we wired everything up in that js bin, we saw how the sausage was made, right? With map state to props, we understand those two parts there. But where is dispatch coming from?

[00:00:22] Right, it's coming from the store. At what point did you pass the current store into anything while we were doing this? Did anyone see us pass the store? We created the store, we only passed it one place. Does anyone remember? The provider. And then we never talked about the provider again.

[00:00:43] I was like, yeah, yeah, pass the store to the provider. And then, I just got hand wavy and moved on, and yet somehow, connect knows about it, which is very strange. That's again, kind of like the most amount of black magic in React Redux, which is the provider is a component that sets the context of all of its children.

[00:01:06] Which raises the next question, right? What is context? Well, context is the third never talked about child. We have this.props, we have this.state, we also have this.context. And you might be like, I have never used this.context. Good, cuz you're not supposed to use this.context. Even in the React documentation they're very clear the majority of applications do not need to use this.

[00:01:31] And I think somewhere, I don't know if it's in this screenshot, they're saying if you aren't experienced, you actually, don't use it. At one point I think it says in the docs. Yeah, it says it in that second paragraph. Basically, this is four things like Redox and MobX.

[00:01:46] Right, it has four libraries to use and this is generally speaking, I believe this is still true, a not necessarily stable API. So it can change and it will break. So you're not meant to use it. It is meant for libraries like React Redux or MobX React. That's right, it's swapped in that one.

[00:02:03] That's just to keep me on my toes, I think, as I talk about this stuff. It's for them to use in order to create this functionality where all the child components can know about the store. It's basically allowing us to side load the store into every child component.

[00:02:17] And it's definitely squirrely to use. I will talk about some of the nuances, but then while I talk about it, remember that you're not supposed to use it. [LAUGH] Like, you probably shouldn't use it. So this is mostly like intellectual curiosity in this case. So the provider, this is, again, an oversimplification of the provider component.

[00:02:39] But, pull open the source code for React Redux, I'm not simplifying it too much. They tend to pull stuff out into other files and stuff along those lines. I've boiled it down to fit on one slide, but there's not a lot happening here. So the provider extends component.

[00:02:56] And it has this method that's built into React called getChildContext, which will take the store that we pass in as a prop and return it as context.store. And the provider then passes its getChildContext to all of its children. So all Provider does is take that application as a child and returns it as its render, but all of its children now get its child context.

[00:03:23] It won't work unless you define this childContextTypes PropTypes, so you need that. It's not like normal PropTypes where you just get kind of chided in the developer tools if you don't use them. This you need, and the reason I kept this in here is if you look at the store PropTypes, you can see that it's three functions I was looking for.

[00:03:42] This is the React Redux one. This would be different for MobX. But you can see it's looking for the subscribe, dispatch, and getState, right? So it's expecting a store and it's gonna pass literally the store to every single child component under this.context.store and connect knows that. And that's where it's getting that dispatch from, that it passes in.

[00:04:04] This is the blackest of the magic that React Redux uses in this case. So in this case, all the child components would need this as well. They need to have this contextTypes property on them as well, which is why we use connect. And we don't try to do this by hand normally.

[00:04:24] It's basically, connect is taking care of all of this for us. And it's wiring this together so that we don't have to worry about it. Cuz when something is terrible, you should probably abstract it Into a library and never do it again. So luckily, other people have been nice enough to do that for us, and we get to just leverage the advantages there.