はじめに

Reduxの概要をざっくり理解するための記事を書きました。
今回はコードでの解説ではなく、イラストやを使ってできるだけわかりやすく説明しています。Reduxを知るきっかけになれば幸いです。

この記事のゴール

俗にいう「一方向データフロー」の解説です

↓幸せスパ⚪︎ラルっぽいやつ

↓一度は聞いたことがあるだろうDispatch、Reducer など

画像引用元

まずは先ほど紹介した以下の画像に関して説明したいと思います。

公式ドキュメントを超ざっくり解説すると以下のような感じになります。

これを入金処理で例える以下の通りです

これを入金処理で例える以下の通りです

Reduxには3つの原則(セオリー)があります

値の保管場所は単一(Single source of truth)
- 全てのStateは1つのオブジェクトとして管理され、1つのStoreで保持されるべき
値は読み取り専用(State is read-only)
- Stateを変更する唯一の方法は、変更内容を持ったActionを通すこと
変更は純粋な関数で行う(Changes are made with pure functions)
- 同じ引数を渡されたら必ず同じ結果を返す関数

値の保管場所は単一のアンチパターン
複数のstoreでstateを管理する

値は読み取り専用のアンチパターン
Actions以外の処理でstateを更新する(入金前の残高が10,000円の場合)

変更は純粋な関数で行うのアンチパターン
Actionsの結果がランダム(入金前の残高が10,000円の場合)

ReduxのDispatchとかReducerは最初なかなか理解しにくいと思いますが、この記事が参考になれば幸いです。
最後までお読みいただきありがとうございます！