最近Reactの勉強を始めたので、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！
Redux
Reduxを学習します！しかし英語なので不安なので翻訳された物も見ながらやりました。
ほとんど、翻訳された記事をメインに読んでしまいましたが
Redux公式チュートリアル
Redux入門【ダイジェスト版】10分で理解するReduxの基礎
-
Reduxの各機能を物流？で例えると
- Action
- 何をするのかの情報を持ち、指示する。 マニュアル(手順書）の様な物
- dispatch
- データの送信、機能の呼び出しなど。 トラックで出荷の様な物
- Store
- アプリケーション内の状態を保存しているところ 倉庫の様な物
- State
- アプリケーションでの状態 在庫みたいな物
- Reducer
- dispatchされた時にStore内にある、Stateを変更するためのメソッド。引数のactionと現在保持しているStateをReducerへ渡し、新しいStateを作成する。引数のStateを更新することはせず、新しいstateのオブジェクトを作成して返す。 物流データを管理する場所？
- Action
例えが、微妙かもしれませんが、大体こんな感じなのかなと思いました。
下記の画像がReduxの一通りの流れです。
ユーザの操作 → View → Action → Reducer → State → View → ユーザへの表示の順
Reduxが必要な理由
JavaScriptで開発されるシングルページアプリケーションが複雑になるにつれて、管理しなければいけない状態(state)の数が増えていきます。そのため新機能開発やバグ修正などがとても大変になります。
その複雑さは『変化(mutation)』と『非同期性(asynchronicity)』という２つの概念を混在させていることにより起こるものです。
ややこしい...
Reactのようなライブラリは、非同期と直接DOM操作の両方を削除することによって、ビューレイヤでこの問題を解決しようとします。
しかし、状態(state)の管理はユーザーに任せられたままであるので、『Redux』はその状態（state）管理の複雑さを解消するために開発されました。
振り返り
Reduxの流れは掴むことができてはきたた。Reactのみでは複雑な状態を管理するのが難しくなったのでReduxが管理しやすくしてくれている。このReduxの流れを実際にコードに落とし込んだものを見て理解を深めていきます。