Add "createAsyncThunkCreator" with option for customizing default error serializer

[jesperjohansson]

Adds a new createAsyncThunkCreator method which can be used to set the custom error serializer.

import { createAsyncThunkCreator, SerializedError } from '@reduxjs/toolkit'

export interface AppSerializedError extends SerializedError {
  isAxiosError?: boolean
}

type ThunkApiConfig = {
  state: RootState
  serializedErrorType: AppSerializedError
}

const createAppAsyncThunkCreator = createAsyncThunkCreator<ThunkApiConfig>({
  serializeError(error, defaultSerializer) {
    const serializedError = defaultSerializer(error)
    serializedError.isAxiosError = error.isAxiosError
    return serializedError
  },
})

function createAppAsyncThunk<
  Returned,
  ThunkArg = void,
  T extends ThunkApiConfig = ThunkApiConfig,
>(
  typePrefix: string,
  payloadCreator: AsyncThunkPayloadCreator<Returned, ThunkArg, T>,
  options?: AsyncThunkOptions<ThunkArg, T>,
): AsyncThunk<Returned, ThunkArg, T> {
  return createAppAsyncThunkCreator<Returned, ThunkArg, T>(
    typePrefix,
    payloadCreator,
    options,
  )
}

Closes #4548

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[netlify]

✅ Deploy Preview for redux-starter-kit-docs ready!

Name	Link
🔨 Latest commit	66f7494
🔍 Latest deploy log	https://app.netlify.com/sites/redux-starter-kit-docs/deploys/66e43815dea7520008d60942
😎 Deploy Preview	https://deploy-preview-4549--redux-starter-kit-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 66f7494:

Sandbox	Source
@examples-query-react/basic	Configuration
@examples-query-react/advanced	Configuration
@examples-action-listener/counter	Configuration
rtk-esm-cra	Configuration

[EskiMojo14]

the type changes to miniSerializeError are not safe - the function will only ever return a SerializedError shape, regardless of what your config says.

[phryneas]

I have to admit I'm a bit hesitant to add additional runtime code for this, especially with a name like createAsyncThunkCreator, which would probably be picked up by autocomplete a lot.
Also, the whole thing needs a lot of docs and explanation and might confuse people.

Alternative suggestion - we could export something like a CreateAsyncThunkWithoutWithTypes type, which would only be the function signature of the CreateAsyncThunk type without the withTypes callback.

That would make it possible to define something like this in userland:

export const createAppAsyncThunk: CreateAsyncThunkWithoutWithTypes<{
  serializedErrorType: number;
}> = (typePrefix: string, payloadCreator: any, options: any) => {
  return createAsyncThunk(typePrefix, payloadCreator, {
    ...options,
    serializeError: mySerializeError,
  }) as any;
};

What do you think?

[jesperjohansson]

I have to admit I'm a bit hesitant to add additional runtime code for this, especially with a name like createAsyncThunkCreator, which would probably be picked up by autocomplete a lot. Also, the whole thing needs a lot of docs and explanation and might confuse people.

Alternative suggestion - we could export something like a CreateAsyncThunkWithoutWithTypes type, which would only be the function signature of the CreateAsyncThunk type without the withTypes callback.

That would make it possible to define something like this in userland:

export const createAppAsyncThunk: CreateAsyncThunkWithoutWithTypes<{
  serializedErrorType: number;
}> = (typePrefix: string, payloadCreator: any, options: any) => {
  return createAsyncThunk(typePrefix, payloadCreator, {
    ...options,
    serializeError: mySerializeError,
  }) as any;
};

What do you think?

Yeah, this looks like a good solution to me.

[EskiMojo14]

@jesperjohansson raised #4667 with the solution posed - that should have a build you'll be able to install and try out in the meantime of us getting this in.

happy for this PR to be closed in favour of the other?

[markerikson]

Out in https://github.com/reduxjs/redux-toolkit/releases/tag/v2.4.0 !