Redux
Fluxアーキテクチャのstore部分の実装のひとつ
reducerという1つの関数を定義するだけでstoreを作れる
storeはstate（画面表示の元になるでかい変数の塊）を持つ
storeをsubscribeしておくと、stateの変化を通知してもらえる
stateの中身を見てReactでVirtualDOMを吐き出せばいい
reducerを作る
jsconst reducer = function(state = {}, action){
// ここでstateをいじる
return state;
}現在のstateを、actionを元に修正して返す関数を書けばいい
action.typeとaction.valueを見てstateを修正して返す関数を書く
純粋に関数なので副作用とか無くて良い
テストもactionとstateの初期値と結果だけ見ればいいので書きやすい
storeを作る
jsconst store = createStore(reducer);storeにactionを発行する
jsstore.dispatch({type: "setdata", value: "helloworld"});引数はreducerにactionとして飛ぶ
reducerの分割
jscombineReducer({user:userReducer, page:pageReducer, pagelist:pagelistReducer});複数reducerに分割できる
でかいアプリを作る時に有用
middleware
ミドルウェア
createStoreの第三引数に
applyMiddleware を通して複数渡すjsconst store = createStore(reducer, initialState, applyMiddleware(middleware1, middleware2, middleware3...));編集されたら
alert() するmiddleware例jsconst 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を書いたstateが更新されてるのにProvider直下の
App.render() が呼ばれないstateの要素がobjectの時に比較できない為
combineReducer 使ってると同じことが起こる Object.assign とかで毎回新規Objectをstateとして返すしかない感想
storeを作るためにreducerでやるのはシンプルでいい、middlewareは便利
reducerとmiddleware書いてstore作ってsubscribeするだけでいいや
ここまでの部分はとても完成度高いのでもうこれ以上変化しないと思う
それ以上は変なライブラリがいっぱいあって気持ち悪いので触りたくない