Connecting Firebase and Redux

  • The Javascript SDK takes a really long time to initialize. The process of loading the SDK(~90kb), initializing firebase, retrieving the logged in user and loading some data can take easily 10 to 20 seconds on a cold start, even on a good network connection.
  • 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.

  • The entire state of your application lives in a single plain Javascript object in the client (browser), and it can be initialized easily with default or persisted data.
  • 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

  • Listen for changes in portions of the realtime database and dispatch actions to update the state in the Redux store whenever the data changes.
  • 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

Firebase ⟷ Redux

Firebase ⇎ Redux

  • There is no way to turn off the two-way bindings. This could be a problem in complex Single-page applications where we might end up with dozens of dead listeners, or worse still, unexpected data changes.
  • 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

  • path: The location of the data in the realtime database
  • 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?

--

--

--

Founder, Jovian

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

“Responsive” Font-Size Using Vanilla CSS

Firebase in a React Native App

You can’t send an email from the front-end with JavaScript, or can you?

Why MEAN is an ideal stack for large-scale eCommerce projects?

Push Notifications using Web-Stomp, RabbitMQ and Hutch

How to quickly create an array of sequential numbers in JavaScript (and how it works)

D3.js Installation Methods

Closures in JavaScript for Beginners

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
Aakash N S

Aakash N S

Founder, Jovian

More from Medium

MERN_OpenKitchen

Re-render & Optimization in React

Why React? worth it in 2022 ?

“This.” keyword with arrow functions and with normal functions in JavaScript