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

What is the best way to refresh the redux toolkit store after logging out from the

What are some solutions to the error message "Error: Cannot find any matching routes" that appears when trying to switch between tabs following a successful login?

Error encountered during the production build of Angular 2. No issues reported during development phase

Launch the Image-Infused Modal

Transform the JSON object into a TypeScript array

Issue encountered while developing custom Vuejs + Typescript plugin

Omit functions from category

In TypeScript, an interface property necessitates another property to be valid

What is the best way to recycle a single modal in Ionic?

Prisma: Utilizing the include option will retrieve exclusively the subobject fields

I thought enabling CORS would solve the issue, but it seems like the restrictions

Changing an array into an object in JavaScript without rearranging the keys

What's the most effective method for transferring data to different components?

What is the method for implementing an Inset FAB with Material UI in a React project?

"Users have reported that the file upload preview feature in Angular 6 only works after the

Using Vue.js 2 on multiple HTML pages with Typescript and ASP.Net Core

Assigning to a constrained type with an indexable signature results in failure

Tips for making a property non-nullable in Typescript

Is the variable empty outside of the subscribe block after it's been assigned?

"Discover the power of Next.js by utilizing dynamic routes from a curated list