仕事に必要なのでreduxに入門した
reduxに入門した
仕事でreact-reduxの知識が必要なので学ぶ
1-2年前にflux勉強したので、それを思い出しながら。
flux理解してるしredux余裕やろ
とか思ってたけど、まぁまぁむずいね。
今日の教科書はこれ。
reduxはイベントドリブンな状態操作を行う一方方向のデータフローだと思えば良さそう
ものすごくいい図だったので元記事から引用させていただく。
https://files.slack.com/files-pri/T2YT9EHKL-FLA7964LT/image.png
action
action creatorはactionを作る actionはただのjson。データを変更するために送る信号。
{ type: 'ADD_TODO', text: 'BBBBBBBBB' }
state
stateはコンポーネントの状態。UIで扱うデータのまとまり。
実際はでっかいJsonみたいなイメージをすればわかりやすい。
stateをもとにcomponentを操作する。
reduxはstateを一方方向でデータ変更するデータフローアーキテクチャだと思えばわかりやすい。
store
storeがでっかいJsonを書き換え続けているようなイメージ。
storeの中にstateが保持されていて、ある決められた手順でstateの状態を書き換える。
reducer
reducer(state, action) => newState
と考えればとても分かりやすい
ようするにデータの状態を変更することにしか関心のない関数だ。
reducerはstateとactionをもとにstateを新規作成して返す。
function addTODO(state, action) { if (action.type != ADD_TODO) { return newState; } }
それぞれの役割を考えてみよう
- action: eventでありstateを変えるための信号
- reducer: 信号とstateを受け取り新しいstateを作る
- dispatch: reducerが作ったstateを実際に適用し、storeで扱うstateを更新する
- store: stateを操作するためのインタフェース(reducer, dispatcher)を提供する&stateの操作を外部から隠蔽する
stateの変更操作はstoreの中に隠蔽されていて、storeの外から変更はできない(stateはstore外部ではimmutableなオブジェクトなため)。
外部から見えるのはstateそのものの状態(immutable)とstate変更用の信号(action)とstoreの信号受け口なんだな。
storeの中にデータ変更の操作方法(reducer)が定義されていて、変更結果を適用する(dispatch)と、storeの中のstateが書き換わる。
stateの変更操作のカプセル化と一方向のデータフロー制御。
ただそれだけの話だった。
実際に使うときはもう少し複雑っぽいので、都度、記事に起こそう