アプリの状態管理を安全に行うためのFluxとRedux

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