Redux-Form 未运行 mapStateToProps 函数答案

【问题标题】：Redux-Form not running mapStateToProps functionRedux-Form 未运行 mapStateToProps 函数
【发布时间】：2016-04-12 14:08:03
【问题描述】：

redux-form 文档说reduxForm() 装饰器接受一个必需参数（配置对象）和四个可选参数（在 react-redux 中传递给 connect 装饰器的四个参数相同）。但是，当我将 mapStateToProps() 函数作为参数传递给 reduxForm() 装饰器时，mapStateToProps() 实际上并没有运行。请参阅下面的简化代码示例。解释器永远不会到达debugger 语句。我对 redux-form 文档有什么误解吗？

import React from 'react';
import { reduxForm } from 'redux-form';

class Home extends React.Component {
  render() {
    return (
      <div>This is the home component.</div>
    );
  }
}

function mapStateToProps(state) {
  debugger;
  const {
    ui: {
      isMailingListFormVisible
    }
  } = state;
  return {
    isMailingListFormVisible
  };
}

export default reduxForm({
  form: 'mailingList',
  fields: ['firstName', 'email']
}, mapStateToProps)(Home);

【问题讨论】：

从 V6 开始，reduxForm 不再接受这些参数，您必须使用 react-redux 中的 'connect' 函数。

标签： reactjs redux react-redux redux-form

【解决方案1】：

您的代码无法在 v6 上运行，因为在 v6 上您必须装饰您的 Form 组件并将整个组件手动连接到商店：

import ...

class MyForm extends React.Component { 
    ...
}

MyForm = reduxForm({
  form: 'myForm',
  ...
})(MyForm);

export default connect(mapStateToProps, mapDispatchToProps)(MyForm);

【讨论】：

【解决方案2】：

不，您没有误解文档。我已经运行了您的代码示例，它可以很好地访问调试器语句。

【讨论】：

【解决方案3】：

你把它放在<Provider> 组件内的某个地方？

老实说，我看不出你的代码有什么问题。

【讨论】：

是的。它肯定在<Provider> 内。你知道你使用的是什么版本的 redux-form 吗？我在 5.0.0 和 6.0.0-alpha.4 上试过这个。它也没有到达调试器语句。
没关系。我最初使用 6.0.0-alpha.4 进行了尝试，但没有成功。然后，我尝试清除 node_modules 目录，并重新安装 v6.0.0-alpha.4。仍然没有工作。然后，我切换到 v5.0.0。仍然没有工作。然后，我清除了 node_modules 目录并重新安装了 v5.0.0，它终于开始工作了。也许 v6 中有一些破坏性的 API 更改？
这是我的错。我很抱歉。