devlog

フロントエンドエンジニアの技術ブログ

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 だけを絞り込んでリターンする事

@ 2019 devlog