Rxjs Pipe Operator (Nothing To Be Afraid Of)

Recently i noticed following code while going through Todd Motto NGRX tutorial:

  @Effect()
  loadPizzas$ = this.actions$.ofType(pizzaActions.LOAD_PIZZAS)
   .pipe(  // <=look here!!!
    switchMap(() => {
      return this.pizzaService
        .getPizzas()
        .pipe(
          map(pizzas => new pizzaActions.LoadPizzasSuccess(pizzas)),
          catchError(error => of(new pizzaActions.LoadPizzasFail(error)))
        );
    })
  );

Since i respect Todd Motto very much i decided to look what this pipe thing is about:
After pointing on "pipe" word and clicking "F12" key (in VSCode), that is what i got:

So this pipe is rxjs one of methods which exists on Observable object, like for example toPromise or subscribe
So what is it doing?
According to Rxjs documentation :

pipe method сan be used to compose the operators in similar manner to what you're used to with dot-chaining (shown below).

Thas all - compose various operators, like "switchMap" ,"map" or "catchError" which currently (in Rxjs 5.5) could be used as standalone operators instead of methods on an observable(pipeable)

Thats IT

Angular2 and NgRx

My Challenge was to get little experience of working with ngrx .
What is NgRx?
NgRx is RxJS powered, inspired by Redux state management lib for Angular2.

Basic Philosophy

Like many state management frameworks like Redux - app skeleton must include following module types - Store, Actions and Reducers

Store

simple class or object representing the application state

import postListReducer, * as fromPostList from './post-list';
import postReducer, * as fromPost from './post';

export interface AppState {
    posts: fromPostList.PostListState;
    post: fromPost.PostState;
};

Actions

function that passes type and params of what reducer should do

    static LOAD_POSTS = '[Post] Load Posts';
    loadPosts(): Action {        
        return {
            type: PostActions.LOAD_POSTS
        };
    }

Reducers

Immutable function that returns new object containing changed current state returned

export default function (state = initialState, action: Action): PostListState {
    switch (action.type) {
        case PostActions.LOAD_POST_SUCCESS: {            
            return action.payload;
        }
    }
}

Effects

Since state actions are asynchronous - it is better to take advantage of using effects:

    @Effect() loadPosts$ = this.update$
        .ofType(PostActions.LOAD_POSTS)
        .switchMap(() => {            
            return this.svc.getAllSections();
        })
        .map(posts => this.postActions.loadPostsSuccess(posts));

Refactoring our components

Now we can replace our logic inside components:
Instead of:

   this.loadHtml.getPost(params['id']).subscribe(post => {
        this.post = post;
      })

We can now write:

  this.store.dispatch(this.postActions.getPOST(this.name));
  ...
  ...
   store.select('post').subscribe((post:Post) => {
     this.post = post;   
  })

Much more accurate, is it?