Angular Projectsの8章のNgRxの不明点をまとめた

8. Building an Enterprise Portal Using Nx Monorepo Tools and NgRx
8章のngrxを写経して不明点をまとめた

設定
・assetsの置き場
project.jsonのassetsに記載すればlocalhost経由でアクセスできるようになる

        "assets": [
          {
            "glob": "**/*",
            "input": "apps/tour/public"
          },
          "apps/tour/src/assets"

Angular系
・componentの読み込み
loadComponentでComponentを読み込む

export const appRoutes: Route[] = [
    {
        path: 'admin',
        loadComponent: () => import('@packt/admin').then(m => m.AdminComponent)
    },

・navigation設定

npx nx g @angular/material:navigation  --project=visitor --skip-import --verbose

・import
importで全部まとめて別名をつける

import * as PoiActions from './lib/poi.actions';
import * as PoiSelectors from './lib/poi.selectors';
import * as PoiFeature from './lib/poi.reducer';

・ライブラリプロジェクトを外から参照する方法
index.tsにimportしたり、exportでクラスを作ったりする
ライブラリを以下の方法でimportする

import { providePoiAppStore } from '@packt/poi';

NgRx
・ngrxの追加
stand alone modeのときは以下

nx generate @nx/angular:ngrx app --root --no--interactive --parent=apps/tour/src/app/app.config.ts

・各種ファイルの自動生成

nx generate effect poi --project=poi --flat

・entity
EntityStateはidsの型になってる
EntityAdapterはコレクションの更新等
https://www.isoroot.jp/blog/2254/

・reduxのdebug
chromeの拡張機能のRedux DevToolsを入れる
コード上に以下をmain.tsのproviderに書く

provideStoreDevtools({ maxAge: 25, logOnly: false })

・reduxの初期設定
libraryの中のindex.tsで定義する
それをmain.tsで読み込むことで初期化される
main.tsで読み込まないとreduxが動かないので注意

export const appConfig: ApplicationConfig = {
  providers: [
    providePoiAppStore,
  ],
};

・reduxの各種設定
featureの場合はprovideStoreのキーとselectのキーを合わせる必要がある

//初期化
export const providePoiAppStore = [
    provideStore({ [POI_FEATURE_KEY]: PoiReducer }),
    provideEffects([PoiEffects]),
];
//selector
export const selectPoiState = createFeatureSelector&lt;PoiState&gt;(POI_FEATURE_KEY);
export const selectAllPoi = createSelector(selectPoiState, (state: PoiState) =&gt; {
    console.log('State in selectAllPoi:', state);
    return selectAll(state)
}
//reducer
export const PoiReducer = createReducer(
  initialState,

//effect
export class PoiEffects {
  init$: Observable&lt;Action&gt;

  constructor(private actions$: Actions, private poiService: PoiService) {
    this.init$ = createEffect(() =>


//view
export class PoiListComponent implements OnInit {
  pois$: Observable<PoiEntity[]> | undefined;

  constructor(private store: Store) {
    this.pois$ = this.store.select(PoiSelectors.selectAllPoi);

・undefinedを許容するObservablie

  poi$: Observable<PoiEntity | undefined>;

その他
・async pipe
CommonModuleをimportする

Angular Projects

Pocket

関連記事: