Fluxの最大の特徴である単方向データフローは、ここにUIである「View」を加えて、図1の通り表されます。 図1 Fluxの単方向データフロー 状態の更新指示内容である「Action」を関数である「Dispatcher」で「Store」に伝えて状態を更新し、その結果を「View(React)」に伝える、といった流れです。 実際にアプリケーションに組み込んだ場合には、ユーザーが画面を操作したイベントに応じて新たなActionを発行(dispatch)して、状態と画面を更新していく形になるので、次の通りになります。 図2 ユーザー操作を考慮したデータフロー 図2に沿って初期化後の処理を一つひとつ見ていくと、次のことをしています。 ユーザーがViewを操作する(ボタンを押す、文字を入力する、など) 更新したい事柄をActionの形にまとめて、Dispatcherに渡す Dispatcherから