【 React 】 reduxについて
react初心者です。
今回reduxを使って簡易的なメモ帳を作ってみて
少しだけreduxが理解できたので忘備録がてらメモメモしたいと思います。
reduxを使ってみてわかったこと
いろんな値をひとつの場所で管理する
reduxの思想の部分です。
reactのコンポーネントはどれもstateで書き換えることが可能ですが、
それらをまとめて一つのdataとして一括で管理するのがreduxです。
ストアと呼ばれるオブジェクトを作るのですが、
そこで「値」と「データの処理」を一括で管理しています。
ビューのボタンをクリックすると
「削除」「更新」「追加」などのCRUD機能の指示が発火して
ストアでデータを加工して、
ビューに再表示される。といった仕組みです。
reduxの仕組み
一応それぞれ名前がついているらしいです。
| モノ | 役割 |
|---|---|
| ストア | 「値の管理」と「処理」をまとめて管理する仕組みのことです。 そして値のことをステートと言います。 |
| ステート | 値を管理する仕組みのことです。メモアプリでいう日時や内容などをまとめて管理しています。 |
| レデューサー | 保管されているデータの内容を変更するための仕組みです。 |
| プロバイダー | ストアからとったデータを他のコンポーネントに受け渡す仕組みのことです。 |
ストアで値を加工して、プロバイダーを通ってビューに返す。
といった動きをします。
インストール
npm install --save redux
reduxのインストール、私は1分ほどかかりました。
npm install --save-dev redux-devtools
react の Devtools に Redux関係の機能を一括で入れてくれます。
まだ使ったことないですが「デバッグに役立つから入れておけ」
と実家のおばあちゃんがいっていたような気がします。
参考にしました
ざっくり React with Redux チュートリアル - Qiita
おわりに
言葉ではよく理解できてなかったのですが、
2回ほど同じものを写経してだんだんとイメージが湧いてきたので
もう一度自分の言葉で言語化してみました。
おしまい :p
