25
App Component
How should we use App Component ?
- アプリケーションの全体の設定や、各 Serviceの初期化処理などを行う
- 例）APIからの初期データの取得、WebSocketの接続処理など
- 初期化処理は基本的に Service に移譲し、シンプルに保つ
Component
Design
42
Module
- Module は 機能単位での Component の集合
- Service なども含めることができるが、アプリケーション用の Module は
Component 群のカプセル化と考えるのが良い
Module
Structure
Module is a set of Components
has
Module Components
50
State Management
State
Management
- State とは、移り変わるアプリケーションの状態を表す
- State Management とは アプリケーションのデータ管理方法
- Angularでは、主に Component と Service の連携方法
Component Component
State
Service
Slide 51
Slide 51 text
51
2種類の State Management
Component
Single Data Service
Data
Service
Global Store
Store
Data
Service
Data
Service
Component Component Component Component Component
State
Management
Slide 52
Slide 52 text
Single Data Service
Slide 53
Slide 53 text
53
Single Data Service
- 1つのデータタイプ (モデル) につき、1つの Serviceを作成し状態管理する
- Service はデータを Stream として提供し、
Component はそれらを subscribe する形で、リアルタイムにデータを受け取る
Data
Service
Component
Component
update
subscribe
State
Management
Slide 54
Slide 54 text
54
Single Data Service
@Injectable({
providedIn: 'root',
})
export class HeroDataService {
private _data$ = new BehaviorSubject([]);
getData(): Observable {
return this._data$.asObservable();
}
update(data: Hero[]): void {
this._data$.next(data);
}
}
@Component({
...
})
export class HeroListComponent implements OnInit {
private heroes$: Observable;
constructor(
private heroDataService: HeroDataService,
) {}
ngOnInit(): void {
this.heroes$ = this.heroDataService.getData();
// データの種類に対して
1つのDataServiceを使う
// this.villains$ = this.villainDataService.data$;
}
}
State
Management
Slide 55
Slide 55 text
55
Single Data Service
Data
Service
Component
Component
- 小さく始められる
- シンプルで仕様理解が簡単
Pros
- Serviceの数が増えた時に急激に複雑化
- どのデータがどの Service にあるのか分かりづらい
- 各 Service毎に仕様が異なる可能性がある
Cons
update
subscribe
State
Management
Slide 56
Slide 56 text
56
Single Data Service
- 小規模なアプリケーション (1-3人程度の開発者)
- 仕様が開発と同時に進むような、スピードの求められる開発
- ある程度の大規模なアプリケーションが予定される場合は、
後述の Global Storeを使用すべき
State
Management
When should we use Single Data Service ?
Slide 57
Slide 57 text
Global Store
Slide 58
Slide 58 text
58
Global Store
- 1つの Store が全てのデータを管理 (Databaseとなる)
- Component は Actionを使用して Store を更新
- Data (State) の更新処理には reducer という関数を使用
Store
reducer
dispatch
Action
subscribe
Component
Component
State
Management
Slide 59
Slide 59 text
59
Global Store
NGRX
Reactive State for Angular
State
Management
ngrx.io
Slide 60
Slide 60 text
60
Global Store
- 決まった形式での統一的な実装
- Storeの拡張性が高く、大規模な状
態管理に強い
Pros
- 小規模なアプリケーションに対してはやや複雑
- どの Action がどの状態を変更するか分かりづらい
Cons
State
Management
Store
reducer
subscribe
Component
Component
dispatch
Action
Slide 61
Slide 61 text
61
Global Store
- 大規模なアプリケーション (5人以上の開発者)
- 適切な Action 設計を考えてアプリケーション開発が可能な開発チーム
State
Management
When should we use Global Store ?
Slide 62
Slide 62 text
Action Design
Slide 63
Slide 63 text
63
Action Design
- Data Service と違い、Store はアプリケーションの中央 Database そのもの
- 直接 Database の書き換えができないように、 Store の直接の更新はできない
- Action / Reducer は、Database に対しての更新クエリと見なせる
State
Management
Why should we use Action ?
Slide 64
Slide 64 text
64
Action Design
- Actionはアプリケーションの状態変更を示す
- 分かりやすい Actionの設計は、アプリケーション仕様の理解を簡単にする
- Global Store を使う上で、Actionの設計が最も重要になる
State
Management
How should we use Action ?
Slide 65
Slide 65 text
65
Action Design
Login
Load Users
Update User Detail
Load User Detail
Reload Users
Login後、User一覧ページから指定のUser情報を閲覧、アップデートする一連の処理
State
Management
Slide 66
Slide 66 text
66
Action Design
Login後、User一覧ページから指定のUser情報を閲覧、アップデートする一連の処理
[ Login Page ] Login
[ User List Page ] Load Users
[ User Detail Page ] Update User Detail
[ User Detail Page ] Load User Detail
[ User List Page ] Reload Users
Login
Load Users
Update User Detail
Load User Detail
Reload Users
State
Management
Slide 67
Slide 67 text
67
Action Design
Login後、User一覧ページから指定のUser情報を閲覧、アップデートする一連の処理
[ Login Page ] Login
[ User List Page ] Load Users
[ User Detail Page ] Update User Detail
[ User Detail Page ] Load User Detail
[ User List Page ] Reload Users
[ Login API ] Login Success
[ Router ] Move Page
[ User API ] Load Users Success
[ User API ] Load User Detail Success
[ Router ] Move Page
[ User API ] Update User Detail Success
[ User API ] Reload Users Success
[ Router ] Move Page
State
Management