Redux - 橋本商会

Redux

https://gyazo.com/b95c88f594d44fb99d511e8c8c675f13.png http://redux.js.org/

Fluxアーキテクチャのstore部分の実装のひとつ

reducerという1つの関数を定義するだけでstoreを作れる

storeはstate（画面表示の元になるでかい変数の塊）を持つ

storeをsubscribeしておくと、stateの変化を通知してもらえる

stateの中身を見てReactでVirtualDOMを吐き出せばいい

変更をReactでComponent#setState(state)すればVirtualDOMが再度render()される

reducerを作る

code:js

const reducer = function(state = {}, action){

// ここでstateをいじる

return state;

}

現在のstateを、actionを元に修正して返す関数を書けばいい

action.typeとaction.valueを見てstateを修正して返す関数を書く

純粋に関数なので副作用とか無くて良い

テストもactionとstateの初期値と結果だけ見ればいいので書きやすい

storeを作る

code:js

const store = createStore(reducer);

storeにactionを発行する

code:js

store.dispatch({type: "setdata", value: "helloworld"});

引数はreducerにactionとして飛ぶ

reducerの分割

code:js

combineReducer({user:userReducer, page:pageReducer, pagelist:pagelistReducer});

複数reducerに分割できる

でかいアプリを作る時に有用

middleware

ミドルウェア

createStoreの第三引数にapplyMiddlewareを通して複数渡す

code:js

const store = createStore(reducer, initialState, applyMiddleware(middleware1, middleware2, middleware3...));

編集されたらalert()するmiddleware例

code:js

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するだけでいいや

ここまでの部分はとても完成度高いのでもうこれ以上変化しないと思う

それ以上は変なライブラリがいっぱいあって気持ち悪いので触りたくない