【Angular】NgRxの概念を世界一わかりやすく解説！【NGRX】

ng new　ngrx-user
cd ngrx-user

ng generate component user

touch src/app/user/user.action.ts

touch src/app/user/user.reducer.ts

touch src/app/user/user.selector.ts

ng generate module --flat user/user

npm install @ngrx/store --save

npm install @ngrx/store-devtools --save

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

createAction(`[呼び出されるコンポーネント名]関数名`, props等のオプション)

/* ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
ACTION
  各アクションがどこで呼ばれて、どのような処理をするのかを記述
  引数が必要であれば、ここで定義する。

  基本的にデバッグツールのログ確認用途で役に立ちます。

  createAction(`[呼び出されるコンポーネント名]関数名`, props等のオプション)
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿　*/

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

export const countUpAction = createAction(`[User Component] countUpAction`);
export const countDownAction = createAction(`[User Component] countDownAction`);
export const changeNameAction = createAction(
  `[User Component] changeNameAction`
);

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

createReducer(
  initialState,
  on(アクション名, (state) => ({
    ...state,
    STATEの更新処理,
  }))

import { createReducer, on } from '@ngrx/store';
import { __asyncGenerator } from 'tslib';
import {
  countUpAction,
  countDownAction,
  changeNameAction,
} from './user.action';

// デバッグツールでの表示名
export const featureName = 'user';

// 型の定義
export interface MyUserState {
  name: string;
  age: number;
}

/**初期値の設定　※これをSTOREで状態管理する */
export const initialState: MyUserState = {
  name: 'サメハック',
  age: 100,
};

/**実際にSTOREのSTATEを操作する処理

createReducer(
  initialState,
  on(アクション名, (state) => ({
    ...state,
    STATEの更新処理,
  })),
 */
export const userReducer = createReducer(
  initialState,
  // countUpActionが呼び出されたら、STOREのstateを受け取る
  // 受け取ったstateを展開し、ageプロパティの値を＋１する
  on(countUpAction, (state) => ({
    ...state,
    age: state.age + 1,
  })),
  on(countDownAction, (state) => ({
    ...state,
    age: state.age - 1,
  })),
  on(changeNameAction, (state) => ({
    ...state,
    name: 'いぬハック',
  }))
);

/* ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
SELECTOR
  ・STOREのデータを取得（連携）するための処理
　  　イメージ的には、getter()のようなもの。
  ・STOREデータ　→　コンポーネント
  　の単方向データバインディングが行われる

createSelector(
  State,(全てのstate情報) => 欲しいデータを取り出す)
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿　*/
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { MyUserState, featureName } from './user.reducer';

export const selectUserState = createFeatureSelector(featureName);

/**ユーザの全情報を取得するセレクター */
export const selectUserAllInfo = createSelector(
  selectUserState,
  (state) => state
);

/**ユーザの年齢情報を取得するセレクター */
export const selectUserAge = createSelector(
  selectUserState,
  (state) => state.age
);

<p>user works!</p>

<h2>ユーザ情報をすべて取得</h2>
<div *ngIf="user$ | async as user">
  name: {{ user.name }}
  <button (click)="changeName()">名前を変更</button>
  <br />
  age: {{ user.age }}
  <button (click)="countUp()">＋</button>
  <button (click)="countDown()">ー</button>
</div>

<h2>ユーザの年齢のみ取得</h2>

<div *ngIf="userAge$ | async as userAge">
  age: {{ userAge }}
  <button (click)="countUp()">＋</button>
  <button (click)="countDown()">ー</button>
</div>

user$ | async as user

変数名$ | async as 変数別名

変数名　= this.store.select(SELECTORで作成した変数);

this.store.dispatch(アクション名());

import { Component, OnInit } from '@angular/core';
import { select, Store } from '@ngrx/store';
import { MyUserState } from './user.reducer';
import { selectUserAllInfo, selectUserAge } from './user.selector';
import {
  changeNameAction,
  countUpAction,
  countDownAction,
} from './user.action';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
})
export class UserComponent implements OnInit {

  /**ユーザの全情報を取得 */
  user$ = this.store.select(selectUserAllInfo);
  /**ユーザの年齢を取得 */
  userAge$ = this.store.select(selectUserAge);

  constructor(private store: Store) {}


  // STOREデータの更新
  countUp() {
    this.store.dispatch(countUpAction());
  }

  // STOREデータの更新
  countDown() {
    this.store.dispatch(countDownAction());
  }

  // STOREデータの更新
  changeName() {
    this.store.dispatch(changeNameAction());
  }

  ngOnInit(): void {}
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { UserModule } from './user/user.module';

@NgModule({
  declarations: [AppComponent, UserComponent],
  // ユーザモジュールのインポート
  imports: [BrowserModule, AppRoutingModule, UserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

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

StoreModule.forRoot({ [featureName]: リデューサー名 }),

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StoreModule } from '@ngrx/store';
import { featureName, userReducer } from './user.reducer';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    // Storeを使用できるようにする設定
    StoreModule.forRoot({ [featureName]: userReducer }),
    // デバッグツールのインポート
    StoreDevtoolsModule.instrument(),
  ],
})
export class UserModule {}

<app-user></app-user>

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd/related?hl=ja

https://github.com/same-hack/NGRX-user.git

git clone https://github.com/same-hack/NgRx-user.git
npm install 
npm start