javascript - 使用 Redux 处理异步文件上传

Question

我对 React 和 Redux 还很陌生，在想出构建异步文件上传的最佳方法时遇到了一些麻烦。

我想要的是

1. 用户点击表单的提交按钮
2. 上传文件，服务器返回上传文件的路径
3. 在发送最终 POST 请求之前，使用这些路径更新状态

我现在想做的是将表单或某些更高级别的组件传递给动作处理程序，就像这样

// actions.js
// using redux-thunk middleware, so this action creator
// dispatches actions on success and error events
submitForm({ formElement }) {
  return (dispatch, getState) => {
    // ... do some stuff

    fetch('/files', {
      method: 'POST',
      body: new FormData(formElement)
    })
    .then(() => dispatch(uploadSuccess()));
  }
}

这是一个坏主意吗？有没有FormData比将表单元素传递给动作创建者更好的方法？

Answer 1

感谢亚历克斯·格拉~

没有意识到我可以简单地将一个事件绑定到文件输入的onChange. 我现在正在做的是

render() {
  const { onChangeFiles, index } = this.props;
  return (
    // ... some other stuff, then
    <input type="file" onChange={
      (e) => {
        onChangeFiles({ files: e.target.files, index });
      }
    } />
  )
}

然后将这些文件添加到组件的状态中。然后，在最终提交处理程序中，我将POST在上传完成后发出最终发布请求之前将状态对象中的文件。