はじめに
ReactのReduxに関するメモ。
ReactのクラスコンポーネントとかJSXとかコンテキストとか調べてみたの続き
参考
Redux
-
複数のコンポーネント、アプリケーション全体で使うような値をまとめるもの
- this.stateはコンポーネント単位で存在する
- 値や処理をアプリ内で統合し管理するための仕組みのライブラリ
- 値の保管は場所は一つだけ
- アプリケーションごとに一つだけ
- 値は読み取り専用、書き換え不可
- 変更は単純な関数で用意
インストール
npm install --save redux
npm isntall --save react-redux
npm isntall --save redux-devtools
仕組み
- ストア
- 値を保管するステートと、値の操作処理であるレデューサーを内部に持っている
- プロバイダー
- ストアを他のコンポーネントに受け渡すための仕組み
- レデューサー
- ストアに保管されているステートを変更するための仕組み
Reduxの値の管理は、上記3つでできている
ストアの作成
変数= createStore(レデューサー);
作成されたストアを変数に収めておき、それを画面表示のJSXでプロバイダーに渡して利用
コンポーネントにストアを接続
変数=connect(ステート)(コンポーネント);
これでthis.props.ストアの値とthis.props.dispatｃｈが使えるようになる
変数=connect()(コンポーネント);
これはステートを使わずthis.props.dispathを使えるようにする
providerでストアを受け渡す
<Provider store={store}>
<APP/>
</Provider>
redux全体
index.jsでステート、レデューサーを定義して、renderでAppコンポーネントを利用。
Appコンポーネントの中で各コンポーネントを利用、ストアを使いたいコンポーネントだけプロバイダーでくくりその中でコンポーネントを利用する
Appコンポーネントで利用するコンポーネントの定義とコンポーネントとストアを結びつけることで、各コンポーネントから
dispatchからレデューサーを利用する
データの永続化 Redux Persist
Reduxのストアのデータをブラウザのローカルストレージに保存する
npm install --save redux-persist