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

Question

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

我的代码 （不适用于初始值）

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 停止工作了，现在我的问题是 这两个代码是否不同？ 如果不同 我的代码有什么问题？

谢谢。

Answer 1

是的，略有不同，您先用 connect 包裹组件，然后用 ReduxForm 包裹组件，但应该反过来

将您的代码更改为

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

它应该可以工作

Answer 2

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

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

道具流程：redux-form -> connect - initialValues -> component

在他们的代码中，connect 包装了 redux-form，并且 initialValues 作为 redux-form HoC（表单）传递。使用值初始化表单。

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

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

React - Difference between two statements with reduxForm

javascript

reactjs

redux

redux-form

react-redux