Reduxのコンポーネント周り

React+Reduxでは、コンポーネントをプレゼンテーションとコンテナに分離します。
Presentational and Container Components

プレゼンテーションとコンテナの違い

プレゼンテーション

• マークアップ、スタイル
• Redux非依存
• Propsからデータ取得・変更

コンテナ

• データ取得、状態更新
• Redux依存
• Redux Stateからデータ取得
• Redux Actionsからデータ変更

コンテナで使うfunction

mapStateToProps(state)

StoreのState情報をプレゼンテーションのPropsとして扱えるようにする。

const mapStateToProps = state => {
  return {
    foo: state.foo
  }
}

mapDispatchToProps(dispatch)

StoreのDispatch（Action関数）をプレゼンテーションのPropsとして扱えるようにする。

const mapDispatchToProps = dispatch => {
  return bindActionCreators({ bar }, dispatch)
}

connect

プレゼンテーションとコンテナを関連付ける

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(HogeComponent)