Introduction

Redux and React are things that are normally associated with web development. Redux is a beautiful design pattern that can help with any application, even native ones! This is the approach that I took to integrate the Redux pattern into native Android development, and leverage the stability and predictability of a finite state machine to native development.

Further, I used Firebase in order to do cross platform data synchronization across web and mobile clients. Firebase has the benefit of providing offline mode for web and native mobile client apps, which is incredibly powerful.

And I decided to use Firebase authentication for web, and mobile as well, which provides a consolidated way to do cross platform anonymous authentication and signed in authentication using a variety of social sign in providers (Google, Facebook, etc.)

Here’s a video of the app in action and here’s a link to the code that produced this app on Github.

There’s a web app that works hand in hand with this mobile app. Here are some links for the web app:

Screen Shot 2017-01-26 at 5.42.19 PM.png
This is a screenshot of the web app in action

Architecture

For more information on how Redux is used with the native Android app and how it syncs with the web app, check out the wiki page on GitHub.

Redux Middleware and Firebase

The Redux library I’m using for this project is the Bansa library on GitHub. You can add it to your build.gradle and get started very quickly.

// First, add JitPack to your repositories
repositories {
...
maven { url "https://jitpack.io" }
}

// Base package. Everything else is built upon it!
compile 'com.github.brianegan.bansa:bansa:1.0.0-beta'

Here are some links that contain some important details about this Redux Middleware and Async Actions pattern (which is used in the native Android and web app):

The way to get Redux and Firebase to work together is to use Middleware that handles some actions, and have the Reducer functions handle other actions. Regardless of whether these actions are handled by the Middleware or Reducers, they are dispatched to the Redux Store.

The Redux store contains the state of the application, which stores the currently logged in user data, and the todolist data for this user. Both of these things are backed to Firebase. This is what the Firebase database looks like:

The following diagrams shows how the various actions are processed by Middleware, or Reducers, and how that interaction works with Firebase:

68747470733a2f2f6c68332e676f6f676c6575736572636f6e74656e742e636f6d2f366d47463662644d7a7273394d646b78636978734b6b72356142734e413666706e4864437a694f5a306c4e6642796573366d445259683938325971424e374d7576726735637738465974733d77323139362d68313536322d6e6f.jpg

Actions that are processed by Redux

The Middleware handles the following actions:

  1. AddTodoItemAction (this writes to Firebase)
  2. ToggleTodoItemAction (this writes to Firebase)

The Reducer handles the following actions:

  1. ResetStateAction (no connection to Firebase)
  2. RestoreStateAction (no connection to Firebase)
  3. SetUserAction (these are read from Firebase)
  4. SetDataAction (these are read from Firebase)