如何让 React Redux 异步操作返回一个承诺？

Question

我有一个返回承诺的 redux 操作函数。在该函数体内，还有另一个异步函数，它在完成调用时返回一个回调。然后我在另一个地方调用这个函数，用.then()链接它，但是当在浏览器中用断点调试它时，promise函数存在于前两行代码之后

return new Promise((resolve, reject) => {
    return (dispatch, getState) => {

是因为第二个return语句吗？这是react/redux 代码，所以我必须为我的异步 Thunk redux 操作提供第二个返回语句。我怎样才能做到这一点？这样我就可以在另一个 redux 操作中调用它并使用 handleProfileImageUploadToS3().then(() => {...}) 链接它？

完整的函数体：

export const handleProfileImageUploadToS3 = () => {
  return new Promise((resolve, reject) => {
    return (dispatch, getState) => {
      const settingsState = getState().BusinessSettings
      const userState = getState().User
      const imageUpload = true

      if (!settingsState.get('logoImage') || settingsState.get('logoImage') === null) {
        reject('no image selected')
        return
      }
      Utilities.uploadFileToS3(
        imageUpload,
        settingsState.get('logoImage'),
        'apiurl',
        `profiles/${userState.get('id')}`,
        (error, url) => {
          if (error) {
            dispatch(uploadProfileSettingsImageError(error))
            return
          }
          dispatch(updateProfileImageUrlAfterUpload(url))
          resolve(url)
        }
      )
    }
  })
}

Answer 1

我没有看到你的整个代码库，但我担心这个函数中有一些危险信号。

• 您的状态的BusinessSettings 和User 属性似乎是带有get() 方法的non-serializable 对象。
• 如果 S3 上传出现错误，那么你 dispatch 和 return 但你永远不会 resolve 或 reject Promise。
• reject('no image selected') 的拒绝不太可能在任何地方被发现。
• 似乎未上传的图像应该存储在您的 UI 状态中并作为参数传递，而不是存储在 Redux 中。您可能希望在 URL 上传后存储它。这也消除了拒绝的需要。

---

您在此函数中解决了两个不同的问题，我建议您将两者分开。

首先，您有一个使用成功/失败回调的函数 Utilities.uploadFileToS3，并且您希望将其转换为异步函数（返回 Promise 的函数）。

我会创建一个助手，它只接受变化的参数并忽略那些不变的参数（如'apiurl'）。

const asyncUploadFileToS3 = (image, userId) => {
  return new Promise((resolve, reject) => {
    Utilities.uploadFileToS3(
      true,
      image,
      "apiurl",
      `profiles/${userId}`,
      (error, url) => (url ? resolve(url) : reject(error))
    );
  });
};

---

现在您已经解决了这部分问题，您可以以更典型的方式编写 thunk。您可以通过.then() 链接或通过创建函数async 并使用try/catch 块来返回Promise。我们不需要将整个内容包装在 new Promise 中，因为我们已经在 asyncUploadFileToS3 函数中处理了这个问题。

您可以从 thunk 中返回一个结果并将其链接起来，但我不确定这里实际上最有意义的是什么。

export const handleProfileImageUploadToS3 = (image) => 
  async ( dispatch, getState ) => {
    const userId = getState().user.id;
    try {
      const url = await asyncUploadFileToS3(image, userId);
      dispatch(updateProfileImageUrlAfterUpload(url));
      return "this is the result";
    } catch (error) {
      dispatch(uploadProfileSettingsImageError(error));
      return "there was an error";
    }
  };

export default function App() {
  const dispatch = useDispatch();

  const avatar = useSelector((state) => state.user.imageUrl);

  const onClick = () => {
    const image = new Blob();
    dispatch(handleProfileImageUploadToS3(image)).then(
      // logs "this is the result" or "there was an error"
      (returned) => console.log("finished", returned)
    );
  };

  return (
    <div>
      <button onClick={onClick}>Upload</button>
      {avatar ? <div>Avatar URL: {avatar}</div> : <div>No Avatar</div>}
    </div>
  );
}

Code Sandbox Demo

Answer 2

经过更多研究，我发现您必须在返回 new Promise 之前从初始 Promise 函数返回另一个函数才能访问 Redux dispatch 和 getState 方法，而不是在 @987654325 内将其作为匿名函数返回@ 代码块，然后退出函数执行。完整代码如下：

export const handleProfileImageUploadToS3 = () => (dispatch, getState) => {
  return new Promise((resolve, reject) => {
    const settingsState = getState().BusinessSettings
    const userState = getState().User
    const imageUpload = true

    if (!settingsState.get('logoImage') || settingsState.get('logoImage') === null) {
      reject('no image selected')
      return
    }
    Utilities.uploadFileToS3(
      imageUpload,
      settingsState.get('logoImage'),
      'apiurl',
      `profiles/${userState.get('id')}`,
      (error, url) => {
        if (error) {
          dispatch(uploadProfileSettingsImageError(error))
          return
        }
        dispatch(updateProfileImageUrlAfterUpload(url))
        resolve(url)
      }
    )
  })
}