Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

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

I am going to show you two dif­fer­ent ways of pass­ing the store object down from the par­ent com­po­nent to the all the child component.

  • With­out using the reacts’ con­text feature
  • With using the reacts’ con­text feature

With­out using the reacts’ con­text feature

In this approach, we have to pass the redux store object explic­itly as a prop. The passes the store and then it gets passed down the hier­ar­chy.
Note: the way it can be accessed in the func­tional and non-functional components.


With using the reacts’ con­text feature

In this approach, we have to cre­ate a con­tainer com­po­nent called which passes down the store. Then the store is avail­able to all the com­po­nents via React’s advance fea­ture called con­text.

Few things to note :

  • We have to spec­ify the childContext on the Provider and every com­po­nent who wants to access the context will have to spec­ify the contextTypes as shown below.
  • The func­tional com­po­nent do not have the access to this, but they receive the context as the sec­ond argument.

We can avoid writ­ing the boiler plate code for the Provider com­po­nent by using a redux bind­ing for react called react-redux as show below.


You may also like...