redux-form:排序 connect 和 reduxForm 调用 - 不能一起访问 store props 和 syncErrors

Question

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

我基本上有2个要求:

我需要能够在 reduxForm 的 onSubmit 函数中通过 mapStateToProps 访问映射到我的组件中的一些 Prop 。

我还想从 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)));

问题如下:

如果我按上述方式订购(连接包装 reduxForm)，我可以从 myFormSubmit 的商店访问我的 Prop ，但同步错误不会传递给 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 代替