【NgRx入門】カウンターアプリを作成方法をわかりやすく解説します！

counter-app                       //アプリ名
├─src                           
│   ├─app                       
│   │   ├─app.module.ts           //★Appモジュール
│   │   ├─app.component.ts        //★Appコンポーネント
│   │   ├─app.state.ts            //★Store
│   │   ├─counter.actions.ts      //★Action
│   │   ├─counter.reducer.ts      //★Reducer
│   │   ├─counter.selector.ts     //★Selector
│   │   └─counter.effects.ts      //★Effect
│   ├─main.ts
│   ├─index.html
│   └─styles.css
├─angular.json
├─package-lock.json
├─package.json
├─tsconfig.app.json
├─tsconfig.json
└─node_modules

npm install @ngrx/store @ngrx/effects

import { createAction, props } from '@ngrx/store';

export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');
export const reset = createAction('[Counter] Reset');

// 1.props関数を用いる場合
 export const setCount = createAction('[Counter] Set Count', props<{ count: number }>());

// 2.props関数を用いない場合
// export const setCount = createAction('[Counter] Set Count', (payload: { count: number }) => ({ payload }));
// export const setCount = createAction('[Counter] Set Count', (hoge: { count: number }) => ({ payload: hoge })); の省略記法

// 3.props関数を用いない場合(payloadのプロパティが1つの場合は以下の記述方法でも可能)
// export const setCount = createAction('[Counter] Set Count', (count: number) => ({ count }));
// export const setCount = createAction('[Counter] Set Count', (hoge: number) => ({ count: hoge })); の省略記法

import { createAction, props } from '@ngrx/store';

export const increment = createAction('[Counter] Increment');

this.store.dispatch(increment());

{
  type: '[Counter] Set Count'
}

export const setCount = createAction('[Counter] Set Count', props<{ count: number }>());

this.store.dispatch(setCount({ count: 10 }));

{
  type: '[Counter] Set Count',
  count: 10
}

export const setCount = createAction('[Counter] Set Count', (payload: { count: number }) => ({ payload }));
// 省略記法を用いない場合は、以下のプログラムでも可能(あまりみかけない)
export const setCount = createAction('[Counter] Set Count', (hoge: { count: number }) => ({ payload: hoge }));

this.store.dispatch(setCount({ count: 10 }));

{
  type: '[Counter] Set Count',
  payload: { count: 10 }
}

export const setCount = createAction('[Counter] Set Count', (count: number) => ({ count }));
// 省略記法を用いない場合は、以下のプログラムでも可能(あまりみかけない)
export const setCount = createAction('[Counter] Set Count', (hoge: number) => ({ count: hoge }));

this.store.dispatch(setCount(10));

{
  type: '[Counter] Set Count',
  count: 10
}

export interface CounterState {
  count: number;
};
export const initialState: CounterState = {
  count: 0
};
export interface AppState {
  counter: CounterState;
};

export interface CounterState {
  count: number;
};

export const initialState: CounterState = {
  count: 0
};

export interface AppState {
  counter: CounterState;
};

import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset, setCount } from './counter.actions';
// 以下のように記述するとActionをまとめてインポートできます。
// import * as CounterActions from './counter.actions';
// この場合は、CounterActions.Action()メソッドでアクセスできます。

import { initialState } from './app.state';

export const counterReducer = createReducer(
  initialState,
  on(increment, (state) => ({ ...state, count: state.count + 1 })),
  on(decrement, (state) => ({ ...state, count: state.count - 1 })),
  on(reset, (state) => ({ ...state, count: 0 })),

  // 1.props関数を用いる場合
  on(setCount, (state, action) => ({ ...state, count: action.count }))
  // on(setCount, (state, { count }) => ({ ...state, count }))でも可能
  // 上記は on(setCount, (state, { count: hoge }) => ({ ...state, count: hoge })) の省略記法

  // 2.props関数を用いない場合
  // on(setCount, (state, action) => ({ ...state, count: action.payload.count }))
  // on(setCount, (state, { payload: { count } }) => ({ ...state, count }))でも可能
  // 上記は on(setCount, (state, { payload: { count: hoge } }) => ({ ...state, count: hoge })) の省略記法

  // 3.props関数を用いない場合(payloadのプロパティが1つの場合は以下の記述方法でも可能)
  // on(setCount, (state, action) => ({ ...state, count: action.count }))
  // on(setCount, (state, { count }) => ({ ...state, count }))でも可能
  // 上記は on(setCount, (state, { count: hoge }) => ({ ...state, count: hoge })) の省略記法
);

import { createReducer, on } from '@ngrx/store';

import { increment, decrement, reset, setCount } from './counter.actions';

import { initialState } from './app.state';

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { tap } from 'rxjs/operators';
import { increment, decrement } from './counter.actions';
// 以下のように記述するとActionをまとめてインポートできます。
// import * as CounterActions from './counter.actions';
// この場合は、CounterActions.Action()メソッドでアクセスできます。

@Injectable()
export class CounterEffects {

  constructor(private actions$: Actions) { }

  increment$ = createEffect(() =>
    this.actions$.pipe(
      ofType(increment),
      tap(() => console.log('Increment Action Dispatched'))
    ),
    { dispatch: false }
  );

  decrement$ = createEffect(() =>
    this.actions$.pipe(
      ofType(decrement),
      tap(() => console.log('Decrement Action Dispatched'))
    ),
    { dispatch: false }
  );
}

constructor(private actions$: Actions) { }

increment$ = createEffect(() =>
  this.actions$.pipe(
    ofType(increment),
    tap(() => console.log('Increment Action Dispatched'))
  ),
  { dispatch: false }
);

// ★createFeatureSelectorを使用しない場合
import { createSelector } from '@ngrx/store';
import { AppState } from './app.state';
import { CounterState } from './app.state';

export const selectCounterState = (state: AppState) => state.counter;
// 上記のコードは以下のように変えても動作可能
// export const selectCounterState = (state: CounterState) => state;

export const selectCount = createSelector(
  selectCounterState,
  (state: CounterState) => state.count
);

// ★createFeatureSelectorを使用する場合
// import { createFeatureSelector, createSelector } from '@ngrx/store';
// import { CounterState } from './app.state';

// export const selectCounterState = createFeatureSelector<CounterState>('counterStateKey');

// export const selectCount = createSelector(
//   selectCounterState,
//   (state: CounterState) => state.count
// );

export const selectCounterState = (state: AppState) => state.counter;

export const selectCount = createSelector(
  selectCounterState,
  (state: CounterState) => state.count
);

// app.component.ts

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { CounterState, AppState } from './app.state';
import { increment, decrement, reset, setCount } from './counter.actions';
// 以下のように記述するとアクションをまとめてインポートできます。
// import * as CounterActions from './counter.actions';
// この場合は、CounterActions.Actionメソッドでアクセスできます。

import { selectCount } from './counter.selector';
// 以下のように記述するとセレクターをまとめてインポートできます。
// import * as CountSelectors from './counter.selector';
// この場合は、CountSelectors.Selectorでアクセスできます。

@Component({
  selector: 'app-root',
  template: `
    <h1>Counter: {{ count$ | async }}</h1>
    <button (click)="increment()">Increment</button>
    <button (click)="decrement()">Decrement</button>
    <button (click)="reset()">Reset</button>
    <button (click)="setCount(10)">Set Count to 10</button>
  `
})
export class AppComponent {
  count$: Observable<number>;

  constructor(private store: Store<AppState>) {
    this.count$ = this.store.pipe(select(selectCount));
  }

  // 以下のプログラムでも可能(なお、Selectorを使う場合はStore<AppState>ではなくStore<CounterState>でも可能)
  // constructor(private store: Store<AppState>) { }
  // count$ = this.store.pipe(select(selectCount));

  // Selectorを用いない場合は、以下のプログラムでも可能
  // constructor(private store: Store<AppState>) {
  //   this.count$ = this.store.pipe(select(state => state.counter.count));
  // }

  increment() {
    this.store.dispatch(increment());
  }
  decrement() {
    this.store.dispatch(decrement());
  }
  reset() {
    this.store.dispatch(reset());
  }
  setCount(count: number) {
    // 1.propsを用いる場合
    this.store.dispatch(setCount({ count }));
    // this.store.dispatch(setCount({ count: count }));の省略記法

    // 2.propsを用いない場合
    // this.store.dispatch(setCount({ count }));
    // this.store.dispatch(setCount({ count: count }));の省略記法

    // 3.propsを用いない場合(プロパティが1つの場合は以下の記述方法でも可能)
    // this.store.dispatch(setCount( count ));
  }
}

count$: Observable<number>;

constructor(private store: Store<AppState>) {
  this.count$ = this.store.pipe(select(selectCount));
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { counterReducer } from './counter.reducer';
import { CounterEffects } from './counter.effects';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    StoreModule.forRoot({ 'counter': counterReducer }),
    EffectsModule.forRoot([CounterEffects])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }