tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

【 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+Redux入門 - Qiita

ざっくり React with Redux チュートリアル - Qiita

おわりに

言葉ではよく理解できてなかったのですが、
2回ほど同じものを写経してだんだんとイメージが湧いてきたので
もう一度自分の言葉で言語化してみました。

おしまい :p