ディレクトリ構造

$ tree -d

.
└── src
    ├── app
    │   ├── auth
    │   │   ├── actions
    │   │   ├── components
    │   │   │   └── __snapshots__
    │   │   ├── containers
    │   │   │   └── __snapshots__
    │   │   ├── effects
    │   │   ├── models
    │   │   ├── reducers
    │   │   │   └── __snapshots__
    │   │   └── services
    │   ├── books
    │   │   ├── actions
    │   │   ├── components
    │   │   ├── containers
    │   │   │   └── __snapshots__
    │   │   ├── effects
    │   │   ├── guards
    │   │   ├── models
    │   │   └── reducers
    │   │       └── __snapshots__
    │   ├── core
    │   │   ├── actions
    │   │   ├── components
    │   │   ├── containers
    │   │   ├── effects
    │   │   ├── reducers
    │   │   └── services
    │   ├── material
    │   ├── reducers
    │   └── shared
    │       └── pipes
    ├── assets
    └── environments

36 directories

コンポーネント

containers

Storeの操作を担う。
必要な値をStoreから取得し、componentsに実装した子コンポーネントに値を渡す。
また、子コンポーネントからemitされた場合、Storeにdispatchする。
いわゆる、ページコンポーネントって言うやつ。

components

componentsにはStoreに値を保存したり、取得したりする処理は実装しない。
@Inputを使って親コンポーネントから値を受け取り、それを表示する。
ユーザーの操作は@Outputを使ってcontainersにemitする。

モデル

モデルは、modelsフォルダにinterfaceを使って実装する。
テストで使うために、モックもここで定義している。

サービス

HttpClient使う処理はやっぱりここに書くよね。localStorageとかも。
あとサービスはコンポーネントからは呼び出してなかった。GUARDからはいくつか呼び出しているところはあった。

ガード

booksのガードはguardsに実装されてるけど、authのガードはservicesに実装されている。
何でですかね？authのガードはだいたいExternal API叩くから？

ACTION

※ 何をもって分けているのかまだ読み解けてないのです。テストコード読んだら追記します。

xxxxx.actions.ts

コンポーネント、EFFECTS、ガードとかから呼び出されてるっぽい。

xxxxxs-api.actions.ts

EFFECTSから呼び出されるACTIONを定義する。
コンポーネントからは呼び出されない。

collection-api.actions.ts

EFFECTSから呼び出されるACTIONを定義する。
コンポーネントからは呼び出されない。

xxxxx-page.actions.ts

containersに実装されているxxxxx-page.component.tsに対応している。

EFFECTS

※ EFFECTSもテストコード読んでいるところだよ。まぁでもぱっとみ、collectionのほうはCRUDの操作してるっぽい。

xxxxx.effects.ts

collection.effects.ts

REDUCER

※ REDUCERも(ry

xxxxxs.reducer.ts

collection.reducer.ts

search.reducer.ts