How to handle promise from an Action from React Redux - Javascript

FaresSaleh
April 28, 2023
250 views
0 votes
2 Answers

export const uploadFile = createAsyncThunk(
  "simulation/uploadFile",
  async (filesSelected) => {
    console.log(filesSelected[0].name + " Will be uploaded");

    const formData = new FormData();

    formData.append(filesSelected.name, filesSelected);
    formData.append("dcmFile", filesSelected[0]);
    formData.append("mdfFile", filesSelected[1]);
    formData.append("modelFile", filesSelected[2]);

    const response = await axios
      .post("http://localhost:8000/simulation/start/", formData)
      .then((response) => {
        /**
         * The 'then' method is executed only when the request is successfull.
         */
        console.log(response);
      })
      .catch((err) => {
        /**
         *  The 'catch' method is executed only when the request fails to complete.
         */
        console.log(err);
      });
    console.log(response.statusText);
    return response.statusText;
  }
);

dispatch(uploadFile);

I want to wait for this dispatch to dispatch if axios return an error I want to pop a message to the user if everything goes smoothly I also want to display a message.

Answers

You can surround the dispatched action in a try/catch and await the unwrapped resolved or rejected Promise.

Example:

const handler = async () => {
  try {
    await dispatch(uploadFile).unwrap();
    // success, resolved, display success message popup
  } catch(error) {
    // handle error, display error message popup
  }
};

See Handling Thunk Results for more details.

The code is also mixing Promise-chains with async/await which is generally considered a bit of an anti-pattern. Use one or the other, but not both in most use cases.

Example:

export const uploadFile = createAsyncThunk(
  "simulation/uploadFile",
  async (filesSelected, thunkAPI) => {
    console.log(filesSelected[0].name + " Will be uploaded");

    const formData = new FormData();

    formData.append(filesSelected.name, filesSelected);
    formData.append("dcmFile", filesSelected[0]);
    formData.append("mdfFile", filesSelected[1]);
    formData.append("modelFile", filesSelected[2]);

    try {
      const response = await axios.post("http://localhost:8000/simulation/start/", formData);

      // This is executed only when the request is successful.
      console.log(response.statusText);
      return response.statusText;
    } catch(error) {
      // The 'catch' block is executed only when the request fails to complete.
      console.log(error);
      return thunkAPI.rejectWithValue(error);
    }
  }
);

I think the best practice with handling createAsyncThunk errors is to handle it in the slice. So instead of catching the error in your createAsyncThunk action, let the error happen, and then in the slice, it should look like so:

const initialState = {
    getStatus: {},
    doStatus: {},
};

export const mockSlice = createSlice({
    name: 'mock',
    initialState,
    reducers: {
        resetDoStatus: (state) => {
            state.doStatus = {};
        },
    },
    extraReducers: (builder) => {
        builder
            .addCase(uploadFile.pending, (state) => {
                state.doStatus.pending = true;
            })
            .addCase(uploadFile.rejected, (state, action) => {
                state.doStatus.pending = false;
                state.doStatus.errorMessage = action.error.message;
                state.doStatus.error = true;
            })
            .addCase(
                uploadFile.fulfilled,
                (state) => {
                    state.doStatus.pending = false;
                    state.doStatus.success = true;
                    state.doStatus.successMessage = "Upload success!"
                }
            );
    },
});

export const {
    resetDoStatus: resetMockDoStatus,
} = mockSlice.actions;
export const mockSlice = mockSlice.reducer;

By doing it like so, you can simply get the error in your component and display the error however you like, you can also have loading components according to your state and reset it all however you like.

Please signup or login to give your own answer.

Click here to cancel reply.

How to handle promise from an Action from React Redux – Javascript

Answers