Recompose and Redux. Faster and More Flexible App Development Process

Let’s start directly from data that you’re taking a look at Google Play Store and/or AppStore. What can you see there? The speed with which various applications are added there and more importantly, developed.

For instance, this statistic represents the # of mobile apps downloads in 2016 (149.3 billion), 2017(197 billion) and the expected number of downloads for 2021 (352.9 billion)

Source: Statista.com

Now, take a look at the number of apps available in leading app stores as of March 2017:

Source: Statista.com

You can see that the almost world-scale ‘expansion’ of mobile, responsive apps in the universe of technology is already here. As much as the new development tools. One of such examples is React Native app development with implemented Redux, a predictable state container, and Recompose which serves as a utility belt for React.

Make your app development process effective and developers happy

Let’s consider a formula on why this powerful ‘trinity’ (React Native, Recompose, Redux) is important for both, developer and your business.

React Native in combination with Redux and Recompose makes up the following: flexible UI architecture for developers and app they’re creating + robust app optimization if required + no need to install native code building tools = right-on-time distribution of your mobile and intuitive app project and real profit for your business. Simple as that. Now the details.

What is Recompose? Why to use Recompose?

Recompose is known as a utility belt for React function components and higher-order components, presented by Andrew Clark, front-end engineer at Facebook and co-creator of Redux.

In simple words, consider that now, with the help of Recompose, a developer can create their own ‘tools kit’, that allows to easily build and manipulate React components. For instance, you want to add custom props, variables or pure-render your React component, etc. - these can be done with the help of Recompose. Clearly a time saver for a dev and accelerating mechanism for your business.

What is Redux? Why to use Redux?

The definition is quite simple: Redux plays role of a predictable state container created for JavaScript-based apps. Behind such a plain definition hides what is the most valuable for the developers in Redux.

1. Simplified data flow organization

If compared to Flux (Redux was created under the Flux influence) data flow pattern, like this:

Redux omits a Dispatcher stage and Action goes directly to the Store by using a function which is called reducer. This allows changing the state tree of your app every time a new action is dispatched. According to Redux documentation, “It [reducer] describes how an action transforms the state into the next state.”

2. Live code editing and time travel

If you're up to implement Redux for React Native development, you can easily switch between your app states, or, simply, ‘time-travel’ (Action A the ‘initial entry’ vs Action B the ‘newer change’); and take a look at the results on the View layer by means of hot (instant) reloading.

How exactly do Recompose+Redux provide UI optimization techniques for devs? + Examples of using Recompose for React Native development

Recently we’ve developed a personal finance management app for iOS or Android, called Perfi. (Download Expo app to your device, open the link, scan a QR code and you'll get Perfi) For this, our team has used React Native with Recompose utility belt and Redux as the app’s backbone.

Here, take a look at how we have built app’s lists using technologies mentioned above on ListView example.

ListView is written in ‘clean’ React Native’

Now, here’s ListView sample with Recompose used:

...You might ask ‘Where is the profit? In just winning a few strings? Not that convincing’…

Our app contains a lot of lists, and each is based on ListView. Like in the strings provided below. These are used in all ListView-s, and are a part of ListView’s API:

const ds = new ListView.DataSource({ rowHasChanged (r1, r2) => r1 !== r2 });
this.state = {
dataSource: ds.cloneWithRows(props.transactions), };,

To implement const ds string in each list, we’ve created an enhancer for it:

We did the following: extracted withDataSource and withClonedDataSource methods and composed them together.

As a result, now we can use withDataSource enhancer like this for all our lists:

const TransactionsList = compose(
withDataSource('transactions'),
withTransactionItem,
)(ListView)

The outcome is, if in short, you don’t have to write the same const ds string for each list, just use the enhancer, like provided above and it will be included in other lists.

According to our devs’ words the project went as smooth as they wanted it to be, using Recompose for React Native development. By the way, you might be interested in the strategy which is still our guide on building personal finance apps.

Sounds ‘fairy-tale-ish’. Are there any drawbacks?

Before you start implementing Recompose and Redux for React Native development, make sure the devs in your team are familiar with this library and have a strong background working with React. ‘Proofcheking’ your code beforehand could be important, since if there are odd lines and illogical algorithms, using Redux+Recompose can only bring you more loose ends.

Learn more about React Native Limitations and Best Practices to Deal With Them.

By the way, read this awesome post by Redux author Dan Abramov on why ‘You Might Not Need Redux’ . If you’re building apps or JavaScript debuggers, give it a try though.

Project timing

If you plan your project with all the priorities included, then the development stage of something similar to Perfi should take you ~ 1, 1.5 month.

To round up with, get a glimpse on who uses Redux to power up their technologies:

1. Sitepoint , must-have in bookmarks if you’re a dev.

   

   Patreon “Creators, come get paid”. Guess no explanation is needed.

   

2. Craftsy - great online educational platform for creative people.

   

3. Invitae - a genetic information company, used Redux technology for their Family History Tool iOS app.

   

4. Perfi - personal finance management iOS/Android app from us. We do care for your accurate money management processes. That’s why we’ve combined Redux and Recompose while working on this app’s intuitive functionality.

To get a full Redux showcase list, please, refer to Dan Abramov’s Github questionnaire .

Final thoughts

As you can see React Native app development in combination with Recompose and Redux might provide more than enough space for your product distribution. Thanks to the features Recompose and Redux provide, they can not only speed up the development process but also reduce software development costs, as we’ve seen it on the examples provided.

Have something to add? Contact us and let’s get the details discussed.