ReactNative + Redux component pattern

React Native together with Redux is a great combination of technologies for building a cross-platform mobile application. If you haven't worked with React, Redux (or similar frameworks) there will definitely be a steep learning curve to understand the key concepts and how everything works. But once you get the hang of it, you'll find yourself creating new components in no time, with code that feels very stable and maintainable.

The fact that React Native and Redux are completely independent of each other gives you a lot of flexibility when it comes to how to use them in your app. This is of course mostly a very good thing, but it can also be a bit confusing at times. One of the things that took me quite some time to figure out was how to best construct my components, when I should use Redux container components, what should be injected from the container components to the presentational components and so on. If you don't decide how to solve things like these early on in your project, you will most likely end up with code that solves the same problems in several different ways, making it very difficult to read, understand and maintain. That's why I've tried to establish a pattern for how to construct React/Redux components, using the following rules/guidelines:

• Always create a Redux container component for your presentational component, even if you don't need Redux state in your component right away. This makes your codebase more standardized and easier to read and extend. Use the suffix "Redux" for all Redux components.
• Always inject the stylesheet from the Redux component to the presentational component. This makes it possible to change styles at runtime depending on the Redux state. For example, this could be used to change the entire theme of your app.
• In a Redux component, be very obvious about which properties are being passed to the wrapped presentational component. With this I mean that properties that will be automatically passed on to the presentational component should be declared explicitly once again in the Redux component. It will be few more lines of code, but it is well worth it since it makes the flow of properties much easier to follow.
• Don't be lazy and pass unnecessarily large chunks of state into the presentational components. Pass only what you need, to keep presentational components small and focused. Failing to do so will require changes to your presentational components as the structure of the Redux state changes. You want to avoid that as much as possible.  
• Don't use the dispatch function in your presentational components. Presentational components should be unaware of the fact that Redux is being used. Instead, create functions in your Redux components that uses dispatch and pass these functions to the presentational components.
• Use PropTypes to declare the properties accepted by your presentational components.

Now on to a simple code example where this pattern is applied. We're going to setup a very basic free text SearchBox component. Note that this code is only focused on the component itself to display the pattern. How to configure and implement the rest of the project including Redux actions and reducers is outside the scope of this blog post.

First of all, we create the presentational component SearchBox:

Then we move on to create the Redux container component SearchBoxRedux:

The styles for the search box are contained in a separate file SearchBoxStyles. In this example it's just a regular hard-coded StyleSheet, but it could easily be exchanged for a more complex style sheet to make the styles depend on the Redux state.

That's all there is. These three files together demonstrate the component pattern I use when building apps with React Native and Redux. Using the SearchBox component from another component would look something like this: