Passing the store down implicitly via context in a react redux app

I am going to show you two different ways of passing the store object down from the parent component to the all the child component.

Without using the reacts' context feature
With using the reacts' context feature

Without using the reacts' context feature

In this approach, we have to pass the redux store object explicitly as a prop. The passes the store and then it gets passed down the hierarchy. Note: the way it can be accessed in the functional and non-functional components. [wpgist id="dcb86657def2bd9390a170b8a4f17092" file="passing-store-explicitly.js"]

With using the reacts' context feature

In this approach, we have to create a container component called which passes down the store. Then the store is available to all the components via React's advance feature called context. Few things to note :

We have to specify the childContext on the Provider and every component who wants to access the context will have to specify the contextTypes as shown below.
The functional component do not have the access to this, but they receive the context as the second argument.

[wpgist id="dcb86657def2bd9390a170b8a4f17092" file="passing-store-via-context.js"]

We can avoid writing the boiler plate code for the Provider component by using a redux binding for react called react-redux as show below. [wpgist id="dcb86657def2bd9390a170b8a4f17092" file="react-redux.js"]

reactjs 4 es6 10 reduxjs 3