We recently worked on a react web app, like a lot of react applications out there we chose to use Redux to handle the state within the application. For those of you who don’t know Redux it’s basically a predictable state container which creates an application data-flow architecture. What does this mean I hear you ask, to explain, react only re-renders when there is a change in state. What Redux does is creates a single immutable state tree (object) and when a change happens, e.g. an api call is made a new object is created, which then causes react to re-render because the state has changed and therefore the value is different.

Getting Mobile Ready

Having completed the react web app, we were then asked to accompany this web app with a mobile app. Naturally because the website didn’t do any hardcore processing and we knew the app wouldn’t need any heavy use of resources we decided to use react-native. React-Native is a technology that has a similar syntax to react, the other benefit was that this allowed us to write one app which could then be ported to created individual apps inside both apple’s app store and google’s play store (IOS and Android).

Sharing redux between code bases?

When we looked at this website we started to work out if there was a way to share our redux between both code bases, why would we do this? Well it’s simple, if we have all the API calls all in one place, and state changes etc. Then should we ever need to make a change to an endpoint within the API we only have to make an alteration in a single place. To do this we created a new node project, which contained an install of redux. We then ported the redux out of the React web app that we had just made and into this new project. We also tried to move some helper classes out, but this was a big no no as we found when compiling our apps we were getting JavaScript based errors for missing libraries that were being reference in the helpers. So these soon went.

Action! Reduce(r)!

With the redux moved into a separate project, all we had to do was import our actions and reducers as normal into the two projects. We’ve just had apps released to the app store and the web app has been running for several months and we sleep safe at night knowing that API changes only need to be made in a single place.