Be the first user to complete this post
|
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 theProvider
and every component who wants to access thecontext
will have to specify thecontextTypes
as shown below. - The functional component do not have the access to
this
, but they receive thecontext
as 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. [wpgist id="dcb86657def2bd9390a170b8a4f17092" file="react-redux.js"]
Also Read:
- Reactjs flux architecture - Visualized
- Redux: Implementing store from scratch
- Disable eslint no-unused-vars warning on global functions
- Pure vs Impure functions
- exports is not defined