How it works...

The key to understanding how Firebase works with Redux is that you need to know that Firebase uses a WebSocket to sync the data, and that means the data is streaming in real time. The way to detect data changes is by using the database.on() method.

In the fetchPhrases() action, we have three Firebase listeners:

  • database.on('child_added'): It has two functionalities. The first one brings the data from Firebase (the first time) row by row. The second functionality is to detect when a new row is added to the database and updates the data in real time.
  • database.on('child_changed'): It detects changes in existing rows. This works when we perform an update of a row.
  • database.on('child_removed'): Detects when a row is removed.

Get React Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.