Facade Pattern

What is the Facade Pattern?

The facade pattern is a classic. Anyone who has read the GoF book knows that it is a mainstay of computer science. Quoting from the GoF book:

A Look at your Typical Non Facade State Pattern

This pattern is particularly advantageous when it comes to ngrx actions. Let's imagine we have the following action:

// choose-size.actions.tsexport class LoadChooseSize implements Action {readonly type = ChooseSizeActionTypes.LoadChooseSize;constructor(public payload: any) {}}

Now any time that we have to call an action we have to do two things:

1. Have a store select within the component.

2. Call a dispatch.

chooseSize: Observable<any>;// choose-size.component.tsimport { Store } from '@ngrx/store';constructor(private store: Store<any>) {this.chooseSize = store.select('chooseSize');//..merge(this.updateSize\$.pipe(map((value: any) => new ChooseSizeUpdated(value)))).subscribe(action => {
  store.dispatch(action);});

This is quite a bit of overhead. Using the facade pattern let's see if we can simplify this process

Create the Facade Service

With a facade pattern, we have the ability to take the following two items:

1. Store select

2. Call a dispatch.

and put them into the into our facade.

The facade should be treated as a service, and we will create a service folder for our facade to go into.

The facade pattern looks like the following:

export class ChooseSizeFacade {constructor(private store: Store<any>) {}

  chooseSize$ = this.store.select('chooseSize');UpdateChooseSize(ChooseSizeFormPayload): void {this.store.dispatch(new ChooseSizeUpdated(ChooseSizeFormPayload));}}

Hooking Facade Into Component

Now to call our action, all all we have to do is call the ChooseSizeFacade service, and appropriate method.