Question

我正在用 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？

Answer 1

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

在 props 之后有一个 second argument，您可以在回调中访问它。这是包含您商店的 thunkAPI 方法的 dispatch 对象。您应该可以在主 dispatch 回调中使用此 payloadCreator 附加操作。

请注意此处的 catch 错误。我不确定，但我认为这会导致 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++，因为您一次上传一堆。我让你来计算进度。

Redux createAsyncThunk 的进度条？

1 个答案: