Barbarian Meets Coding Titlebarbarianmeetscoding

WebDev, UX & a Pinch of Fantasy

ngrx

This article is part of my personal wiki where I write personal notes while I am learning new technologies. You are welcome to use it for your own learning!

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?

ngrx/store

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;
}

ngrx/effects

  • 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
@Injectable()
class BookEffects {

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

ngrx/store devtools

References


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