hollygood

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

hollygood

// example for slide button, which value is not boolean

// example.html
<div class="form-group m-form__group">
    <mat-slide-toggle
        formControlName="status"
        [color]="primary"
        (change)="changeStatus($event)"
    >
        {{ toggleStatusLabel }}

hollygood

Comprehensive Introduction to @ngrx/store

By: @BTroncone

Also check out my lesson @ngrx/store in 10 minutes on egghead.io!

Update: Non-middleware examples have been updated to ngrx/store v2. More coming soon!

Table of Contents

hollygood

// ADD: Mutating
let mutatingAdd = ['a', 'b', 'c', 'd', 'e']; 

// array.push() adds an item to the end of the array
// array.unshift() adds an item to the beginning of the array.
mutatingAdd.push('f'); // ['a', 'b', 'c', 'd', 'e', 'f']  
mutatingAdd.unshift('z'); // ['z', 'a', 'b', 'c', 'd', 'e'

// ADD: NON MUTATING
// concat

hollygood

// One input, one output
@Effect()
firstAction$: Observable<Action> = this.action$.pipe(
  ofType<firstAction>('FIRST_ACTION'),
  mapTo(new SecondAction())
);

// Two inputs, one output
@Effect()
public dashboardLoadRequired$: Observable<Action> = 

hollygood

@Effect({dispatch: false})
exampleFailure$: Observable<Action> = this.actions$.pipe(
  ofType(SOME_ACTIONS.CREATE_USER_FAILURE, SOME_ACTIONS.CREATE_POST_FAILURE),
  tap(action => {
    this.router.navigate(['/users'])
  })
);

hollygood

// blogger.component.ts
...
  template: `
      <h1>Posts by: {{ blogger }}</h1>
      <div>
          <posts [data]="posts"></posts>
      </div>
  `
...

hollygood

// before
function renderList(list, ordered, color, bgColor) {
    // set defaults for optional parameters
    if (typeof ordered === undefined) ordered = true
    if (typeof color === undefined) color = '#1e2a2d'
    if (typeof bgColor === undefined) color = 'transparent'

    /* code to render list would go here 😉 */
}

hollygood

// In Angular 6, if you set 'disabled' reactive form field like following,
// you will get a warning message: It looks like you're using the disabled attribute with a reactive form directive.
// If you set disabled to true when you set up this control in your component class, the disabled attribute will 
// actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

<input
    formControlName="userId"
    type="text"
    class="form-control m-input"
    required

hollygood

/**
* @function forkJoin multiple requests with ngrx selects
* we can't use forkJoin for ngrx selects because this method requires the Observables being 'complete'
* in case of ngrx store, all of their observables are usually based on a BehaviorSubject, and will never complete
* the only way we can do is using like this: forkJoin(user$.take(1), customCarList$.take(1)
*/
const result$ = forkJoin([
  this.store.select(selectOne).pipe(take(1)),
  this.store.select(selectTwo).pipe(take(1)),
  this.store.select(selectThree).pipe(take(1))