Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
img
README.md
component.md
css.md
domain.md
infra.md
store.md
use-case.md

README.md

データの流れ

概略図

概略図

アプリの初期化フロー

以下は大まかなAppの初期化から表示の更新におけるフローです。

  1. Initialize domain(ドメインの初期化、Repositoryへの保存、データベースの初期化)
  2. AppContainer(Rootとなるコンポーネント) Mount
  3. 初期表示
  4. Routing(Routerコンポーネントでのルーティング)
    1. Update State
    2. Update View

これ以降は、use-caseを使い、domainstoreを更新する。 AppContainerはstoreの変更を監視しているため、stateが変更される度にViewを更新するのが基本的な表示の更新フローです。

更新のパターン

永続化するパターン

View -> UseCase -> Domain -> Repository -> State -> View -> ...

Stateを直接更新するパターン

View -> UseCase -> State -> View -> ...

Stateのみに存在する情報を更新したいときに、dispatchによる更新を行う。

各クラスの概要

View(Component)

ユーザーアクションやポーリングなどによりUseCaseを生成し実行する。
UseCase実行時に必要なデータを渡す。

Component内にも役割の階層があるため、詳細はComponentを参照。

UseCase

受け取ったデータを用いて、entityの生成、変更を行い、結果をRepositoryに保存する。
もしくは、受け取ったデータを必要に応じて加工し、Stateへ向けたイベントを発する。

Domain

生成されたり、変更される対象。
扱われるデータのひとつなので、Domainが他クラスにデータを渡すことはない。

Repository

永続化周りの処理を担当。
データの保存が行われた際に、Stateへ向けたイベントを発する。

State

生成されたり、変更される対象。
Viewを意識したデータを持ち、UseCaseのイベントの処理を行う。

Store

UseCaseとRepositoryのイベントを監視し、Stateの生成、変更を行う。
Stateの更新がある場合は、Viewに向けたイベントを発する。

実装フロー例

ボタンを追加したい

※ この順で実装すべきというものではなく、あくまで参考です。

Component の用意

  • component/project下にHogeButton.jsを追加する。
  • component/container下から、HogeButtonを利用したいcontainerを選び、HogeButton利用する。

詳細は ComponentのREADME を参照してください。

UseCase の追加や利用

すでにHogeButtonを利用した際のUseCaseがある場合は、container内でHogeButtonのハンドラを定義し、HogeButtonへ渡す。 ※ project下ではUseCaseに依存させないため、containerでハンドラを定義する。

UseCaseがない場合は新規に作成し、それを利用する。 (詳細は UseCase の README を参照してください。)

Domain の関数/プロパティの追加や変更

既存の関数で要件が満たせない場合は、関数の追加や変更を行う。
また、新規プロパティが必要な場合は追加を行う。 (詳細は Domain の README を参照してください。)

State の変更

Domainの変更を受けてStateのプロパティの変更、getter関数を修正したりする。 (詳細は State の README を参照してください。)

Component の変更

Stateの変更により、表示内容に変更がある場合は、propsの追加や処理の変更を行う。