Development Software

Fluxアーキテクチャのメモ

投稿日:2015-05-28 更新日:

Laravel

最近は Flux + React を使っています。Secure Code Tipsでも部分的に採用しました。今回は Fluxアーキテクチャについて、現時点で自分の理解している内容をメモしておきます。

Fluxの概念図

Flux: Actions and the Dispatcher | React というページでは以下の図が使用されています。よく見る図です。

flux-diagram

現在の自分の認識を基にしてこの図をもう少し詳しくすると、以下になります(だいたいこんな感じという程度の図です)。

flux-diagram-custom-006

* Web API と Web API Utils は省略しています。

Web API と Web API Utils

  • Action Creators が保持しているメソッド内からAjaxリクエスト処理等を行う場合、その部分をこちらに切り出して使用します。

Action Creators と Actions

Action

  • 何かしら新しい値が発生した場合に、それらの値を包むのが Action(object literal)です。つまり Action とはデータです。Actionと聞くとメソッドをイメージしてしまうかもしれませんが違います。
  • Actionには “actionType”プロパティを持たせて、区別できるようにします。

Action Creator

  • Action Creator は、主に画面上の操作に対して実行する処理を保持するオブジェクトです。
    • 基本的には actionType毎に対応するメソッドを Action Creator 内に作成します。
    • 上の図では1つのメソッドに1つのActionを対応させていますが、そう決まっているわけではないと思います。
  • このメソッドでは、基本的に (1) Actionを生成し、(2) Dispatcherのdispatch(Action)を実行します。
    • dispatch()を実行する前にAjaxでデータを取得することもありえますし、別のActionCreatorのメソッドを呼ぶこともありえます。
  • 処理の種類毎に Action Creator を作成して使用します。

Dispatcher

  • アプリケーションにただ1つだけ存在し、全てのデータの流れを管理します。
  • 各StoreはあらかじめDispatcherにコールバックを登録しておきます。そのコールバック内では、自分自身(Store)を更新する必要のある actionType が呼ばれた場合の処理を記述しておきます。
    • 基本的には、Store毎にコールバックを登録します。
    • 基本的には、まず Store内のデータを操作する処理を行い、その後で 関連するViewのステータスを更新する処理を実行(イベントの発火)します。
  • 1つの actionType に対して、複数のStoreがそれぞれの処理を登録する可能性があります。
    • この場合、どの Storeの処理から実行するかが問題となりますが、Dispatcherの層がこの順序を解決する責任を持ちます。
      • 各Storeのコールバック処理の中で waitFor()メソッドを使い、依存する他のStoreの処理を先に実行させることができます。

Stores

  • Domainのstate(状態)を管理します。
    • いわゆるMVCのModelに似ていますが、別物であるようです。
    • Domain毎にStoreを作成します。
  • Dispatcherにコールバックを登録します。
    • 各Storeは、自分に関連のあるデータのかたまり(actionTypeで判別する)が発生した時に実行する処理をDispatcherに登録します。
  • これは EventEmitter そのものです。
    • 関連するViewのステータス更新処理を保持して、必要な時に実行します。

(React) View

  • ユーザーが行う操作を受け付けて、ActionCreator内のメソッドを実行します。
  • Storeにあらかじめ登録しておいた自分自身の更新処理が実行されると、Storeから必要なデータを取得し、その値を基にして自分自身(画面)を更新します。

参考

最終更新日: 2015-05-28

Pocket

-Development, Software
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


*

おすすめ記事&スポンサーリンク

関連記事

OWASP ZAPのExternal redirect診断は何をしているのか?

OWASP ZAPのActive Scanで行っている脆弱性検査の1つである「External redirect」が何をしているのか説明します。(v2.2) 検査対象の脆弱性 CWE CWE-601: …

umaskのデフォルト値 (CentOS6.4)

/etc/profile に以下の記述がある。 if [ $UID -gt 199 ] && [ “`id -gn`” = “`id -un`” ]; then umask 002 else umas …

Apache Struts2 の脆弱性対策について注意喚起されていました

IPAから「Apache Struts2 の脆弱性対策について(CVE-2014-0094)(S2-020)」というページで Apache Struts2 の更新を呼びかけていました。 Apache …

WordPress: アップロードした画像を過去の画像に置き換える方法

WordPress(v3.8.1)の管理画面からアップロードした画像ファイルを、過去(月を跨っている)にアップロードした画像ファイルに置き換える方法をメモしておきます。 過去の記事で表示している画像に …

他人のGithubレポジトリを fork して新たにブランチを追加し、それを composer で取り込んで使う方法

手順 1. Github上で 他人のリポジトリ(fork元のリポジトリ)を forkする 2. 1のリポジトリをローカルに git clone する。 3. 新たにブランチを作り機能を追加する。 4. …


lathe