【Redux】ReactでもAngularでもとにかくRedux

Redux。。(ついこないだFlux理解したのに...)

Fluxにどっぷり浸かっていたけどそろそろやらないとまずい...
ドキュメント読んでわかりやすかったhtmlにインラインで書かれたやつ

これが理解しやすいコードだった。
ビュー
↓
https://kenjimorita.jp/react_sample/example_redux/vanila/
コード
↓
https://jsfiddle.net/kenjimorita/03t20upy/9/

(上記はドキュメントにあって一番優しいとされているものです。)

こことかやっていくのも面白そう

今ここみている
多分ここの理解すごく大事

A word about reducer VS store:
As you may have noticed, in the flux diagram shown in the introduction, we had "Store", not
"Reducer" like Redux is expecting. So how exactly do Store and Reducer differ?
It's more simple than you could imagine: A Store keeps your data in it while a Reducer doesn't.
So in traditional flux, stores hold state in them while in Redux, each time a reducer is
called, it is passed the state that needs to be updated. This way, Redux's stores became
"stateless stores" and were renamed reducers.

以下理解したこと
----------------------------------
action

ただのオブジェクトを返す関数。dataを持てる。typeは必須(Fluxと同じ)。そのActionがなんのActionか文字列で示す。

reducer

ピュアな関数でなければならない。Actionされた際のstateを返す実装を定義する。現在の状態が第一引数、actionが第二引数に渡ってくるので、新しいオブジェクトとして返す。createStoreにまとめて(Redux.combineReducers)渡すことで登録する

dispatcher

Storeのインスタンスメソッド。オブジェクトを返すaction関数を引数に渡すことでStoreに申請する??(イメージ。addEventListennerの第一引数のような。イベントタイプのような。で実行はreducerに委譲するような)

store

Redux.createStoreのインスタンスとして存在するApp内に唯一データを蓄えるところ。getStateで更新。

あとSpread propertiesよく使う

ちょっと今日はここで失礼。
ではーーー

【関連記事】
【React】Reactの動きを理解したい人の為の最小サンプル

【React入門】過去のREACT初心者の自分にpropsとstateの違いを簡単に説明してあげたい