NgRxを使用する。

install

ng add @ngrx/store@latest

npm install -D @ngrx/schematics
ng config cli.defaultCollection @ngrx/schematics

app.module.ts に上書きが入る。

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

@NgModule({
  ...
  imports: [
    ...
    StoreModule.forRoot({}, {})
  ],
  ...
})
export class AppModule { }

概要

NgRxのライフサイクルは以下の通り

store にある物を Action で reducer で処理し selector で取得するといった感じ。間にRxJsが入っているのでストリームとして受け取ることができる優れもの。

まずはこのブログで使っているBreadcrumbServiceをNgRX化する。

state を定義する

import { KaraageBreadcrumbs } from 'src/@types/karaage-breadcrumb';

export interface BreadcrumbsState {
  breadcrumbs: KaraageBreadcrumbs;
}

Actionを定義する

import { createAction, props } from '@ngrx/store';
import { BreadcrumbsState } from './breadcrumb.state'

export const setBreadcrumbs = createAction(
  '[breadcrumbs] set',
  props<BreadcrumbsState>()
);
export const resetBreadcrumbs = createAction('[breadcrumbs] reset');

Reducerを定義する

import { createReducer, on } from '@ngrx/store';
import { setBreadcrumbs, resetBreadcrumbs } from './breadcrumb.actions';
import { BreadcrumbsState } from './breadcrumb.state'

export const breadcrumbsFeatureKey = 'Breadcrumbs';
export const initialBreadcrumbs:BreadcrumbsState = {
  breadcrumbs:[]
};

const _breadcrumbsReducer = createReducer(
  initialBreadcrumbs,
  on(setBreadcrumbs, (state,props) => (
    {
      breadcrumbs:[...props.breadcrumbs]
    }
  )),
  on(resetBreadcrumbs, (state) => (
    {
      breadcrumbs:[]
    }
  )),
);

export function breadcrumbsReducer(state:any, action:any) {
  return _breadcrumbsReducer(state, action);
}

selector を定義する

import { createSelector, createFeatureSelector } from "@ngrx/store";
import { BreadcrumbsState } from "./breadcrumb.state";
import { breadcrumbsFeatureKey } from './breadcrumb.reducer';

const getState = createFeatureSelector<BreadcrumbsState>(breadcrumbsFeatureKey);

export const selectBreadcrumbs = createSelector(
  getState,
  (state) => state
);

module でまとめる

割愛
ソースコードを見て

Fixme

2021-05-23
酔っぱらいコーディングで動いたのでとりあえずデプロイしてるのでしっかり書く。

参考

https://ngrx.io/guide/store/walkthrough
https://dev.classmethod.jp/articles/beginner-ngrx-angular-app/
https://github.com/nishimura-yuji/ngrx8-tutorial