createasyncthunk api

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

createAsyncThunk condition option for thunk-level guards

The condition option in createAsyncThunk accepts a function with signature (arg, { getState }) that returns a boolean. When condition returns false, the thunk does not execute. This guards against duplicate requests, including those caused by React StrictMode running effects twice in development.

Thunk-level guard example with status check

In createAsyncThunk, the condition option should check thunk-level conditions like pending status. Example: condition(_arg, { getState }) { const state = getState() as RootState; return state.posts.status === 'idle' }. This prevents a fetch thunk from executing if a fetch is already pending or completed.

Avoid dispatching fetch thunks from effects without thunk-level guard

Dispatching fetch thunks from useEffect with only component-level checks is incorrect. React StrictMode can run effects twice in development. The guard must belong in the thunk's condition option as well as the component, not in the component alone.

createAsyncThunk function signature

createAsyncThunk is a generic function with two overloads: (1) createAsyncThunk<Returned, ThunkArg = void>(typePrefix: string, payloadCreator: AsyncThunkPayloadCreator<Returned, ThunkArg, {}>, options?: AsyncThunkOptions<ThunkArg, {}>): AsyncThunk<Returned, ThunkArg, {}>, and (2) createAsyncThunk<Returned, ThunkArg, ThunkApiConfig extends AsyncThunkConfig>(typePrefix: string, payloadCreator: AsyncThunkPayloadCreator<Returned, ThunkArg, ThunkApiConfig>, options?: AsyncThunkOptions<ThunkArg, ThunkApiConfig>): AsyncThunk<Returned, ThunkArg, ThunkApiConfig>.

AsyncThunk type structure

AsyncThunk<Returned, ThunkArg, ThunkApiConfig> is an AsyncThunkActionCreator combined with properties: pending (AsyncThunkPendingActionCreator<ThunkArg, ThunkApiConfig>), rejected (AsyncThunkRejectedActionCreator<ThunkArg, ThunkApiConfig>), fulfilled (AsyncThunkFulfilledActionCreator<Returned, ThunkArg, ThunkApiConfig>), and typePrefix (string).

AsyncThunkAction type structure and methods

AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig> is a function returning Promise<ReturnType<AsyncThunkFulfilledActionCreator> | ReturnType<AsyncThunkRejectedActionCreator>> with methods: abort(reason?: string): void, requestId: string, arg: ThunkArg, unwrap(): Promise<Returned>.

AsyncThunkOptions type properties

AsyncThunkOptions<ThunkArg, ThunkApiConfig> has properties: condition (optional, function taking arg and api with getState/extra, returning MaybePromise<boolean | undefined>), dispatchConditionRejection (optional, boolean), serializeError (optional, function taking unknown and returning GetSerializedErrorType<ThunkApiConfig>), idGenerator (optional, function taking ThunkArg and returning string), getPendingMeta (optional or required depending on if GetPendingMeta is unknown, function taking base {arg, requestId} and api with getState/extra).

AsyncThunkPayloadCreator type

AsyncThunkPayloadCreator<Returned, ThunkArg = void, ThunkApiConfig = {}> is a function with signature: (arg: ThunkArg, thunkAPI: GetThunkAPI<ThunkApiConfig>) => AsyncThunkPayloadCreatorReturnValue<Returned, ThunkApiConfig>.

create.asyncThunk pattern in buildCreateSlice

When using buildCreateSlice with asyncThunkCreator, the reducers function receives a create object with an asyncThunk method. Call create.asyncThunk(payloadCreator, options) where options contains pending, fulfilled, and rejected lifecycle handlers for managing async state.

createAsyncThunk abstracts the standard async request dispatch pattern

createAsyncThunk abstracts the standard pattern of dispatching actions before and after an async request.

createAsyncThunk generates pending/resolved/rejected thunk

createAsyncThunk() accepts an action type string and a function that returns a promise, and generates a thunk that dispatches pending/resolved/rejected action types based on that promise.

Use createAsyncThunk for imperative workflows

Use createAsyncThunk when you need one imperative async workflow with dispatch and getState. It accepts a type string and an async payload creator function, and generates pending, fulfilled, and rejected action types that can be handled in a slice's extraReducers.

createAsyncThunk generates pending, fulfilled, rejected cases

createAsyncThunk automatically generates three action creators: .pending, .fulfilled, and .rejected. These are used in extraReducers with builder.addCase() to handle the async lifecycle stages.

Give your agent this brain