talamaska

import { Action, ActionReducer, Store } from '@ngrx/store';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operator/map';
import { Observer } from 'rxjs/Observer';

// TODO: How to initialize those variables?
const dispatcherMock: Observer<Action>,
    reducerMock: Observer<ActionReducer<any>>,
    stateMock: Observable<any>;

talamaska

/**
 * Converts an RGB color value to HSL. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 * Assumes r, g, and b are contained in the set [0, 255] and
 * returns h, s, and l in the set [0, 1].
 *
 * @param   Number  r       The red color value
 * @param   Number  g       The green color value
 * @param   Number  b       The blue color value
 * @return  Array           The HSL representation

talamaska

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


"@angular-devkit/build-optimizer@~0.0.35":
  version "0.0.35"
  resolved "https://registry.yarnpkg.com/@angular-devkit/build-optimizer/-/build-optimizer-0.0.35.tgz#3aadad1d7e9ffc7dcd106fda8a5670465936562c"
  dependencies:
    loader-utils "^1.1.0"
    source-map "^0.5.6"

talamaska

{
  "name": "admin",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "yarn": "yarn",
    "e2e:client": "ng e2e --app fw-app",
    "lint:client": "ng lint --app fw-app",
    "test:client": "ng test --app fw-app",
    "build:client": "ng build --app fw-app",

talamaska

// Nothing changed here, works as previously. 
@Effect() actionX$ = this.updates$
    .ofType('ACTION_X')
    .map(toPayload)
    .switchMap(payload => this.api.callApiX(payload)
        .map(data => ({type: 'ACTION_X_SUCCESS', payload: data}))
        .catch(err => Observable.of({type: 'ACTION_X_FAIL', payload: err}))
    );

talamaska

  @Effect()
  selectAndLoadStore$: Observable<Action> = this.actions$
    .ofType(storeActions.SELECT_AND_LOAD_STORE)
    .withLatestFrom(this.store.select(ngrx.storeState))
    .map(([action, storeState]) => [action.payload, storeState])
    .switchMap(([storeName, storeState]) => {
      const existsInStore = Boolean(storeState.urlNameMap[storeName]);
      return Observable.if(
        () => existsInStore,
        Observable.of(new storeActions.SetSelectedStore(storeName)),

talamaska

import { Store, Action } from '@ngrx/store';
import { Actions, Effect } from '@ngrx/effects';

import { ADD_LINE } from './lines.reducer';
import { INC_PAGE_COUNT } from './pages.reducer';
import { AppState } from './app.store';


@Injectable()
export class LineEffects {

talamaska

Making chained API Calls using @ngrx/Effects

Purpose

This recipe is useful for cooking up chained API calls as a result of a single action.

Description

In the below example, a single action called POST_REPO is dispatched and it's intention is to create a new repostiory on GitHub then update the README with new data after it is created.
For this to happen there are 4 API calls necessary to the GitHub API:

1. POST a new repostiry
2. GET the master branch of the new repository
3. GET the files on the master branch

talamaska

import {
  Injectable,
  ComponentFactoryResolver,
  ApplicationRef,
  Injector
} from '@angular/core';
import {
  ComponentType,
  Portal,
  ComponentPortal,

talamaska

this.isSuccessSub = this.isSuccess$.subscribe((isSuccess) => {
  if (isSuccess) {
    this.dialogRef.close();
  }
});