Redux

(2016/04/25〜2016/06/30)
  • Fluxアーキテクチャのstore部分の実装のひとつ
  • reducerという1つの関数を定義するだけでstoreを作れる
  • storeはstate(画面表示の元になるでかい変数の塊)を持つ

  • storeをsubscribeしておくと、stateの変化を通知してもらえる
  • stateの中身を見てReactでVirtualDOMを吐き出せばいい
  • 変更をReactComponent#setState(state)すればVirtualDOMが再度render()される
  • reducerを作る

  • javascript
  • const reducer = function(state = {}, action){
  • // ここでstateをいじる
  • return state;
  • }
  • 現在のstateを、actionを元に修正して返す関数を書けばいい
  • action.typeとaction.valueを見てstateを修正して返す関数を書く
  • 純粋に関数なので副作用とか無くて良い
  • テストもactionとstateの初期値と結果だけ見ればいいので書きやすい
  • storeを作る

  • javascript
  • const store = createStore(reducer);
  • storeにactionを発行する

  • javascript
  • store.dispatch({type: "setdata", value: "helloworld"});
  • 引数はreducerにactionとして飛ぶ
  • reducerの分割

  • javascript
  • combineReducer({user:userReducer, page:pageReducer, pagelist:pagelistReducer});
  • 複数reducerに分割できる
  • でかいアプリを作る時に有用
  • middleware

  • ミドルウェア
  • createStoreの第三引数にapplyMiddlewareを通して複数渡す
  • javascript
  • const store = createStore(reducer, initialState, applyMiddleware(middleware1, middleware2, middleware3...));
  • 編集されたらalert()するmiddleware例
  • javascript
  • const alertOnChange = store => next => action => {
  • const _data = store.getState().page.data;
  • const result = next(action); // [[[ここでreducerが実行されてる]]]
  • const data = store.getState().page.data;
  • if(_data !== data){
  • alert("変化あった");
  • }
  • };
  • 1つの関数でreducerに渡る前後を見れる
  • next(action)の前後
  • ここで変化を見てSocket.IOやajaxでサーバーとやりとりすると綺麗に書ける
  • Reactと組み合わせる

  • react-redux<Provider>作ってやるのが普通らしい
  • Propsバケツリレーが気に入らなかったので自分でstore.subscribe(callback)するComponentを書いた
  • react-reduxでmapStateToPropsが呼ばれてるのに再度renderされない問題 - DRYな備忘録
  • stateが更新されてるのにProvider直下のApp.render()が呼ばれない
  • stateの要素がobjectの時に比較できない為
  • combineReducer使ってると同じことが起こる
  • Object.assignとかで毎回新規Objectをstateとして返すしかない
  • 感想

  • storeを作るためにreducerでやるのはシンプルでいい、middlewareは便利
  • reducerとmiddleware書いてstore作ってsubscribeするだけでいいや
  • ここまでの部分はとても完成度高いのでもうこれ以上変化しないと思う
  • それ以上は変なライブラリがいっぱいあって気持ち悪いので触りたくない