SlideShare a Scribd company logo

図解 ngrx

•
•
K
Kou Matsumoto

ngrxの構造について、図解を中心に解説。

1 of 37
Download to read offline
図解 ngrx @kou
自己紹介 ● @kou ● bitbank株式会社 ● 仮想通貨(ビットコインなど)の取引所のアプリケーションを開発
今日話すこと ngrxはどうやってReduxを実装 しているのか
ngrxとは ● @ngrx/storeなどの、いくつかのパッケージの総称 ● Angularの状態管理を扱うために作られている ● Reduxにかなり影響を受けている ● 食わず嫌いで使わない人が多い?
図解
ComponentとStoreの関係
ComponentとStoreは、selectとdispatchの関係 Component Store select() dispatch()
ComponentはStoreに対してActionをdispatchする Component Store dispatch() new Action()
Storeはselectを通じてComponentへ必要なデータを渡す Component Store select() data$
Store内部の構成
Storeは3つのObservableで構成されている Store reducer$action$ state$ withLatestFrom scan
action$: BehaviorSubject Store reducer$action$ state$ withLatestFrom scan
action$: 新しいActionがdispatchされた時に値が流れる Store reducer$action$ state$ withLatestFrom scan dispatch(new Action())
reducer$: BehaviorSubject Store reducer$action$ state$ withLatestFrom scan
reducer$: Lazy-Loadなどで新しくReducerが登録された時に値が流れる Store reducer$action$ state$ withLatestFrom scan Lazy-Load
state$: BehaviorSubject Store reducer$action$ state$ withLatestFrom scan
state$: action$がnextされた時、最新のRecuderでStateが計算されて値が流れる おまけ: selectの内部はmap, mapTo, distinctUntilChangedが使われている Store reducer$action$ state$ withLatestFrom scan select() Component
scannedAction$: Reducerで処理された後のActionのストリーム(Subject) Stateと同時に通知される(次に説明するEffectsで使用) Store reducer$action$ state$ withLatestFrom scan scanned action$ Effects
Effects
Effectsとは ● @ngrx/effects のパッケージで公開されている ● Reducer(Pure Function)で処理できない、副作用の処理を行う場所 ● ReduxでのMiddleware的な役割 ● 例) APIのHTTPリクエスト処理など
StoreとEffectsの関係図 scanned action$ Store Effects dispatch() myEffect$ action$ map(), switchMap()
scannedAction$: Reducerで処理された後のActionのストリーム(Subject) scanned action$ Store Effects dispatch() myEffect$ action$ map(), switchMap()
myEffect$: scannedAction$をmapなどで変換したストリーム (Effectsクラス内に、処理の数だけ作成するObservableのフィールドたち) scanned action$ Store Effects dispatch() myEffect$ action$ map(), switchMap()
action$: ComponentがStoreにActionをdispatchする時と同じストリーム Effectsの副作用の結果は、新しいActionとしてnextされる scanned action$ Store Effects dispatch() myEffect$ action$ map(), switchMap()
Effects: APIリクエストの例
例) ServerへログインのHTTPリクエストする際の一例 全体図 action$ scanned action$ Store Effects API ServerComponent login Effect$ state$ scan
1. Componentが新しいLogin用のActionをdispatchする action$ scanned action$ Effects login Effect$ state$ dispatch(new LoginAction()) Component scan API Server Store
2. ReducerがLoginActionを処理して、state$, scannedAction$を更新する action$ scanned action$ Effects login Effect$ state$ scan Component API Server Store
3. Componentへはstate$の変更、EffectsへはscannedAction$の変更がそれぞ れ通知される action$ scanned action$ Effects login Effect$ state$ select() map(), switchMap(), ... scan Component API Server Store
4. EffectsがHTTPリクエストを実行する action$ scanned action$ Effects login Effect$ /login state$ Http request scan Component API Server Store
5. HTTPの結果を取得 action$ scanned action$ Effects login Effect$ /login state$ Http response scan Component API Server Store
6. EffectsがHTTPの結果に応じて新しいActionを作成する action$ scanned action$ Effects login Effect$ /login state$ dispatch(new LoginSuccessAction()) scan Component API Server Store Or dispatch(new LoginFailureAction())
7. 再度、ReducerがActionを処理して、state$, scannedAction$を更新する action$ scanned action$ Effects login Effect$ state$ scan Component API Server Store
8. HTTPの結果がComponentに通達される action$ scanned action$ Effects login Effect$ state$ select() scan Component API Server Store
以上
まとめ ● ngrxはReduxではなく、Redux inspiredなRxJSのベストプラクティス ● やっていることはいつもMVCで書いているRxJSの処理 ● ストリームの設計をする際はngrxの実装はだいぶ参考になる
ありがとうございました

More Related Content

図解 ngrx