Progress bar with Redux createAsyncThunk? - redux

Question

I am writing a simple program with React + Redux.
Inside createAsyncThunk, I need to send multiple requests to send data chunks.
Now my codes are something like the bellow;
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 });
}
});
Currently, I show a loading bar while sending data but it does not tell the progress. I want to improve the program to show a progress bar because it takes a long time if the data is large to send.
How can I manage progress with createAsyncThunk?

Answer 1

You need to be dispatching some sort of action each time that a chunk is loaded. That way your store is aware of how much has been loaded and can select the progress. The createAsyncThunk function is designed to create three action creators for pending, fulfilled, and rejected.
There is a second argument after props which you have access to in your callback. That is the thunkAPI object which contains your store's dispatch method. You should be able to use this dispatch additional actions from inside your main payloadCreator callback.
Be careful with catch-ing errors here. I'm not sure but I think this will cause a fulfilled response so you would need to use rejectWithValue.
It should look something like this (obviously untested)
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);
}
});
If I'm reading your loop correctly, I think you want i += CHUNK_SIZE rather than i++ since you upload a bunch at a time. I'm leaving it up to you to figure out the progress calculations.