38elements.github.io - React Reduxメモ

React Reduxメモ

38elements.github.io Spined HTML

React Reduxメモ React Reduxメモ redux github react-redux github redux document history 用語集 ReduxWhoopeeActionの規約 * dispatch(action)でreducerに渡される actionCreatorで生成される ActionCreator ActionCreatorはActionを返す関数 bindActionCreators(actionCreators, dispatch)はactionCreatorsをdispatchでラップする * Reducer // reducerは変更がある場合新しいstateを返す // ない場合は既存のstateを返す let reducer = function (state, action) { if(action.type == 'foo') { let changedState = {}; return changedState; } return state; }; storeのstateはconnect()のmapStateToPropsを通じてコンポーネントに渡される middlewareではない場合、dispatch(action)でreducer(state, action)を呼ぶ reducerはstoreのstateを変更する stateがundefinedのときreducerは初期値を返す。 stateにデフォルトの値を設定する。 変更がない場合はstateをそのまま返す。 stateを変更する際は新しいオブジェクトを返す Object.assign({}, old, {foo: 123}) stateがundefinedの場合、combineReducersに登録されている各reducerが呼ばれる だから、最初にinitalStateがundefinedの場合、combineReducersに登録されている各reducerが呼ばれる createStore(reducer, preloadedState, enhancer)のreducerにはcombineReducers(reducers)の戻り値が渡されることが多い。 const store = Redux.createStore( combineReducers({ // fooキーに対応する値を返すreducer関数 foo, // barキーに対応する値を返すreducer関数 bar }), initialState ) Middleware Middlewareはdispatch(action)を実行した前の処理と後の処理を定義することができる applyMiddlewareはdispachを上書きする Middlewareを通過した後に本物のdispatchを呼び出してReducerにいく applyMiddleware(A, B, C)はA前->B前->C前->Cでdispach(action)->C後->B後->A後の順 C後->B後->A後で一つ前のmiddlewareの戻り値をdispatch(action)の戻り値で取得することができる react-redux connect(mapStateToProps, mapDispatchToProps, mergeProps, options) * connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(Component)でstoreとcomponentが接続される mapStateToProps(state, [ownProps]) storeのstateをstoreに接続しているcomponentに渡されたpropsを引数として受け取ってるcomponentにpropsとして渡すstateを返す。 storeのstateを使用しない場合はnullまたはundefinedを指定する。 mapDispatchToProps(dispatch, [ownProps]) dispatchを実行する関数を接続しているcomponentとして渡す。 bindActionCreatorsを使用した例 function mapDispatchToProps(dispatch) { return { ...bindActionCreators(actionCreators, dispatch) } } mergeProps(stateProps, dispatchProps, ownProps) mapStateToProps()の戻り値とmapDispatchToProps()の戻り値と接続しているcomponentに渡されたpropsを引数に取る。 そして、それらを処理してcomponentに渡すpropsを生成する。 指定しなかった場合、Object.assign({}, ownProps, stateProps, dispatchProps)を実行する関数になる。 options routerと一緒に使うときはwithRouterでラップする import { withRouter } from 'react-router-dom' export default withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(Component)) Redux Thunk 非同期処理はRedux Thunkを使用する。 thunkをmiddlewareの先頭に置く。 actionCreatorsはdispatch, getStateを引数にとる関数を返す redux-actionsメモ ≪React Routerメモ Main Reactメモ≫