Merge pull request #3768 from reduxjs/cat-settled

Author: markerikson

packages/toolkit/src/createAsyncThunk.ts

@@ -5,8 +5,16 @@ import type {
 } from './createAction'
 import { createAction } from './createAction'
 import type { ThunkDispatch } from 'redux-thunk'
-import type { FallbackIfUnknown, Id, IsAny, IsUnknown } from './tsHelpers'
+import type {
+  ActionFromMatcher,
+  FallbackIfUnknown,
+  Id,
+  IsAny,
+  IsUnknown,
+  TypeGuard,
+} from './tsHelpers'
 import { nanoid } from './nanoid'
+import { isAnyOf } from './matchers'
 
 // @ts-ignore we need the import of these types due to a bundling issue.
 type _Keep = PayloadAction | ActionCreatorWithPreparedPayload<any, unknown>
@@ -415,6 +423,13 @@ export type AsyncThunk<
     ThunkArg,
     ThunkApiConfig
   >
+  // matchSettled?
+  settled: (
+    action: any
+  ) => action is ReturnType<
+    | AsyncThunkRejectedActionCreator<ThunkArg, ThunkApiConfig>
+    | AsyncThunkFulfilledActionCreator<Returned, ThunkArg, ThunkApiConfig>
+  >
   typePrefix: string
 }
 
@@ -676,6 +691,7 @@ export const createAsyncThunk = (() => {
         pending,
         rejected,
         fulfilled,
+        settled: isAnyOf(rejected, fulfilled),
         typePrefix,
       }
     )

packages/toolkit/src/createSlice.ts

@@ -7,11 +7,15 @@ import type {
   _ActionCreatorWithPreparedPayload,
 } from './createAction'
 import { createAction } from './createAction'
-import type { CaseReducer, ReducerWithInitialState } from './createReducer'
+import type {
+  ActionMatcherDescriptionCollection,
+  CaseReducer,
+  ReducerWithInitialState,
+} from './createReducer'
 import { createReducer } from './createReducer'
 import type { ActionReducerMapBuilder } from './mapBuilders'
 import { executeReducerBuilderCallback } from './mapBuilders'
-import type { Id, Tail } from './tsHelpers'
+import type { ActionFromMatcher, Id, Matcher, Tail } from './tsHelpers'
 import type { InjectConfig } from './combineSlices'
 import type {
   AsyncThunk,
@@ -283,6 +287,12 @@ export interface AsyncThunkSliceReducerConfig<
     State,
     ReturnType<AsyncThunk<Returned, ThunkArg, ThunkApiConfig>['fulfilled']>
   >
+  settled?: CaseReducer<
+    State,
+    ReturnType<
+      AsyncThunk<Returned, ThunkArg, ThunkApiConfig>['rejected' | 'fulfilled']
+    >
+  >
   options?: AsyncThunkOptions<ThunkArg, ThunkApiConfig>
 }
 
@@ -483,7 +493,12 @@ type ActionCreatorForCaseReducer<CR, Type extends string> = CR extends (
 type SliceDefinedCaseReducers<CaseReducers extends SliceCaseReducers<any>> = {
   [Type in keyof CaseReducers]: CaseReducers[Type] extends infer Definition
     ? Definition extends AsyncThunkSliceReducerDefinition<any, any, any, any>
-      ? Id<Pick<Required<Definition>, 'fulfilled' | 'rejected' | 'pending'>>
+      ? Id<
+          Pick<
+            Required<Definition>,
+            'fulfilled' | 'rejected' | 'pending' | 'settled'
+          >
+        >
       : Definition extends {
           reducer: infer Reducer
         }
@@ -582,6 +597,7 @@ export function createSlice<
     sliceCaseReducersByName: {},
     sliceCaseReducersByType: {},
     actionCreators: {},
+    sliceMatchers: [],
   }
 
   reducerNames.forEach((reducerName) => {
@@ -632,6 +648,9 @@ export function createSlice<
       for (let key in finalCaseReducers) {
         builder.addCase(key, finalCaseReducers[key] as CaseReducer<any>)
       }
+      for (let sM of context.sliceMatchers) {
+        builder.addMatcher(sM.matcher, sM.reducer)
+      }
       for (let m of actionMatchers) {
         builder.addMatcher(m.matcher, m.reducer)
       }
@@ -728,10 +747,11 @@ interface ReducerHandlingContext<State> {
     | CaseReducer<State, any>
     | Pick<
         AsyncThunkSliceReducerDefinition<State, any, any, any>,
-        'fulfilled' | 'rejected' | 'pending'
+        'fulfilled' | 'rejected' | 'pending' | 'settled'
       >
   >
   sliceCaseReducersByType: Record<string, CaseReducer<State, any>>
+  sliceMatchers: ActionMatcherDescriptionCollection<State>
   actionCreators: Record<string, Function>
 }
 
@@ -828,7 +848,7 @@ function handleThunkCaseReducerDefinition<State>(
   reducerDefinition: AsyncThunkSliceReducerDefinition<State, any, any, any>,
   context: ReducerHandlingContext<State>
 ) {
-  const { payloadCreator, fulfilled, pending, rejected, options } =
+  const { payloadCreator, fulfilled, pending, rejected, settled, options } =
     reducerDefinition
   const thunk = createAsyncThunk(type, payloadCreator, options as any)
   context.actionCreators[reducerName] = thunk
@@ -842,11 +862,15 @@ function handleThunkCaseReducerDefinition<State>(
   if (rejected) {
     context.sliceCaseReducersByType[thunk.rejected.type] = rejected
   }
+  if (settled) {
+    context.sliceMatchers.push({ matcher: thunk.settled, reducer: settled })
+  }
 
   context.sliceCaseReducersByName[reducerName] = {
     fulfilled: fulfilled || noop,
     pending: pending || noop,
     rejected: rejected || noop,
+    settled: settled || noop,
   }
 }
 

packages/toolkit/src/tests/createAsyncThunk.test.ts

@@ -37,6 +37,20 @@ describe('createAsyncThunk', () => {
     expect(thunkActionCreator.typePrefix).toBe('testType')
   })
 
+  it('includes a settled matcher', () => {
+    const thunkActionCreator = createAsyncThunk('testType', async () => 42)
+    expect(thunkActionCreator.settled).toEqual(expect.any(Function))
+    expect(thunkActionCreator.settled(thunkActionCreator.pending(''))).toBe(
+      false
+    )
+    expect(
+      thunkActionCreator.settled(thunkActionCreator.rejected(null, ''))
+    ).toBe(true)
+    expect(
+      thunkActionCreator.settled(thunkActionCreator.fulfilled(42, ''))
+    ).toBe(true)
+  })
+
   it('works without passing arguments to the payload creator', async () => {
     const thunkActionCreator = createAsyncThunk('testType', async () => 42)
 
@@ -513,7 +527,7 @@ describe('createAsyncThunk with abortController', () => {
         }
       )
 
-      expect(longRunningAsyncThunk()).toThrow("AbortController is not defined")
+      expect(longRunningAsyncThunk()).toThrow('AbortController is not defined')
     })
   })
 })
@@ -975,6 +989,7 @@ describe('meta', () => {
     expect(thunk.fulfilled).toEqual(expectFunction)
     expect(thunk.pending).toEqual(expectFunction)
     expect(thunk.rejected).toEqual(expectFunction)
+    expect(thunk.settled).toEqual(expectFunction)
     expect(thunk.fulfilled.type).toBe('a/fulfilled')
   })
 })

packages/toolkit/src/tests/createSlice.test.ts

@@ -576,6 +576,9 @@ describe('createSlice', () => {
     function rejected(state: any[], action: any) {
       state.push(['rejectedReducer', action])
     }
+    function settled(state: any[], action: any) {
+      state.push(['settledReducer', action])
+    }
 
     test('successful thunk', async () => {
       const slice = createSlice({
@@ -586,7 +589,7 @@ describe('createSlice', () => {
             function payloadCreator(arg, api) {
               return Promise.resolve('resolved payload')
             },
-            { pending, fulfilled, rejected }
+            { pending, fulfilled, rejected, settled }
           ),
         }),
       })
@@ -610,6 +613,13 @@ describe('createSlice', () => {
             payload: 'resolved payload',
           },
         ],
+        [
+          'settledReducer',
+          {
+            type: 'test/thunkReducers/fulfilled',
+            payload: 'resolved payload',
+          },
+        ],
       ])
     })
 
@@ -623,7 +633,7 @@ describe('createSlice', () => {
             function payloadCreator(arg, api): any {
               throw new Error('')
             },
-            { pending, fulfilled, rejected }
+            { pending, fulfilled, rejected, settled }
           ),
         }),
       })
@@ -647,6 +657,13 @@ describe('createSlice', () => {
             payload: undefined,
           },
         ],
+        [
+          'settledReducer',
+          {
+            type: 'test/thunkReducers/rejected',
+            payload: undefined,
+          },
+        ],
       ])
     })
 
@@ -669,6 +686,7 @@ describe('createSlice', () => {
               pending,
               fulfilled,
               rejected,
+              settled,
             }
           ),
         }),
@@ -687,6 +705,14 @@ describe('createSlice', () => {
             meta: { condition: true },
           },
         ],
+        [
+          'settledReducer',
+          {
+            type: 'test/thunkReducers/rejected',
+            payload: undefined,
+            meta: { condition: true },
+          },
+        ],
       ])
     })
 
@@ -699,13 +725,14 @@ describe('createSlice', () => {
             function payloadCreator(arg, api) {
               return Promise.resolve('resolved payload')
             },
-            { pending, fulfilled }
+            { pending, fulfilled, settled }
           ),
         }),
       })
 
       expect(slice.caseReducers.thunkReducers.pending).toBe(pending)
       expect(slice.caseReducers.thunkReducers.fulfilled).toBe(fulfilled)
+      expect(slice.caseReducers.thunkReducers.settled).toBe(settled)
       // even though it is not defined above, this should at least be a no-op function to match the TypeScript typings
       // and should be callable as a reducer even if it does nothing
       expect(() =>

packages/toolkit/src/tests/createSlice.typetest.ts

@@ -16,7 +16,7 @@ import type {
   ThunkDispatch,
   ValidateSliceCaseReducers,
 } from '@reduxjs/toolkit'
-import { configureStore } from '@reduxjs/toolkit'
+import { configureStore, isRejected } from '@reduxjs/toolkit'
 import { createAction, createSlice } from '@reduxjs/toolkit'
 import { expectExactType, expectType, expectUnknown } from './helpers'
 import { castDraft } from 'immer'
@@ -642,6 +642,15 @@ const value = actionCreators.anyKey
               expectType<TestArg>(action.meta.arg)
               expectType<SerializedError>(action.error)
             },
+            settled(state, action) {
+              expectType<TestState>(state)
+              expectType<TestArg>(action.meta.arg)
+              if (isRejected(action)) {
+                expectType<SerializedError>(action.error)
+              } else {
+                expectType<TestReturned>(action.payload)
+              }
+            },
           }
         ),
         testExplicitType: create.asyncThunk<
@@ -679,6 +688,16 @@ const value = actionCreators.anyKey
               expectType<SerializedError>(action.error)
               expectType<TestReject | undefined>(action.payload)
             },
+            settled(state, action) {
+              expectType<TestState>(state)
+              expectType<TestArg>(action.meta.arg)
+              if (isRejected(action)) {
+                expectType<SerializedError>(action.error)
+                expectType<TestReject | undefined>(action.payload)
+              } else {
+                expectType<TestReturned>(action.payload)
+              }
+            },
           }
         ),
         testPretyped: pretypedAsyncThunk(
@@ -702,6 +721,16 @@ const value = actionCreators.anyKey
               expectType<SerializedError>(action.error)
               expectType<TestReject | undefined>(action.payload)
             },
+            settled(state, action) {
+              expectType<TestState>(state)
+              expectType<TestArg>(action.meta.arg)
+              if (isRejected(action)) {
+                expectType<SerializedError>(action.error)
+                expectType<TestReject | undefined>(action.payload)
+              } else {
+                expectType<TestReturned>(action.payload)
+              }
+            },
           }
         ),
       }