動機

JavaScriptのシングルページアプリケーションの要件がますます複雑になるにつれて、**私たちのコードはこれまで以上に多くの状態を管理しなければならなくなっています**。この状態には、サーバーの応答やキャッシュされたデータだけでなく、まだサーバーに永続化されていないローカルで作成されたデータも含まれる可能性があります。UIの状態も複雑さを増しており、アクティブなルート、選択されたタブ、スピナー、ページネーションコントロールなどを管理する必要があります。

この絶えず変化する状態を管理することは困難です。あるモデルが別のモデルを更新できる場合、ビューはモデルを更新でき、それが別のモデルを更新し、これがさらに別のビューを更新させる可能性があります。ある時点で、あなたは自分のアプリで何が起こっているのかを理解できなくなり、**その状態がいつ、なぜ、どのように変化するのかを制御できなくなっています。**システムが不透明で非決定的な場合、バグを再現したり、新しい機能を追加したりすることが困難になります。

さらに悪いことに、**フロントエンド製品開発で一般的になりつつある新しい要件**を考えてみてください。開発者として、私たちは楽観的な更新、サーバーサイドレンダリング、ルート遷移を実行する前のデータフェッチなどを処理することが期待されています。私たちはこれまで対処する必要がなかった複雑さを管理しようとしていることに気づき、必然的に「もう諦める時なのか？」という疑問を抱きます。答えは*ノー*です。

この複雑さは、人間の心が理解するのが非常に難しい**2つの概念**、つまり**ミューテーション（状態変更）と非同期処理**を混在させているために処理が困難です。私はそれらをメントスとコーラと呼んでいます。どちらも単独では素晴らしいものですが、一緒になると混乱を引き起こします。Reactのようなライブラリは、非同期処理と直接的なDOM操作の両方を排除することで、ビューレイヤーでこの問題を解決しようと試みています。しかし、データの状態を管理するのはあなた次第です。ここでReduxが登場します。

Flux、CQRS、およびイベントソーシングのステップを踏んで、**Reduxは、更新がいつどのように発生するかを制限することで、状態の変更を予測可能にしようとします**。これらの制限は、Reduxの3つの原則に反映されています。