redux-form：排序 connect 和 reduxForm 调用 - 不能同时访问 store props 和 syncErrors

Question

我有一个已在此处讨论过的问题： https://github.com/erikras/redux-form/issues/3424

我基本上有两个要求：

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

我尝试按如下方式完成此操作：

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 中的 store 访问我的 prop，但 syncErrors 不会传递给 MyFormComponent，因此我无法访问它们。

如果我切换顺序（reduxForm wraps connect），我可以访问 MyFormComponent 中的 syncErrors，但无法访问 myFormSubmit 函数内的 store 中的 prop（因为它还没有被映射，自然)。

对如何处理有什么建议吗？

我真的不想在 MyFormComponent 中这样做：Redux-form handleSubmit: How to access store state?

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 来代替}