NGXS Facade

Ivanov Maxim
Feb 16, 2019 · 3 min read
NGXS is a state management pattern + library for Angular


Today we can reuse logic for avoiding Store injection with @ngxs-labs/dispatch-decorator. This package simplifies the dispatching process, you shouldn’t care about Store service injection as we provide more declarative way to dispatch events out of the box. It also enables a very clean implementation of an NGXS Facade. Read on to find out more…

Get started

$ npm install @ngxs-labs/dispatch-decorator — save

Dispatch from component

Firstly you have to create a state:


Unfortunately, we still have to write a lot of business logic right in the components. Perhaps we lack additional abstraction. In many ways, we would like to have an additional layer of interaction with our states, so that we do not need to mix everything up in the components.

NGXS Facade

In many ways, we would like to encapsulate interactions with our states and make it clearer. And we have such an opportunity heroes.service.ts:

  • provide a context-specific interface to more generic functionality (complete with context-specific input validation);
  • serve as a launching point for a broader refactor of monolithic or tightly-coupled systems in favor of more loosely-coupled code.
  • public methods (e.g. addHero(), deleteHero(), loadAll() ) that hide internals of Store usages. loadAll() demonstrates that the async call can be done here outside the State class (before any action gets dispatched) if you prefer to avoid putting async code in your State.
CQRS Facade


Publication for NGXS related announcements and posts