Be the first user to complete this post

  • 0
Add to List

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"]



Also Read:

  1. webpack with babel6 and react
  2. Reactjs flux architecture - Visualized
  3. Dynamic module loading with require
  4. Pure vs Impure functions
  5. Pass props to the handler component in react-router