ReactのRedux

はじめに

ReactのReduxに関するメモ。
ReactのクラスコンポーネントとかJSXとかコンテキストとか調べてみたの続き

参考

React.js&Next.js超入門

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