NgRx + Facades: Better State Management

Prior to Nx 6.2, Nx already provided scalable state management with NgRx.

Now there is a new option when generating NgRx files to also generate a facade on top of your state management… to help you work even better at-scale.

Facades are a programming pattern in which a simpler public interface is provided to mask a composition of internal, more-complex, component usages.

When writing a lot of NgRx code — as many enterprises do — developers quickly accumulate large collections of actions and selectors classes. These classes are used to [respectively] dispatch requests to- and query from- the NgRx Store.

Unfortunately — with this standard approach — each view component is required to know about many NgRx artifacts and about NgRx state management.

Using a Facade — to wrap and blackbox NgRx — simplifies accessing and modifying your NgRx state by masking internal all interactions with the , , , , and .

While this seems like a rather trivial change (and an extra layer), the Facade has a huge positive impact of developer productivity and yields significantly less complexity in the view layers.

Facades encourage developers to think in two (2) ways:

  • Developers are encouraged to think about explicit public facade API(s).
  • Developers start to think of views as presentational components that simply render data deliver from the Facade observables.

Remember these Facade observables are long-lived streams of data delivered based on queries to specific NgRx state.

Implementing our NgRx Facade

First, let’s take a look at how a Facade is implemented as a injectable service.

The facade has an explicit public API that exposes:

  • public observables (e.g. ) to private queries for Store state.
  • public methods (e.g. ) that hide internals of Store usages.

View Components + NgRx

Let’s take a look at why the Facade pattern is useful… by comparing a View Component implementation with and without facades.

CarListComponent without Facades:

Component without Facades

The simple CarListComponent definition above ^ is required to import NgRx actions, selectors, and know how to use , and . For more real world usages, this quickly gets complicated and messy.

CarListComponent with Facades

Component with Facades

Developers will still leverage NgRx one-way data flows, immutable data structures, , effects for async processing, and more… but all this is hidden from the view layer.

From a view component’s point-of-view, NgRx Facades provide a more explicit public API and less moving parts.

Even better, Facades can inject and use other facades!

With Facades, writing state-dependent view components is much easier. To get hands-on with NgRx facades, check out this StackBlitz demo or use the Nx Schematic to generate your own NgRx files!

Testing NgRx Facades

Using async/await techniques and mock services, developers can easily test the Facade’s public API.

Nx schematics will also generate a class.

Consider the shown below:

In the above test class, we are asynchronously testing:

  • properties by directly dispatching a `CarsLoaded` action and bypassing any similar functionality in the .
  • public method using a the standard `LoadCars` action dispatched to the NgRx store.
  • using the Nx utility method to read a single value from the target observable.
  • using / to ensure our testing and and the resulting output responses match an expected sequence. Note the try/catch used to delegate the error handling to

Note, if the implementation internal used a class, we could — in our test — register a mockup HttpService to simulate the handling a action.

NgRx Facades with Nx Schematics

Use the latest Nx schematics to create both your NgRx generated files and an associated Facade implementation.:

By default the facade classes are not generated with ; use the flag to include scaffolding for Facades.

Quick Links:

Special Thanks

I am so grateful for the amazing Angular CLI and the Nx power tools. I am also obligated to say thank you to:

  • Jason Jean for his contributions to this article and for the StackBlitz demo.
  • Joost Zöllner for his original illustration depicting view components coupled to NgrX artifacts.

Solutions architect expert in NextJS, React and Angular solutions. Formerly a Principal Architect @, Team Lead for Angular, Google.