Barbarian Meets Coding

WebDev, UX & a Pinch of Fantasy

2 minutes read


For a Step by Step introdution to Angular 2 I advice you to read ”Getting Started With Angular 2 Step by Step” a new series of articles I just finished writing.

What is ngrx?


interface Action {
  type: string;
  payload?: any;
interface Reducer<State>{
  (state: State, action: Action): State;
class Store<State> extends Observable<State> {

  //  allows you to select part of state within the whole application state
  select<T>(s: (v: State) => T): Observable<T>;

  dispatch(action: Action): void;
interface Selector<AppState, SelectedState> {
  (state: AppState): SelectedState;


  • Isolate side-effects from components
  • Wraps side-effects, it delivers them backs as actions to the store
  • Effects are triggered by specific actions
class Actions extends Observable<Action>{
    ofType(type: string): Observable<Action>;
  • The Actions service allows you to observe when specific actions are dispatched
  • You can use this service in effects services that encapsulate side-effects
class BookEffects {

    // use the Effect decorator to tell ngrx/effects
    // which properties to subscribe to
    @Effect() actionSource: Observable<Action>();

ngrx/store devtools


Jaime González García

Written by Jaime González García , dad, husband, software engineer, ux designer, amateur pixel artist, tinkerer and master of the arcane arts. You can also find him on Twitter jabbering about random stuff.Jaime González García