matching-utilities

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

isAllOf higher-order function

isAllOf accepts one or more of: redux-toolkit action creator functions from createAction, createSlice, createAsyncThunk; type guard functions; or custom action creator functions with a .match property that is a type guard. It returns a type guard function that returns true if all of the provided functions match.

isAnyOf higher-order function

isAnyOf accepts the same inputs as isAllOf (redux-toolkit action creators, type guard functions, custom action creators with .match property). It returns a type guard function that returns true if at least one of the provided functions match.

isAsyncThunkAction matcher

isAsyncThunkAction is a higher-order function that returns a type guard function to check whether an action was created by createAsyncThunk. It accepts one or more thunk action creators as arguments.

isPending matcher

isPending is a higher-order function that returns a type guard function to check whether an action is a 'pending' action from the createAsyncThunk promise lifecycle. It accepts one or more thunk action creators as arguments.

isFulfilled matcher

isFulfilled is a higher-order function that returns a type guard function to check whether an action is a 'fulfilled' action from the createAsyncThunk promise lifecycle. It accepts one or more thunk action creators as arguments.

isRejected matcher

isRejected is a higher-order function that returns a type guard function to check whether an action is a 'rejected' action from the createAsyncThunk promise lifecycle. It accepts one or more thunk action creators as arguments.

isRejectedWithValue matcher

isRejectedWithValue is a higher-order function that returns a type guard function to check whether an action is a 'rejected' action from the createAsyncThunk promise lifecycle that was created using rejectWithValue. It accepts one or more thunk action creators as arguments.

createAsyncThunk-specific matchers can accept thunks or actions

All createAsyncThunk-specific matchers (isAsyncThunkAction, isPending, isFulfilled, isRejected, isRejectedWithValue) can either be called with one or more thunks as arguments to return a matcher function for that condition and thunks, or with one action to match for any thunk action with said condition.

Matching utilities use cases

Matching utilities like isAllOf and isAnyOf are primarily useful for builder.addMatcher() cases in createSlice and createReducer, as well as when writing custom middleware.

isAllOf and isAnyOf as TypeScript type guards

The function returned by isAllOf and isAnyOf can be used as a TypeScript type guard in contexts beyond builder.addMatcher(). When used as a type guard, isAllOf narrows to an intersection type (e.g., PayloadAction<Special> & PayloadAction<Interesting>) and isAnyOf narrows to a union type (e.g., PayloadAction<Special> | PayloadAction<Interesting>).

isAsyncThunkAction usage example

import { isAsyncThunkAction } from '@reduxjs/toolkit' import type { UnknownAction } from '@reduxjs/toolkit' import { requestThunk1, requestThunk2 } from '@virtual/matchers' const isARequestAction = isAsyncThunkAction(requestThunk1, requestThunk2) function handleRequestAction(action: UnknownAction) { if (isARequestAction(action)) { // action is an action dispatched by either `requestThunk1` or `requestThunk2` } } This example shows how to use isAsyncThunkAction to create a matcher that checks if an action was dispatched by one of multiple thunks.

isPending usage example

import { isPending } from '@reduxjs/toolkit' import type { UnknownAction } from '@reduxjs/toolkit' import { requestThunk1, requestThunk2 } from '@virtual/matchers' const isAPendingAction = isPending(requestThunk1, requestThunk2) function handlePendingAction(action: UnknownAction) { if (isAPendingAction(action)) { // action is a pending action dispatched by either `requestThunk1` or `requestThunk2` } } This example shows how to use isPending to create a matcher that checks if an action is a pending action from one of multiple thunks.

isFulfilled usage example

import { isFulfilled } from '@reduxjs/toolkit' import type { UnknownAction } from '@reduxjs/toolkit' import { requestThunk1, requestThunk2 } from '@virtual/matchers' const isAFulfilledAction = isFulfilled(requestThunk1, requestThunk2) function handleFulfilledAction(action: UnknownAction) { if (isAFulfilledAction(action)) { // action is a fulfilled action dispatched by either `requestThunk1` or `requestThunk2` } } This example shows how to use isFulfilled to create a matcher that checks if an action is a fulfilled action from one of multiple thunks.

isRejected usage example

import { isRejected } from '@reduxjs/toolkit' import type { UnknownAction } from '@reduxjs/toolkit' import { requestThunk1, requestThunk2 } from '@virtual/matchers' const isARejectedAction = isRejected(requestThunk1, requestThunk2) function handleRejectedAction(action: UnknownAction) { if (isARejectedAction(action)) { // action is a rejected action dispatched by either `requestThunk1` or `requestThunk2` } } This example shows how to use isRejected to create a matcher that checks if an action is a rejected action from one of multiple thunks.

isRejectedWithValue usage example

import { isRejectedWithValue } from '@reduxjs/toolkit' import type { UnknownAction } from '@reduxjs/toolkit' import { requestThunk1, requestThunk2 } from '@virtual/matchers' const isARejectedWithValueAction = isRejectedWithValue( requestThunk1, requestThunk2, ) function handleRejectedWithValueAction(action: UnknownAction) { if (isARejectedWithValueAction(action)) { // action is a rejected action dispatched by either `requestThunk1` or `requestThunk2` // where rejectWithValue was used } } This example shows how to use isRejectedWithValue to create a matcher that checks if an action is a rejected action created with rejectWithValue from one of multiple thunks.

isAllOf with builder.addMatcher example

import { createReducer, isAllOf } from '@reduxjs/toolkit' import { isSpecialAndInterestingThunk, initialState, isSpecial, isInteresting, } from '@virtual/matchers' const loadingReducer = createReducer(initialState, (builder) => { builder .addMatcher( isAllOf(isSpecialAndInterestingThunk.fulfilled, isSpecial), (state, action) => { state.isSpecial = true }, ) .addMatcher( isAllOf(isSpecialAndInterestingThunk.fulfilled, isInteresting), (state, action) => { state.isInteresting = true }, ) }) This example demonstrates using isAllOf to reduce boilerplate when adding matchers to a reducer.

isAnyOf as TypeScript type guard example

import { isAnyOf } from '@reduxjs/toolkit' import type { PayloadAction } from '@reduxjs/toolkit' import { Data, isSpecial, isInteresting } from '@virtual/matchers' const isSpecialOrInteresting = isAnyOf(isSpecial, isInteresting) function someFunction(action: PayloadAction<Data>) { if (isSpecialOrInteresting(action)) { // "action" will be correctly typed as: // `PayloadAction<Special> | PayloadAction<Interesting>` } } This example shows using isAnyOf as a TypeScript type guard that narrows to a union type.

isAsyncThunkAction function overloads

isAsyncThunkAction has three overloads: (1) (): (action: any) => action is UnknownAsyncThunkAction, (2) <AsyncThunks extends [AnyAsyncThunk, ...]>(...asyncThunks: AsyncThunks): (action: any) => action is ActionsFromAsyncThunk<AsyncThunks[number]>, (3) (action: any): action is UnknownAsyncThunkAction.

isPending function overloads

isPending has three overloads: (1) (): (action: any) => action is UnknownAsyncThunkPendingAction, (2) <AsyncThunks extends [AnyAsyncThunk, ...]>(...asyncThunks: AsyncThunks): (action: any) => action is PendingActionFromAsyncThunk<AsyncThunks[number]>, (3) (action: any): action is UnknownAsyncThunkPendingAction.

isFulfilled function overloads

isFulfilled has three overloads: (1) (): (action: any) => action is UnknownAsyncThunkFulfilledAction, (2) <AsyncThunks extends [AnyAsyncThunk, ...]>(...asyncThunks: AsyncThunks): (action: any) => action is FulfilledActionFromAsyncThunk<AsyncThunks[number]>, (3) (action: any): action is UnknownAsyncThunkFulfilledAction.

isRejectedWithValue function overloads

isRejectedWithValue has three overloads: (1) (): (action: any) => action is UnknownAsyncThunkRejectedAction, (2) <AsyncThunks extends [AnyAsyncThunk, ...]>(...asyncThunks: AsyncThunks): (action: any) => action is RejectedWithValueActionFromAsyncThunk<AsyncThunks[number]>, (3) (action: any): action is UnknownAsyncThunkRejectedAction.

isAnyOf function signature

isAnyOf<Matchers extends [Matcher<any>, ...]>(...matchers: Matchers): (action: any) => action is ActionFromMatcher<Matchers[number]>. Takes at least one matcher and returns a predicate function.

isAllOf function signature

isAllOf<Matchers extends [Matcher<any>, ...]>(...matchers: Matchers): (action: any) => action is UnionToIntersection<ActionFromMatcher<Matchers[number]>>. Takes at least one matcher and returns a predicate function for actions matching all matchers.

Give your agent this brain