See the Elephant

1992生まれのプログラマが書くエンジニアブログ

仕事に必要なのでreduxに入門した

reduxに入門した

仕事でreact-reduxの知識が必要なので学ぶ

1-2年前にflux勉強したので、それを思い出しながら。

namu-r21.hatenablog.com

flux理解してるしredux余裕やろ とか思ってたけど、まぁまぁむずいね。

今日の教科書はこれ。

qiita.com

reduxはイベントドリブンな状態操作を行う一方方向のデータフローだと思えば良さそう

ものすごくいい図だったので元記事から引用させていただく。

https://files.slack.com/files-pri/T2YT9EHKL-FLA7964LT/image.png f:id:namu_r21:20190722192435p:plain

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の変更操作のカプセル化と一方向のデータフロー制御。

ただそれだけの話だった。

実際に使うときはもう少し複雑っぽいので、都度、記事に起こそう