Connecting Firebase and Redux

  • The realtime database does not support offline caching or persistence on the web (it uses localStorage internally but doesn’t let you use it), so it’s really hard to make your app work offline, or improve the cold start performance by loading locally persisted data.
  • Using Firebase makes code hard to test and debug. Close-coupling of your UI code and application state with Firebase makes it difficult to reason about individual components in isolation.

Don’t mix UI code and Firebase code.

Redux is great for state management in front-end applications, and it addresses the concerns listed above fairly well:

  • Persisting the application state is straightforward, and so is loading it back.
  • Redux is great for testing as you’re dealing mostly with pure functions and plain javascript object, so it’s very easy to test them in isolation.
If this chart makes sense, you’re good to go!

Firebase → Redux

Here’s how we’ll connect Firebase and Redux:

  • Listen for changes in portions the state managed by the Redux store, and make changes in the realtime database based using the updated state.

Redux → Firebase

In many cases, we would also like to modify the database whenever a change is made inside the store. For this, we can define a function fromStore which takes the updated state from the store and a firebase database instance and updates the database.

Firebase ⟷ Redux

More often than not, we would want to set up listeners on both sides together, so that the store is updated whenever the data in the database changes and vice versa. To do this, let’s define a helper function called linkStoreWithDb:

Firebase ⇎ Redux

Our setup for connecting the realtime database and the Redux store is looking good so far, but is has a couple of important shortcomings:

  • Data changes in the realtime database trigger fromDb, which dispatches an action to update the store. This in turn invokes fromStore which tries to update the Firebase database with the same data. It would be best to avoid this wasteful write.

Firebase ❤️ Redux

Our code for connecting the realtime database and the Redux store is quite robust now. However, this seems like a lot of work to set up a simple two way binding. While linkStoreWithDb is abstract and reusable, fromStore and fromDb contain some bits of reusable logic and some details specific to our example of binding '/message' in the database to state.message in the store.

  • actionCreator: A function that takes the value returned from the firebase snapshot and returns an action that can be dispatched to set the corresponding value in the store.
  • selector: A function takes the application state, and extracts the part that needs to be written.

So you want a library?

Now that we’ve understood how to connect Firebase and Redux, the natural next step is to ensure that we never have to actually implement it. firebase-redux is a nifty little library that provides the functions linkStoreWithDb and linkStoreWithPath so that you don’t have to write them. Check out the README for more details.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store