Kathy H. hollygood

Use 'unsubscribe':

export class ExampleComponent implements OnInit, OnDestroy {
  exampleSubOne: Subscription;
  exampleSubTwo: Subscription;

  constructor(private exampleService: ExampleService) {}

  ngOnInit() {

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

	//========================================= dynamic-fields.service.ts

	import { Injectable } from '@angular/core';
	import { FormControl, Validators } from '@angular/forms';

	/**
	* @description Dynamic fields service is used to generate reactive form group fields with Validators
	*/
	@Injectable({
	providedIn: 'root'

	/**
	* @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))

	// 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

	// 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 😉 */
	}

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

	@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'])
	})
	);

	// 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> =

	// 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