JSライブラリを1日1つ紹介する
1日1つJSのライブラリを調べます。
① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する
JSライブラリもいよいよ残りがRedux関連のものばかりになってきました...
なんとなく見よう見まねで書けるようになってきたものの、「Reduxを使うと何が便利なのか？」がイマイチ腑に落ちていないので、
今回はそれをテーマにして詳しく調べた後にチュートリアルをやりました！
Motivation
まず最初に、「Reduxを作った動機」について読みました。
Motivation
JavaScriptのアプリケーションめっちゃ複雑になってきてたくさんのstateを扱わないといけなくなってきました。
ReactはDOMの操作をユーザーが細かく指示しなくてもよくしてくれたけど、データの状態管理はユーザーに任せたままです。
ここがReduxの出番で、Reduxは「状態の変化を予測しやすく」してくれるんだよ！ ってことが書いてありました。
fetchしたデータをView側だけで色々使いまわしてたら、どんどんデータに不整合が出てしまいますもんね。
そうしたデータの不整合をわかりやすく管理してくれるのがReduxです。
Three Principles
続いて、Reduxの3原則についてです。
- Single source of truth
アプリケーション全体の状態は、単一のStore内のオブジェクトに格納される。stateが一つだけだから管理しやすくて嬉しい
- State is read-only
stateは基本的に読み取り専用。変更を加える場合はactionから。
状態が変更するのはactionのみなので、どこでstateの整合性が合わなくなってしまったのか検討がつけやすそうですね。
- Changes are made with pure functions
Reducerは状態とアクションを受け取り、"新しい"stateを返す純粋な関数。
実際に使ってみる
最後に、Reduxチュートリアルをやってみました。
Reduxも元々はJavaScriptなんだなぁ〜って思ったくらいで、それ以上の深い感想が湧いてこなかったので、
今度stateが何個かある自分の個人アプリケーションでReduxを導入してみようと思います。。。
あんまり中身がなくって申し訳ないです！
3行でまとめる
reduxを導入すると、
- stateの管理が複雑になってきたとき、stateの状態管理ができる。それによって画面の整合性を保ちやすくする。
以上です！
