用axios onProgress可以观察到redux

Question

我正在创建一个上传函数，它将在React Redux和Redux-observable中向客户端显示进度条，我使用axios对AWS S3执行put请求。

我的史诗如下

...

function uploadFile(mimetype, url, file) {
  const config = {
    headers: {
      'Content-Type': mimetype,
    },
    onUploadProgress(progress) {
      const percentCompleted = Math.round((progress.loaded * 100) / progress.total)
      uploadProgress(percentCompleted)
    },
  }

  axiosRetry(axios, { retries: 3 })

  return axios.put(url, file[0], config)
}

export const uploadEpic = (action$, store) => action$
  .ofType(SIGNED_URL_SUCCESS)
  .mergeMap(() => {
    const file = store.getState().File.droppedFile
    const mimetype = file[0].type
    const { url } = store.getState().SignedUrl
    const { fileData } = store.getState().Upload

    return of(uploadFile(mimetype, url.data, file))
      .concatMap(() => {
        const uploadedData = {
          url: fileData.url,
          thumbUrl: `${fileData.folder}/${fileData.filename}-00001.png`,
        }
        return [
          upload(uploadedData),
          uploadSuccess(),
        ]
      })
      .catch(error => of(uploadFailure(error)))
  })

export default uploadEpic

上传似乎有效，因为我收到一封AWS SNS电子邮件告诉它已完成，但我似乎无法看到它正在更新我的Upload reducer中的Upload.progress状态。

我使用axios的原因特别是因为它是qazxsw poi和它的qazxsw poi，因为我似乎无法找到一个使用axios-retry做onProgress的例子

所以可能有两个问题

1. 我怎样才能使用axios实现这一目标
2. 如何使用universal-rx-request实现此目的

Answer 1

感谢这个onUploadProgress

我最终根本没有使用axios

我得到了它的工作

universal-rx-request