react-redux - 异步验证后的 Redux-Form 文件上传

Question

我有一个通过 redux-form 字段连接的 FileUpload 组件。当在输入字段中选择文件时，它会调用 input.onChange 和 input.onBlur 并将所选文件作为 base64 字符串。

我正在使用 asyncValidator redux-form 选项来验证图像的尺寸，并且我希望在异步验证完成后将文件上传到我的服务器。

似乎没有记录任何类型的 afterAsyncValidation Hook 。以 redux 形式完成此任务的最佳方法是什么？

Answer 1

redux-form设计的想法是您的数据将在提交时保存到服务器。

然而，没有什么能阻止你把自己的 .then()异步验证之后的子句来做到这一点。像这样的东西？

// async function you already have that is looking at your
// picture field and rejecting the promise with errors
import validateDimensions from './validateDimensions'

// async function to upload the image
import upload from './uploadImage'

const MyForm = reduxForm({
  form: 'myForm',
  asyncValidate: values =>
    validateDimensions()
      .then(() => {
        // we know validation passed
        upload(values.prettyPicture)
        // ^ not "return upload(values.prettyPicture)" to let this async
        // validation promise resolve and do upload asynchronously
        // after it has resolved
      })
  },
  asyncBlurFields: [ 'prettyPicture' ]
})(MyForm)