React - 使用 reduxForm 的两个语句之间的区别答案

【问题标题】：React - Difference between two statements with reduxFormReact - 使用 reduxForm 的两个语句之间的区别
【发布时间】：2017-06-20 20:17:07
【问题描述】：

我已经检查了带有初始化值的 reduxForm 示例代码，他们的代码和我的代码之间的唯一区别是下面的代码块..

我的代码 （不适用于 initialValues）

function mapStateToProps(state) {
  return{
    initialValues: state.account.data
  };
}

export default reduxForm({
  form:'initializeFromState'
})(connect(mapStateToProps,{load: loadAccount})(InitializeFromStateForm));

他们的代码 （与 InitialValues 一起使用） Taken from here

InitializeFromStateForm = reduxForm({
  form: 'initializeFromState', // a unique identifier for this form
})(InitializeFromStateForm);

// You have to connect() to any reducers that you wish to connect to yourself
InitializeFromStateForm = connect(
  state => ({
    initialValues: state.account.data, // pull initial values from account reducer
  }),
  { load: loadAccount }, // bind account loading action creator
)(InitializeFromStateForm);

export default InitializeFromStateForm;

我用我的更改了他们的 connect() 和 reduxForm 代码，有趣的是 initialValues 停止工作，现在我的问题是 两者的代码是否不同？ 如果不同 我的代码有什么问题?

谢谢。

【问题讨论】：

标签： javascript reactjs redux react-redux redux-form

【解决方案1】：

是的，有一点点不同，你用connect包装组件，然后用ReduxForm包装组件，但是应该反过来

把你的代码改成

export default connect(mapStateToProps,{load: loadAccount})(reduxForm({
  form:'initializeFromState'
})(InitializeFromStateForm));

它应该可以工作

【讨论】：

【解决方案2】：

区别在于 react-redux 连接 HoC 的顺序，redux-form 的 HoC 相互包裹。

在您的代码中，redux-form 包装了 connect HoC，initialValues 不会传递给表单，而是传递给内部组件。表单使用值初始化，内部组件（您的）忽略它们。

道具流程：redux-form -> connect - initialValues -> 组件

在他们的代码中，connect 包装了 redux-form，initialValues 被传递给 redux-form HoC（表单）。表单使用这些值进行初始化。

道具流程：连接 - initialValues -> redux-form -> 组件

【讨论】：

感谢您的解释.. 很有帮助。