时间戳

首页 > 解决方案 > Redux createAsyncThunk 的进度条？

redux - Redux createAsyncThunk 的进度条？

问题描述

我正在用 React + Redux 编写一个简单的程序。在里面createAsyncThunk，我需要发送多个请求来发送数据块。现在我的代码如下所示；

export const sendData = createAsyncThunk<
  void,
  {
    id: string;
    data: Uint8Array;
  }
>("files/upload", async (props) => {
  const { uploadId } = await api.init();
  try {
    let i = 0;
    while (props.data.length > i * CHUNK_SIZE) {
      const chunkedData ... // Here I create chunked data from props.data.
      await api.uploadFileChunk({
        uploadId: uploadId,
        data: chunkedData,
      });
      i++;
    }
    await api.complete({
      id: props.id,
      uploadId: uploadId,
    });
  } catch (err) {
    await api.abort({ uploadId: uploadId });
  }
});

目前，我在发送数据时显示一个加载栏，但它没有告诉进度。我想改进程序以显示进度条，因为如果要发送的数据很大，则需要很长时间。progress我该如何管理createAsyncThunk？

标签： reduxreact-reduxredux-toolkit

解决方案

每次加载块时，您都需要调度某种操作。这样，您的商店就会知道已加载了多少，并可以选择进度。该createAsyncThunk函数旨在为 、 和 创建三个动作pending创建fulfilled者rejected。

您可以在回调中访问第二个参数。props那是thunkAPI包含您商店dispatch方法的对象。您应该能够在主回调中使用这些dispatch附加操作。payloadCreator

注意catch这里的 -ing 错误。我不确定，但我认为这会引起fulfilled响应，因此您需要使用rejectWithValue.

它应该看起来像这样（显然未经测试）


export const sendData = createAsyncThunk<
void,
{
  id: string;
  data: Uint8Array;
}
>(
  "files/upload", 
  async (props, {dispatch, rejectWithValue}) => {
  const { uploadId } = await api.init();
  try {
    let i = 0;
    while (props.data.length > i * CHUNK_SIZE) {
      const chunkedData = // Here I create chunked data from props.data.
      await api.uploadFileChunk({
        uploadId: uploadId,
        data: chunkedData,
      });
      i++;
      dispatch({
        type: "files/uploadProgress",
        percent: //calculate this
      });
    }
    await api.complete({
      id: props.id,
      uploadId: uploadId,
    });
  } catch (err) {
    await api.abort({ uploadId: uploadId });
    rejectWithValue(err);
  }
});

如果我正确地阅读了你的循环，我认为你想要i += CHUNK_SIZE而不是i++因为你一次上传一堆。我将由您来计算进度计算。

推荐阅读