Redux Form の reduxForm() で mapStateToProps と mapDispatchToProps を渡す方法
これに結構ハマったのでメモ。
reduxForm()
が返してくる関数の引数にconnect()
で mapStateToProps と mapDispatchToProps を指定する。
import React, { Component } from 'react'; import { reduxForm } from 'redux-form'; import { connect } from 'react-redux'; class SampleForm extends Component { render = () => { return // 省略 } }; const mapStateToProps = (state) => ({ // 省略 }); const mapDispatchToProps = (dispatch) => ({ // 省略 }); export default connect(mapStateToProps, mapDispatchToProps)( reduxForm({ form: 'SampleForm', })(SampleForm) )
注意
mapStateToProps が引数で受け取った State をそのままリターンすると、Store の state.form が二重のオブジェクトとなって動作しない。
mapStateToProps は、必要な State だけを絞り込んでリターンする事