Autoplay

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

    Dan AbramovDan Abramov

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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss