【入門編】Reduxによる状態管理の仕組みを理解する

まず結論から 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(ソースは1つだけ) この原則は以下のような要約できます。...

2021/03/21 · 3 min · 598 words