Redux Offline Queue — Open Source

A simple library to queue your application’s actions/requests if there is no internet connection, and fire them when connectivity is back.

Made to perfectly work with React Native and to be compatible with redux-saga.

State management is essential to any medium to large size single page application. The best known state manager in the React and React Native world has to be Redux. Usually when dealing with a frontend framework such as React will mean having to connect to a backend API of some sort, or sometimes multiple. For this of course, the users will need internet connection… duh!

Lost connection!

Everything is good with your app, until your user makes a POST request while having lost internet connection. Yes, you can just say “whatever… let them do it again when they get back connection”, but that is just not a good user experience. Say the app has some sort of posting feature, and your user writes something lengthy. If you didn’t handle that, the user will have to type up the whole thing again and re-submit when connection is regained.

That’s where the need to handle this came for Inspire. We are a digital agency that build websites and apps with social impact. User experience is very important to us.

Losing connectivity is not that likely for web apps, or do not occur as often as they would with mobile apps. Of course there are libraries out there already that solved this problem such as redux-offline and more specifically to mobile react-native-offline. So why make another one?

Motivation

At the time of the development of this library, redux-offline had a bug that prevented the queue from being restored after the app had been killed. This was a complete deal breaker for us, and on top of this the library seemed to be unmaintained (seems to no longer be the case). Another option was react-native-offline, but the problem with this one was that it relied heavily on flux-standard-action structures. These didn’t play well with the library reduxsauce, awesome library to make your Redux stores and actions look so clean, we were using.

To be honest both of these are quite complex and we wanted a simple solution. After all it’s just queuing actions to dispatch once connectivity is regained and it shouldn’t be complicated to configure or integrate. After some more digging we found somewhat what we were looking for: redux-queue-offline. This one was nice and simple, BUT, unfortunately an old and unmaintained library, plus it did not have many features or options of integration. Nevertheless, it gave us a great start and the great inspiration we needed to add the ability to integrate reduxsauceand make it super redux-saga friendly.

Arise! redux-offline-queue

Many of the problems and bugs that the other mentioned libraries had by now have been fixed. But we decided to open source this anyways because we still feel like we would have gone with this solution over the other ones, due to its simplicity in comparison.

Get up and running in 4 easy steps:

  1. Add the redux-offline-queuereducer to your combineReducers.
  2. Add the desired middleware to your applyMiddleware.
  3. Monitor the connectivity and let the library know.
  4. Finally, mark the actions you want to be queued.

The detailed walkthrough

Step 1: Add the redux-offline-queue reducer to your combine reducers

Either import {reducer as offlineQueue} from 'redux-offline-queue'and add it to the combineReducers or require it like so (whatever floats your boat):

Step 2: Add the offlineMiddleware

With redux-saga

It is IMPORTANT that the consumeActionMiddleware is placed last, so you can allow the previous middleware to react first before eventually getting consumed.

Step 3: Declare the actions to be queued
With
reduxsauce

Without

Last but not least…

Step 4: Monitor the connectivity and let the library know

Works perfect with React Native’s NetInfo

That is all! Now your users will be able to send their POST requests with no connectivity, without a worry. As soon as the connectivity is back these will be handled, even if the app is killed. Providing a great user experience and not limiting their actions to be entirely dependent on their internet connection.

Check out the project for more on Github: https://github.com/InspireNL/redux-offline-queue

Digital products, meaningful impact.