Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


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

    0.14 - 16
    3 - 4

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



    Become a Member to view code

    You must be a Pro 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
    orLog In




    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.

    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.

    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.

    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.