Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "createAsyncThunkCreator" with option for customizing default error serializer #4549

Conversation

jesperjohansson
Copy link

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

Copy link

codesandbox bot commented Aug 7, 2024

Review or Edit in CodeSandbox

Open the branch in Web EditorVS CodeInsiders

Open Preview

Copy link

netlify bot commented Aug 7, 2024

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...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

codesandbox-ci bot commented Aug 7, 2024

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
Copy link
Collaborator

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

@phryneas
Copy link
Member

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
Copy link
Author

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
Copy link
Collaborator

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Ability to configure createAsyncThunk for a custom serializeError
3 participants