Redux

Conclusion First This is a repost of the article from zenn. To understand Redux, if you can understand this diagram (source: Redux Application Data Flow), you’re 90% there. From user input, (ActionCreator) creates an Action Dispatch (send) the Action to Store (where state is managed) Pass the dispatched Action to Reducer (where state is changed) Store saves the new State created by Reducer Reference data from Store and render in View (screen) If there are any corrections like “This is wrong!” or “This mechanism is also used!”, please give me feedback! (That’s partly why I’m writing this!) ...

まず結論から zenn の記事の転載です。 Redux を理解する上では、この図解(引用元：Redux Application Data Flow)を理解できれば 90%は OK。 ユーザーの入力から、(ActionCreator が)Action(アクション)を作成する Store(状態を管理するところ)へ Action を Dispatch（送信）する Dispatch された Action を Reducer（状態を変更するところ）へ渡す Reducer が作成した新しい State を Store が保存する Store からデータを参照して View（画面）に描画する 「ここが間違ってる！」や「もっとこんな仕組みが使われてるよ！」等のツッコミがあれば、どしどし貰えると助かります！(そのために書いてるみたいなところも多いので！) Redux とは Reduxは、React が扱う UI の state(状態)を管理をするためのフレームワークです。 React では state の管理するデータフローにFluxを提案していますが、Redux は Flux の概念を拡張してより扱いやすく設計されています。 React 以外にも AngularJS や jQuery などと併用して使用することもできますが、React と使用するのがベターです。 Redux - GitHub Redux の 3 原則（Three Principles） Redux の基本設計は以下の 3 つの原則に基づいて設計されています。 順を追って見ていきましょう。 Single source of truth(ソースは１つだけ) この原則は以下のような要約できます。 ...