React向けのアーキテクチャパターン - Flux
Fluxの概念について勉強してみたかったので、色んな記事を読み漁り自分なりにまとめてみた。
Fluxの要素
１、View(ReactComponent)
２、Action
３、Dispatcher
４、Store
とりあえずこの４つを覚えればよいらしい。
１、View(React)
・Storeのデータを表示する。いわゆるView
２、Action
・ユーザーが行った操作がAction経由でDispatcherに届けられる。
３、Dispatcher
・Actionを受け付けて登録されたcallbackを実行し、Storeにイベントを通知する。すべてのデータは一旦Dispatcherを通る。
４、Store
・アプリケーションのデータと、ビジネスロジックを担当する。Storeのデータが更新された場合、changeイベントを発行してReactのコンポーネントツリーに更新を通知する。
https://github.com/facebook/flux
↑よくある図
処理の流れ
・Viewで発生したユーザーの操作がActionを経由してDispatcherを呼び出す。
・DispatcherのコールバックとしてStoreの処理を呼び出す。
・Storeは処理が終わるとChange Eventをemitする。
・ViewはStoreのChange Eventをlistenしていて、Change Eventを受け取ると自身のstateを更新する。
以上。
まあ作ってみないとなんとも言えないので、とりあえず作ってみようと思う。
https://github.com/yhikishima/Flux-env
Author And Source
この問題について(React向けのアーキテクチャパターン - Flux), 我々は、より多くの情報をここで見つけました https://qiita.com/yhikishima/items/80ef89b36f125f9e78c3著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .