add docs for addAsyncThunk (#5066)

* add docs for addAsyncThunk

* export asyncthunkreducers type

* Tweak test timing to fix flakes

---------

Co-authored-by: Mark Erikson <[email protected]>

Author: EskiMojo14

docs/api/createReducer.mdx

@@ -90,6 +90,14 @@ const counterReducer = createReducer(initialState, (builder) => {
 
 [params,examples](docblock://mapBuilders.ts?token=ActionReducerMapBuilder.addCase)
 
+### `builder.addAsyncThunk`
+
+[summary,remarks](docblock://mapBuilders.ts?token=ActionReducerMapBuilder.addAsyncThunk)
+
+#### Parameters
+
+[params,examples](docblock://mapBuilders.ts?token=ActionReducerMapBuilder.addAsyncThunk)
+
 ### `builder.addMatcher`
 
 [summary,remarks](docblock://mapBuilders.ts?token=ActionReducerMapBuilder.addMatcher)

packages/toolkit/src/index.ts

@@ -104,6 +104,7 @@ export type {
 export type {
   // types
   ActionReducerMapBuilder,
+  AsyncThunkReducers,
 } from './mapBuilders'
 export { Tuple } from './utils'
 

packages/toolkit/src/mapBuilders.ts

@@ -73,6 +73,31 @@ export interface ActionReducerMapBuilder<State> {
    * All calls to `builder.addAsyncThunk` must come before after any calls to `builder.addCase` and before any calls to `builder.addMatcher` or `builder.addDefaultCase`.
    * @param asyncThunk - The async thunk action creator itself.
    * @param reducers - A mapping from each of the `AsyncThunk` action types to the case reducer that should handle those actions.
+   * @example
+```ts no-transpile
+import { createAsyncThunk, createReducer } from '@reduxjs/toolkit'
+
+const fetchUserById = createAsyncThunk('users/fetchUser', async (id) => {
+  const response = await fetch(`https://reqres.in/api/users/${id}`)
+  return (await response.json()).data
+})
+
+const reducer = createReducer(initialState, (builder) => {
+  builder.addAsyncThunk(fetchUserById, {
+    pending: (state, action) => {
+      state.fetchUserById.loading = 'pending'
+    },
+    fulfilled: (state, action) => {
+      state.fetchUserById.data = action.payload
+    },
+    rejected: (state, action) => {
+      state.fetchUserById.error = action.error
+    },
+    settled: (state, action) => {
+      state.fetchUserById.loading = action.meta.requestStatus
+    },
+  })
+})
    */
   addAsyncThunk<
     Returned,

packages/toolkit/src/query/tests/optimisticUpserts.test.tsx

@@ -86,7 +86,7 @@ const api = createApi({
         // and leave a side effect we can check in the test
         api.dispatch(postAddedAction(res.data.id))
       },
-      keepUnusedDataFor: 0.01,
+      keepUnusedDataFor: 0.1,
     }),
     getFolder: build.query<FolderT, number>({
       queryFn: async (args) => {
@@ -430,12 +430,12 @@ describe('upsertQueryEntries', () => {
 
         expect(selectedData).toBe(posts[0])
       },
-      { timeout: 50, interval: 5 },
+      { timeout: 150, interval: 5 },
     )
 
     // The cache data should be removed after the keepUnusedDataFor time,
     // so wait longer than that
-    await delay(100)
+    await delay(300)
 
     const stateAfter = storeRef.store.getState()