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, Front-end software engineer, UX designer, amateur pixel artist, tinkerer and master of the arcane arts. You should follow him on Twitter where he shares useful stuff! (and is funny too).Jaime González García