redux github
react-redux github
redux document
history
用語集

Redux

Action

• Actionの規約 *

• dispatch(action)でreducerに渡される

• actionCreatorで生成される

ActionCreator

• ActionCreatorはActionを返す関数

bindActionCreators(actionCreators, dispatch)

actionCreatorをdispatchでラップする *
mapDispatchToProps()内で使用する。
actionCreatorsはFunctionかObjectをしているする。
Objectの場合は以下の形式にする

{
  actionCreator名: actionCreator
}

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にマージするstateを返す。
storeのstateを使用しない場合はnullまたはundefinedを指定する。
storeのstateからpropsにマージするデータを抽出する処理をselectorと言う。

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メモ