A few years ago Firebase was a game-changer for web-app development. Designed for high performance and ease-of-use, developer’s productivity was boosted and millions of apps were built since then.
Later on, NGXS brought to the Angular ecosystem a new reactive state management library. With simplicity and code ergonomics as its core focus, it helped thousands of developers to make the dreaded state management problem go away.
But how can we bring them together to take things to the next level?
NGXS recently introduced a plugin called
@ngxs-labs/firestore-plugin which provides a simple yet flexible API to connect an
@Action to a Firestore query, and its query results to the store, allowing you to easily keep all your app data in a single place, making things much easier to select and combine data from different origins (Firestore, REST APIs, etc) and displaying it in your components.
In this tutorial we’ll go over how the plugin works and a few examples of how to use it.
Let’s say you have a
@State, and you want to fetch items from a Firestore collection into the state. Using
firestore-plugin all you need to do is:
@Actionto a Firestore query
StreamEmmittedAction handler and update the state accordingly.
That’s it. That’s all you need. Now let’s take a closer look how to do this and how it works under the hood.