ngrx: Side Effects

Before we begin…

Webpack 3 released

• Scope hoisting
• "Magic comments"

Angular 4.2 released

• angular.io refresh

Angular Material beta 7 released

• New components: md-expansion-panel and md-accordion (documentation coming soon)
• New typography extension to the theming API
• Better support for @angular/platform-server (universal)

Node.js 8 / NPM 5

• More support for ES6 / ES7
• NPM performance improvements

Side Effects

…
import { Actions, Effect } from '@ngrx/effects';

@Injectable()
export class AuthEffects {
  constructor(private http: Http, private actions$: Actions) { }

  @Effect() login$ = this.actions$
    // Listen for the 'LOGIN' action
    .ofType('LOGIN')
    // Map the payload into JSON to use as the request body
    .map(action => JSON.stringify(action.payload))
    .switchMap(payload => this.http.post('/auth', payload)
      // If successful, dispatch success action with result
      .map(res => ({ type: 'LOGIN_SUCCESS', payload: res.json() }))
      // If request fails, dispatch failed action
      .catch(() => Observable.of({ type: 'LOGIN_FAILED' }))
    );
}
          

import { EffectsModule } from '@ngrx/effects';
import { AuthEffects } from './effects/auth';

@NgModule({
  imports: [
    EffectsModule.run(AuthEffects)
  ]
})
export class AppModule { }
          

Let's look at some examples with Firebase

Form state in the store