Is there a way to ensure DRY principles are followed while utilizing Redux Toolkit's asyncThunkCreator?

Question

Is there a way to ensure DRY principles are followed while utilizing Redux Toolkit's asyncThunkCreator?

I have a query related to RTK. I find myself repeating code in my action creators created with createAsyncThunk because I want to be able to cancel any request made.

I am thinking of creating a wrapper to streamline this process, but I am facing challenges with TypeScript implementation. Are the arguments used in createAsyncThunk accessible somewhere?

Upon examining the code, I noticed that the thunkAPI (which I am particularly interested in) is defined with GetThunkAPI<'3rd parameter'> using 3 TypeScript parameters.

An example of an action creator could resemble the following:

export const resendValidationKey = createAsyncThunk<
  void,
  IAdminResendValidationKey,
  { rejectValue: AxiosError }
>('admin/resendValidationKey', async (data, thunkAPI) => {
  const { signal, rejectWithValue } = thunkAPI;
  try {
    const source = axios.CancelToken.source();
    signal.addEventListener('abort', () => {
      source.cancel();
    });
    await const response = axios.post(`admin/account/validate/resend`, data, {
      cancelToken: source.token,
    });
    return response.data;
  } catch (error) {
    return rejectWithValue(error);
  }
});

Ideally, I would like a wrapper where I can simply input the URL, method, data, and success callback (if applicable). Is such a solution feasible?

I hope all of this makes sense.

typescript redux-toolkit

Answer 1

Answer №1

For the purpose of handling custom errors thrown by functions within Redux thunks, I devised a workaround by creating a wrapper around the createAsyncThunk method:

import type { AsyncThunkPayloadCreator } from '@reduxjs/toolkit';
import { createAsyncThunk } from '@reduxjs/toolkit';
//...

const handleReduxResult = async <T>(
    actionName: string,
    fn: () => T | Promise<T>,
    rejectWithValue: (value: unknown) => unknown,
) => {
    try {
        return await fn();
    } catch (e: unknown) {
        const wrappedError = wrapErrorTyped(e);
        wrappedError.actionName = actionName;
        const wrappedSerializedError = createWrappedSerializedError(wrappedError);
        return rejectWithValue(wrappedSerializedError) as T;
    }
};

export interface CustomAsyncThunkConfig {
    [prop: string]: unknown;
}

export const createCustomAsyncThunk = <Returned, ThunkArg = void>(
    name: string,
    thunk: AsyncThunkPayloadCreator<Returned, ThunkArg, CustomAsyncThunkConfig>,
) =>
    createAsyncThunk<Returned, ThunkArg, CustomAsyncThunkConfig>(
        name,
        async (params, thunkApi) =>
            await handleReduxResult(
                name,
                async () => thunk(params, thunkApi),
                thunkApi.rejectWithValue,
            ),
    );

In our case, it was necessary to prevent Redux toolkit's error handling mechanism from interfering with our own error processing workflow.

To avoid excessively repetitive code calls to rejectWithValue, I designed the handleReduxResult function to manage custom error handling and serialization in a more concise manner.

This approach allowed us to inject additional context into the error logs by including an actionName property for better traceability.

Although the implementation may seem intricate due to the complexity of internal types used by Redux toolkit, adapting the handleReduxResult function according to specific requirements is feasible.

const handleReduxResult = async <T>(
    actionName: string,
    fn: () => T | Promise<T>,
    rejectWithValue: (value: unknown) => unknown,
) => {
    return await fn();
};

By modifying this function based on individual use cases, a tailored solution for error handling can be achieved.

Answer 2

For the purpose of handling custom errors thrown by functions within Redux thunks, I devised a workaround by creating a wrapper around the createAsyncThunk method:

import type { AsyncThunkPayloadCreator } from '@reduxjs/toolkit';
import { createAsyncThunk } from '@reduxjs/toolkit';
//...

const handleReduxResult = async <T>(
    actionName: string,
    fn: () => T | Promise<T>,
    rejectWithValue: (value: unknown) => unknown,
) => {
    try {
        return await fn();
    } catch (e: unknown) {
        const wrappedError = wrapErrorTyped(e);
        wrappedError.actionName = actionName;
        const wrappedSerializedError = createWrappedSerializedError(wrappedError);
        return rejectWithValue(wrappedSerializedError) as T;
    }
};

export interface CustomAsyncThunkConfig {
    [prop: string]: unknown;
}

export const createCustomAsyncThunk = <Returned, ThunkArg = void>(
    name: string,
    thunk: AsyncThunkPayloadCreator<Returned, ThunkArg, CustomAsyncThunkConfig>,
) =>
    createAsyncThunk<Returned, ThunkArg, CustomAsyncThunkConfig>(
        name,
        async (params, thunkApi) =>
            await handleReduxResult(
                name,
                async () => thunk(params, thunkApi),
                thunkApi.rejectWithValue,
            ),
    );

In our case, it was necessary to prevent Redux toolkit's error handling mechanism from interfering with our own error processing workflow.

To avoid excessively repetitive code calls to rejectWithValue, I designed the handleReduxResult function to manage custom error handling and serialization in a more concise manner.

This approach allowed us to inject additional context into the error logs by including an actionName property for better traceability.

Although the implementation may seem intricate due to the complexity of internal types used by Redux toolkit, adapting the handleReduxResult function according to specific requirements is feasible.

const handleReduxResult = async <T>(
    actionName: string,
    fn: () => T | Promise<T>,
    rejectWithValue: (value: unknown) => unknown,
) => {
    return await fn();
};

By modifying this function based on individual use cases, a tailored solution for error handling can be achieved.

Is there a way to ensure DRY principles are followed while utilizing Redux Toolkit's asyncThunkCreator?

Answer №1

Similar questions

When using TypeScript, it is important to ensure that the type of the Get and Set accessors for properties returning a

Mysterious issue arises during deployment of Typescript-React application on Heroku

What's the best way to insert values into data binding within a Typescript/ Angular mat Table?

Tips for retrieving an item from a (dropdown) menu in Angular

Ways to conceal a component based on a specific condition?

Dispersed data points within ng2-charts

What is the best way to pass an array through router navigate function?

Creating a responsive class getter with Vue.js 3 using the Composition API: a guide

Issue encountered in ../../../../ Unable to locate namespace 'Sizzle'

What is the best way to create a highlighted navigation bar using Angular 2?

The pipe in Angular 2.0.0 was not able to be located

Incorporate JavaScript Library into StencilJs Using TypeScript

Icon for closing Mui Snackbar

What is the proper method to deactivate a hyperlink in Angular 2?

Using Firebase with Angular 4 to fetch data from the database and show it in the browser

Tips for aligning the arrow of a dropdown menu option

Combine array elements in Angular/Javascript based on a certain condition

Unable to interact with Span in a table cell - Protractor/Typescript error

Is it possible in Typescript to reference type variables within another type variable?

Enhancing supertest functionality with Typescript