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.
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
Providerand every component who wants to access the
contextwill have to specify the
contextTypesas shown below.
- The functional component do not have the access to
this, but they receive the
contextas the second argument.
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.