Redux: Passing the Store Down with <Provider> from React Redux

Dan Abramov
InstructorDan Abramov

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 9 months ago

Learn how to use the Provider that comes with React Redux instead of the hand-rolled implementation from the previous lesson.

[00:00] In the previous session, we implemented the provider component that uses the react advanced context feature to make this tool from the props available to every component in our rev.

[00:13] If we pass it through the provider, we can read it in any other component from the context, which is really convenient for the container components. In fact, this is so convenient that you don't need to actually write the provider yourself, because it is included in a special library called React-Redux.

[00:34] Note that it is not the same as Redux. This is a different library. These are react bindings to the Redux library. You can import the provider by destructuring the react-redux global object in JS bin, or if you use Babbel, and something like NPM, you can import provider with the braces, because it's a named expert from React-Redux package. Or if you write ES5 code, you can write var provider equals require react redux, or react redux global.provider.

[01:11] Just like the provider we wrote before, the provider that comes with react-redux exposes this store you passed through. There's a prop on the context so the components can specify the context types, and then use this context store to subscribe to the store updates and dispatch actions.

Varghese Pallathu
Varghese Pallathu
~ 5 years ago

Microsoft XAML has a property called DataContext which is exposed in it's XAML controls. The Redux pattern described here is the same that XAML had many years ago.

Herman
Herman
~ 3 years ago

I can't get context working with store. It stays undefined, I guess this is not up to date anymore.

Duy Nguyen
Duy Nguyen
~ 2 years ago

It stops working when I switch to Provider fro ReactRedux. Can't find way to debug this.

Duy Nguyen
Duy Nguyen
~ 2 years ago

It seems like if I use the same ReactRedux version like the one in this video, the bug goes away.