もし適用するならの話になります。（あまり適用されている案件は見たことないですが。）
ビューモデル
エンティティを表示のために変換したものです。SPAの中心にはこれが属します。
ユースケース
ビューモデルをコントロールしながら表示に必要な処理を行います。
インフラ層
フロントエンド では、Reactのコンポーネント（Webブラウザ）や、ローカルストレージなどが該当します。
実装例
- ページコンポーネントにUseCaseを包含する。
- DIのためにInversifyJSを利用する。
application
service
APIに連携するための処理などを記述します。
model
アプリケーションで使いやすい形のモデル
domain
Repository
ローカルストレージとかの抽象クラスを定義する。
Entitiy
APIでくるエンティティ
interface
クリーンアーキテクチャの外側とのインターフェースを記述する。
adapters
外側へのキー。(APIのホストや、URL、ローカルストレージのキーなど）
serviceImplements
サービスの実体を定義する。実際に、adapterを使って外側へ通信する。
repositoryImplements
レポジトリの実体を定義する。実際に、adapterを使って外側へ通信する。
Redux側
基本的な考え方
- 階層が増えると相対パスを使ったimportが辛くなる。
- ファイルをフラットに置きすぎると管理が辛い。
- 1ファイルに統合すると保守が辛い。
Redux-way
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
src/ ├ components/ | ├ 機能1.js | └ 機能2.js ├ containers/ | ├ 機能1.js | └ 機能2.js ├ reducers/ | ├ 機能1.js | └ 機能2.js ├ actions/ | ├ 機能1.js | └ 機能2.js └ types/ ├ 機能1.js └ 機能2.js |
デメリット
- 非常に普通のディレクトリ構成だが、閲覧性や、関連性が理解しづらい。（過剰な分割、過剰な分散）
- reducersとaction creators、action typesは密結合になっているのでディレクトリは同じにした方が良い。
Ducksパターン
actionType、action-creator、reducerが散らばらないようにするデザインパターン。
|
1 2 3 4 5 6 7 8 9 |
├ components/ | ├ 機能1.js | └ 機能2.js ├ containers/ | ├ 機能1.js | └ 機能2.js ├ modules | ├機能1.ts(この中にactionType、action-creator、reducerをまとめて書く。) | └機能2.ts |
ファイル数が減ってスッキリしますが、これだと1ファイルが肥大化しすぎてしまいます。
メリット
1ファイルが少ない小規模アプリならマッチする。
Re-ducks（moduleを再分割）パターン
Ducsパターンを改良してできました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
├ components/ | ├ 機能1.js | └ 機能2.js ├ containers/ | ├ 機能1.js | └ 機能2.js | duck | ├機能1 ├ index.ts ├ types.ts ├ actions.ts ├ reducers.ts ├ operations.ts └ selectors.ts ├機能2 ├ index.ts ├ types.ts ├ actions.ts ├ reducers.ts ├ operations.ts └ selectors.ts |
operations
actions.tsの前に実行したい「何らかの複雑な処理」を書くための場所(外部APIから値を取得するなど、redux-thunkなどのミドルウェアはここで使う。）
このファイルがあるkとおでactions.tsやreducers.tsがシンプルになる。
selectors
stateから必要な値を算出する関数のこと。stateから計算して取得する場合は必ずselecorsを経由して算出する。処理をメモ化したい場合は、reselectなどのライブラリを使ったりします。
Reducerの分割単位
レンダリングツリーごとの分割
画面ごとに分割をすること。
|
1 2 3 4 |
reducers ├── newReducer.js ├── editReducer.js └── showReducer.js |
ドメインデータごとの分割
商売、ログインなどの業務ごとに分割すること。
|
1 2 3 |
reducers ├── shoppingReducer.js ├── loginReducer.js |
AppState
アプリケーション全体のstate(ログイン状態や、ローディング状態など）
UIState
例えば、モーダルを表示するかどうかなどのstateです。
この記事へのコメントはありません。