10分でできる！ @ngrx/storeチュートリアル with @ngrx/schematics

$ npm i -g @angular/cli

$ npm i -g @ngrx/schematics

$ ng new ngrx-tutorial

$ cd ngrx-tutorial
$ ng serve -o

$ ng g module counter --module=app.module.ts

$ ng g component counter --module=counter/counter.module.ts --export

<app-counter></app-counter>

$ ng serve -o

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css']
})
export class CounterComponent implements OnInit {
  count = 0;

  constructor() { }

  ngOnInit() {
  }

  increment() {
    this.count = this.count + 1;
  }

  decrement() {
    this.count = this.count - 1;
  }

}

<button (click)="increment()">+</button>
<button (click)="decrement()">-</button>
<div>Count: {{count}}</div>

$ ng serve -o

$ npm i -D @ngrx/schematics
$ npm i -s @ngrx/store
$ npm i -s @ngrx/store-devtools

$ ng config cli.defaultCollection @ngrx/schematics

  "defaultProject": "ngrx-tutorial",
  "cli": {
    "defaultCollection": "@ngrx/schematics"
  }

$ ng g store state --statePath state --root --module app.module.ts

- import { environment } from '../../environments/environment';
+ import { environment } from '../environments/environment';

$ ng serve -o

$ ng g store counter/counter --statePath state --module counter.module.ts

$ ng g reducer counter/state/counter --reducers index.ts

$ ng g action counter/state/counter --flat

import { Action } from '@ngrx/store';

export enum CounterActionTypes {
// Actionごとに型を定義します。
-  LoadCounters = '[Counter] Load Counters'
+  CountIncrement = '[Counter] Increment Count',
+  CountDecrement = '[Counter] Decrement Count'
}

// Actionごとに@ngrx.storeのActionをインプリしたクラスを作成します。
// 複雑な処理をする場合はコンストラクタ引数をとりますが、
// 本チュートリアルでは簡単のため引数なしにしています。
- export class Counter implements Action {
-   readonly type = CounterActionTypes.LoadCounters;
- }
+ export class CountIncrement implements Action {
+   readonly type = CounterActionTypes.CountIncrement;
+   public constructor() {}
+ }
+ 
+ export class CountDecrement implements Action {
+   readonly type = CounterActionTypes.CountDecrement;
+   public constructor() {}
+ }


// 上記で定義したActionクラスを集約した型を定義します。Reducerで使うためです。
- export type CounterActions = LoadCounters;
+ export type CounterActions = CountIncrement | CountDecrement;

import { Action } from '@ngrx/store';
+ import { CounterActionTypes } from './counter.actions';


export interface State {
// カウンター処理に置けるStateを定義します。
+   count: number;
}

export const initialState: State = {
// カウンター処理に置けるStateの初期値を定義します。
+   count: 0
};


export function reducer(state = initialState, action: Action): State {
  switch (action.type) {
// 引数として受け取ったActionの型に応じて処理を振り分けます
// ここではカウンター処理に関連するアクションのみ拾って、他はStateをそのまま返します。
+     case CounterActionTypes.CountIncrement:
// Stateを変更する場合は、Stateがイミュータブルになるように元のStateには変更を加えず
// Object.assingで新規オブジェクトを作るようにします。
+       return Object.assign({}, { ...state, count : state.count + 1 });
+     case CounterActionTypes.CountDecrement:
+       return Object.assign({}, { ...state, count : state.count - 1 });
    default:
      return state;
  }
}

// コンポーネントでStateのCountを取得するための関数を定義します。
// Storeの方にも定義しますが、ここでは本ファイルで定義している
// Stateのプロパティに関連する処理のみ定義します。
+ export const getCount = (state: State) => state.count;

import {
  ActionReducerMap,
  createFeatureSelector,
  createSelector,
  MetaReducer
} from '@ngrx/store';
// ng gコマンド生成時は相対パスがずれている可能性があるため
// その場合は修正する
- import { environment } from '../../environments/environment';
+ import { environment } from '../../../environments/environment';
import * as fromCounter from './counter.reducer';

export interface State {

  counter: fromCounter.State;
}

export const reducers: ActionReducerMap<State> = {

  counter: fromCounter.reducer,
};


export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];

// コンポーネントでStateのプロパティを取得するための関数を定義します。
// 複数コンポーネントで使う度に定義するのは冗長なのでココで共通的に定義します。
+ export const getCounterFeatureState = createFeatureSelector<State>('counter');
+ export const getCounter = createSelector(getCounterFeatureState, s => s.counter);
+ export const getCount = createSelector(getCounter, fromCounter.getCount);

import { Component, OnInit } from '@angular/core';
+ import { Observable } from 'rxjs';
+ import { Store } from '@ngrx/store';

+ import * as CounterReducer from './state/counter.reducer';
+ import * as CounterActions from './state/counter.actions';
+ import { getCount } from './state';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css']
})
export class CounterComponent implements OnInit {
// Storeでの値変更を順次受け付けれるように型をObservableに変更します
-   count = 0;
+   count$: Observable<number>;

// Storeをインジェクションします
-   constructor() { }
+   constructor(private store: Store<CounterReducer.State>) {
// Storeからカウンタを取得します
+     this.count$ = store.select(getCount);
+  }

  ngOnInit() {
  }

  increment() {
// インクリメントの実処理はカウンタのReducerに任せるので
// ここではActionをdispatchするだけです。
-     this.count = this.count + 1;
+     this.store.dispatch(new CounterActions.CountIncrement());
  }

  decrement() {
-     this.count = this.count - 1;
+     this.store.dispatch(new CounterActions.CountDecrement());
  }

}

<button (click)="increment()">+</button>
<button (click)="decrement()">-</button>
<!-- 変数名と型が変わったのでHTMLも若干修正します -->
- <div>Count: {{count }}</div>
+ <div>Count: {{count$ | async }}</div>

$ ng serve -o

import {
  ActionReducer,
  ActionReducerMap,
  createFeatureSelector,
  createSelector,
  MetaReducer
} from '@ngrx/store';
import { environment } from '../../environments/environment';

export interface State {

}

export const reducers: ActionReducerMap<State> = {
  // ココにReducerが追加されていきます。
  // 今回のチュートリアルではルートのストアに１つもReducerを定義していないので空っぽです。
};


export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];

@NgModule({
  // ・・・
  imports: [
    // ・・・
    StoreModule.forRoot(reducers, { metaReducers }),
    !environment.production ? StoreDevtoolsModule.instrument() : []
    // ・・・
  ],
  // ・・・
})
export class AppModule { }

// ・・・
export const reducers: ActionReducerMap<State> = {
  // カウンタのReducerをマップに登録しています。
  counter: fromCounter.reducer,
};

export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];
// ・・・

// ・・・
import * as fromCounter from './state';
// ・・・
@NgModule({
  imports: [
    // ・・・
    // アプリ全体のストアにcounterという名前で登録します
    StoreModule.forFeature('counter', fromCounter.reducers, { metaReducers: fromCounter.metaReducers })
    // ・・・
  ],
  // ・・・
})
export class CounterModule { }