redux-form：订购 connect 和 reduxForm 调用 - 无法同时访问 store props 和 syncErrors

Question

我在这里讨论了一个问题： https://github.com/erikras/redux-form/issues/3424

我基本上有2个要求：

我需要能够在 reduxForm 的 onSubmit 函数中通过 mapStateToProps 访问映射到我的组件中的一些道具。
我也想从我的表单状态访问 MyFormComponent 内的 syncErrors 值。这是为了例如总结错误。

我尝试按如下方式完成：

const mapDispatchToProps = (state, ownProps) => ({
  data: state.dataFromServer // some data from the server
  syncErrors: getFormSyncErrors('myForm')(state),
});

const myFormSubmit = (values, dispatch, props) => {
  // need to access the data prop from above
}

const FormContainer =
  connect(
    mapStateToProps,
    mapDispatchToProps,
  )((reduxForm({
    form: 'myForm',
    onSubmit: myFormSubmit,
  })(MyFormComponent)));

问题如下：

如果我按上面的方式订购（connect wraps reduxForm），我可以从 myFormSubmit 中的商店访问我的 prop，但是 syncErrors 不会传递给 MyFormComponent，所以我无法访问它们。

如果我切换顺序（reduxForm 包装连接），我可以访问 MyFormComponent 中的 syncErrors，但无法访问 myFormSubmit 函数内的商店中的道具（因为它尚未映射） , 自然).

关于如何处理这个问题有什么建议吗？

我真的不想在 MyFormComponent 中这样做：

Answer 1

我认为用connect包裹两次没有错:

const addDataProp = state => ({
  data: state.dataFromServer // some data from the server
});

const addSyncErrorsProp = state => ({
    syncErrors: getFormSyncErrors('myForm')(state),
});

const FormContainer = connect(addDataProp)(
  reduxForm({
    form: 'myForm',
    onSubmit: myFormSubmit,
  })(
    connect(addSyncErrorsProp)(MyFormComponent)
  )
);

_{我不得不过度缩进上面的代码以使其更容易阅读:P 我建议你使用一些 compose()-like util}

redux-form：订购 connect 和 reduxForm 调用 - 无法同时访问 store props 和 syncErrors

redux-form: ordering connect and reduxForm calls - can't access store props and syncErrors together

redux-form