containers. See sample snippet below.
When I started drafting out pin-vault, I knew from the start that I was going to use redux for all that state management goodness. The only blocker then was how do I emulate the
presentational setup that I’m used to with normal react + redux.
I was able to distill the situation with the following action items:
- How to do routing in React Native?
- Where do I inject the Redux stuff?
The first problem is easy, react-navigation seems to be the community’s choice for react native routing. As for the second problem, that’s where I kinda got stuck.
There is some documentation about integrating react-navigation with redux but it’s for the use case when you want to manage the navigation state by yourself, something I’d like react-navigation to handle for me. What I was looking for was the ‘container component’ equivalent in react-native.
react-navigation introduces the notion of a ‘screen’ which is essentially the component that gets ‘imported’ and rendered when you navigate to a particular route.
Screens are basically the root for all your presentational components so it is only logical that this is THE component that should be connected to your redux store.
Here’s a sample snippet demonstrating the integration:
It’s as easy as that! No need to include the boilerplate outlined in the documentation linked above. Happy coding!