@reduxjs/toolkit

constructor

constructor(code: string);

property code

code: string;

property message

message: string;

property name

name: string;

constructor

constructor(length: number);

constructor

constructor(...items: readonly unknown[]);

property [Symbol.species]

static readonly [Symbol.species]: any;

method concat

concat: {
    <AdditionalItems extends readonly unknown[]>(
        items: Tuple<AdditionalItems>
    ): Tuple<[...Items, ...AdditionalItems]>;
    <AdditionalItems extends readonly unknown[]>(items: AdditionalItems): Tuple<
        [...Items, ...AdditionalItems]
    >;
    <AdditionalItems extends readonly unknown[]>(
        ...items: AdditionalItems
    ): Tuple<[...Items, ...AdditionalItems]>;
};

method prepend

prepend: {
    <AdditionalItems extends readonly unknown[]>(
        items: Tuple<AdditionalItems>
    ): Tuple<[...AdditionalItems, ...Items]>;
    <AdditionalItems extends readonly unknown[]>(items: AdditionalItems): Tuple<
        [...AdditionalItems, ...Items]
    >;
    <AdditionalItems extends readonly unknown[]>(
        ...items: AdditionalItems
    ): Tuple<[...AdditionalItems, ...Items]>;
};

property isActionCreator

isActionCreator?: (action: unknown) => action is Function & {
    type?: unknown;
};

• The function to identify whether a value is an action creator. The default checks for a function with a static type property and match method.

call signature

<PT extends unknown>(payload: PT): PayloadAction<PT, T>;

• Calling this redux#ActionCreator with an argument will return a PayloadAction of type T with a payload of exactly the type of the argument.

call signature

(payload?: P): PayloadAction<P, T>;

• Calling this redux#ActionCreator with an argument will return a PayloadAction of type T with a payload of P. Calling it without an argument will return a PayloadAction with a payload of undefined.

call signature

(noArgument: void): PayloadAction<undefined, T>;

• Calling this redux#ActionCreator will return a PayloadAction of type T with a payload of undefined

call signature

(payload: P): PayloadAction<P, T>;

• Calling this redux#ActionCreator with an argument will return a PayloadAction of type T with a payload of P

call signature

(...args: Args): PayloadAction<P, T, M, E>;

• Calling this redux#ActionCreator with Args will return an Action with a payload of type P and (depending on the PrepareAction method used) a meta- and error property of types M and E respectively.

method addCase

addCase: {
    <ActionCreator extends TypedActionCreator<string>>(
        actionCreator: ActionCreator,
        reducer: CaseReducer<State, ReturnType<ActionCreator>>
    ): ActionReducerMapBuilder<State>;
    <Type extends string, A extends Action<Type>>(
        type: Type,
        reducer: CaseReducer<State, A>
    ): ActionReducerMapBuilder<State>;
};

• Adds a case reducer to handle a single exact action type.

  Parameter actionCreator

  Either a plain action type string, or an action creator generated by [createAction](./createAction) that can be used to determine the action type.

  Parameter reducer

  The actual case reducer function.

  Remarks

  All calls to builder.addCase must come before any calls to builder.addMatcher or builder.addDefaultCase.

method addDefaultCase

addDefaultCase: (reducer: CaseReducer<State, Action>) => {};

• Adds a "default case" reducer that is executed if no case reducer and no matcher reducer was executed for this action.

  Parameter reducer

  The fallback "default case" reducer function.

  Example 1

  ```ts import { createReducer } from '@reduxjs/toolkit' const initialState = { otherActions: 0 } const reducer = createReducer(initialState, builder => { builder // .addCase(...) // .addMatcher(...) .addDefaultCase((state, action) => { state.otherActions++ }) }) ```

method addMatcher

addMatcher: <A>(
    matcher: TypeGuard<A> | ((action: any) => boolean),
    reducer: CaseReducer<State, A extends Action ? A : A & Action>
) => Omit<ActionReducerMapBuilder<State>, 'addCase'>;

• Allows you to match your incoming actions against your own filter function instead of only the action.type property.

  Parameter matcher

  A matcher function. In TypeScript, this should be a [type predicate](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates) function

  Parameter reducer

  The actual case reducer function.

  Remarks

  If multiple matcher reducers match, all of them will be executed in the order they were defined in - even if a case reducer already matched. All calls to builder.addMatcher must come after any calls to builder.addCase and before any calls to builder.addDefaultCase.

  Example 1

  ```ts import { createAction, createReducer, AsyncThunk, UnknownAction, } from "@reduxjs/toolkit";

  type GenericAsyncThunk = AsyncThunk<unknown, unknown, any>;

  type PendingAction = ReturnType<GenericAsyncThunk["pending"]>; type RejectedAction = ReturnType<GenericAsyncThunk["rejected"]>; type FulfilledAction = ReturnType<GenericAsyncThunk["fulfilled"]>;

  const initialState: Record<string, string> = {}; const resetAction = createAction("reset-tracked-loading-state");

  function isPendingAction(action: UnknownAction): action is PendingAction { return typeof action.type === "string" && action.type.endsWith("/pending"); }

  const reducer = createReducer(initialState, (builder) => { builder .addCase(resetAction, () => initialState) // matcher can be defined outside as a type predicate function .addMatcher(isPendingAction, (state, action) => { state[action.meta.requestId] = "pending"; }) .addMatcher( // matcher can be defined inline as a type predicate function (action): action is RejectedAction => action.type.endsWith("/rejected"), (state, action) => { state[action.meta.requestId] = "rejected"; } ) // matcher can just return boolean and the matcher can receive a generic argument .addMatcher( (action) => action.type.endsWith("/fulfilled"), (state, action) => { state[action.meta.requestId] = "fulfilled"; } ); }); ```

call signature

(forkApi: ForkedTaskAPI): Promise<T>;

property selector

selector: {
    /**
     * Create a selector that guarantees that the slices injected will have a defined value when selector is run.
     *
     * ```ts
     * const selectBooleanWithoutInjection = (state: RootState) => state.boolean;
     * //                                                                ^? boolean | undefined
     *
     * const selectBoolean = rootReducer.inject(booleanSlice).selector((state) => {
     *   // if action hasn't been dispatched since slice was injected, this would usually be undefined
     *   // however selector() uses a Proxy around the first parameter to ensure that it evaluates to the initial state instead, if undefined
     *   return state.boolean;
     *   //           ^? boolean
     * })
     * ```
     *
     * Value passed to selectorFn will be a Proxy - use selector.original(proxy) to get original state value (useful for debugging)
     *
     * ```ts
     * const injectedReducer = rootReducer.inject(booleanSlice);
     * const selectBoolean = injectedReducer.selector((state) => {
     *   console.log(injectedReducer.selector.original(state).boolean) // undefined
     *   return state.boolean
     * })
     * ```
     */
    <Selector extends (state: DeclaredState, ...args: any[]) => unknown>(
        selectorFn: Selector
    ): (
        state: WithOptionalProp<
            Parameters<Selector>[0],
            Exclude<keyof DeclaredState, keyof InitialState>
        >,
        ...args: Tail<Parameters<Selector>>
    ) => ReturnType<Selector>;
    /**
     * Create a selector that guarantees that the slices injected will have a defined value when selector is run.
     *
     * ```ts
     * const selectBooleanWithoutInjection = (state: RootState) => state.boolean;
     * //                                                                ^? boolean | undefined
     *
     * const selectBoolean = rootReducer.inject(booleanSlice).selector((state) => {
     *   // if action hasn't been dispatched since slice was injected, this would usually be undefined
     *   // however selector() uses a Proxy around the first parameter to ensure that it evaluates to the initial state instead, if undefined
     *   return state.boolean;
     *   //           ^? boolean
     * })
     * ```
     *
     * If the reducer is nested inside the root state, a selectState callback can be passed to retrieve the reducer's state.
     *
     * ```ts
     *
     * interface LazyLoadedSlices {};
     *
     * const innerReducer = combineSlices(stringSlice).withLazyLoadedSlices<LazyLoadedSlices>();
     *
     * const rootReducer = combineSlices({ inner: innerReducer });
     *
     * type RootState = ReturnType<typeof rootReducer>;
     *
     * // elsewhere
     *
     * declare module "./reducer.ts" {
     *  interface LazyLoadedSlices extends WithSlice<typeof booleanSlice> {}
     * }
     *
     * const withBool = innerReducer.inject(booleanSlice);
     *
     * const selectBoolean = withBool.selector(
     *   (state) => state.boolean,
     *   (rootState: RootState) => state.inner
     * );
     * //    now expects to be passed RootState instead of innerReducer state
     *
     * ```
     *
     * Value passed to selectorFn will be a Proxy - use selector.original(proxy) to get original state value (useful for debugging)
     *
     * ```ts
     * const injectedReducer = rootReducer.inject(booleanSlice);
     * const selectBoolean = injectedReducer.selector((state) => {
     *   console.log(injectedReducer.selector.original(state).boolean) // possibly undefined
     *   return state.boolean
     * })
     * ```
     */
    <
        Selector extends (state: DeclaredState, ...args: any[]) => unknown,
        RootState
    >(
        selectorFn: Selector,
        selectState: (
            rootState: RootState,
            ...args: Tail<Parameters<Selector>>
        ) => WithOptionalProp<
            Parameters<Selector>[0],
            Exclude<keyof DeclaredState, keyof InitialState>
        >
    ): (
        state: RootState,
        ...args: Tail<Parameters<Selector>>
    ) => ReturnType<Selector>;
    /**
     * Returns the unproxied state. Useful for debugging.
     * @param state state Proxy, that ensures injected reducers have value
     * @returns original, unproxied state
     * @throws if value passed is not a state Proxy
     */
    original: (state: DeclaredState) => InitialState & Partial<DeclaredState>;
};

• Create a selector that guarantees that the slices injected will have a defined value when selector is run.

  const selectBooleanWithoutInjection = (state: RootState) => state.boolean;
  //                                                                ^? boolean | undefined
  
  const selectBoolean = rootReducer.inject(booleanSlice).selector((state) => {
    // if action hasn't been dispatched since slice was injected, this would usually be undefined
    // however selector() uses a Proxy around the first parameter to ensure that it evaluates to the initial state instead, if undefined
    return state.boolean;
    //           ^? boolean
  })

  If the reducer is nested inside the root state, a selectState callback can be passed to retrieve the reducer's state.

  export interface LazyLoadedSlices {};
  
  export const innerReducer = combineSlices(stringSlice).withLazyLoadedSlices<LazyLoadedSlices>();
  
  export const rootReducer = combineSlices({ inner: innerReducer });
  
  export type RootState = ReturnType<typeof rootReducer>;
  
  // elsewhere
  
  declare module "./reducer.ts" {
   export interface LazyLoadedSlices extends WithSlice<typeof booleanSlice> {}
  }
  
  const withBool = innerReducer.inject(booleanSlice);
  
  const selectBoolean = withBool.selector(
    (state) => state.boolean,
    (rootState: RootState) => state.inner
  );
  //    now expects to be passed RootState instead of innerReducer state

  Value passed to selectorFn will be a Proxy - use selector.original(proxy) to get original state value (useful for debugging)

  const injectedReducer = rootReducer.inject(booleanSlice);
  const selectBoolean = injectedReducer.selector((state) => {
    console.log(injectedReducer.selector.original(state).boolean) // possibly undefined
    return state.boolean
  })

method inject

inject: {
    <
        Sl extends {
            [K in keyof ExistingSliceLike<DeclaredState>]: ExistingSliceLike<DeclaredState>[K];
        }
    >(
        slice: Sl,
        config?: InjectConfig
    ): CombinedSliceReducer<InitialState, Id<DeclaredState & WithSlice<Sl>>>;
    <ReducerPath extends string, State>(
        slice: SliceLike<
            ReducerPath,
            State & (ReducerPath extends keyof DeclaredState ? never : State)
        >,
        config?: InjectConfig
    ): CombinedSliceReducer<
        InitialState,
        {
            [K in keyof (DeclaredState &
                WithSlice<SliceLike<ReducerPath, State>>)]: (DeclaredState &
                WithSlice<SliceLike<ReducerPath, State>>)[K];
        }
    >;
};

• Inject a slice.

  Accepts an individual slice, RTKQ API instance, or a "slice-like" { reducerPath, reducer } object.

  rootReducer.inject(booleanSlice)
  rootReducer.inject(baseApi)
  rootReducer.inject({ reducerPath: 'boolean' as const, reducer: newReducer }, { overrideExisting: true })

method withLazyLoadedSlices

withLazyLoadedSlices: <Lazy = {}>() => CombinedSliceReducer<
    InitialState,
    Id<DeclaredState & Partial<Lazy>>
>;

• Provide a type for slices that will be injected lazily.

  One way to do this would be with interface merging:

  export interface LazyLoadedSlices {}
  
  export const rootReducer = combineSlices(stringSlice).withLazyLoadedSlices<LazyLoadedSlices>();
  
  // elsewhere
  
  declare module './reducer' {
    export interface LazyLoadedSlices extends WithSlice<typeof booleanSlice> {}
  }
  
  const withBoolean = rootReducer.inject(booleanSlice);
  
  // elsewhere again
  
  declare module './reducer' {
    export interface LazyLoadedSlices {
      customName: CustomState
    }
  }
  
  const withCustom = rootReducer.inject({ reducerPath: "customName", reducer: customSlice.reducer })

property devTools

devTools?: boolean | DevToolsEnhancerOptions;

• Whether to enable Redux DevTools integration. Defaults to true.

  Additional configuration can be done by passing Redux DevTools options

property duplicateMiddlewareCheck

duplicateMiddlewareCheck?: boolean;

• Whether to check for duplicate middleware instances. Defaults to true.

property enhancers

enhancers?: (getDefaultEnhancers: GetDefaultEnhancers<M>) => E;

• The store enhancers to apply. See Redux's createStore(). All enhancers will be included before the DevTools Extension enhancer. If you need to customize the order of enhancers, supply a callback function that will receive a getDefaultEnhancers function that returns a Tuple, and should return a Tuple of enhancers (such as getDefaultEnhancers().concat(offline)). If you only need to add middleware, you can use the middleware parameter instead.

property middleware

middleware?: (getDefaultMiddleware: GetDefaultMiddleware<S>) => M;

• An array of Redux middleware to install, or a callback receiving getDefaultMiddleware and returning a Tuple of middleware. If not supplied, defaults to the set of middleware returned by getDefaultMiddleware().

  Example 1

  middleware: (gDM) => gDM().concat(logger, apiMiddleware, yourCustomMiddleware)

  See Also

  • https://redux-toolkit.js.org/api/getDefaultMiddleware#intended-usage

property preloadedState

preloadedState?: P;

• The initial state, same as Redux's createStore. You may optionally specify it to hydrate the state from the server in universal apps, or to restore a previously serialized user session. If you use combineReducers() to produce the root reducer function (either directly or indirectly by passing an object as reducer), this must be an object with the same shape as the reducer map keys.

property reducer

reducer: Reducer<S, A, P> | ReducersMapObject<S, A, P>;

• A single reducer function that will be used as the root reducer, or an object of slice reducers that will be passed to combineReducers().

property extra

extra?: ExtraArgument;

property onError

onError?: ListenerErrorHandler;

• Receives synchronous errors that are raised by listener and listenerOption.predicate.

property extraReducers

extraReducers?: (builder: ActionReducerMapBuilder<State>) => void;

• A callback that receives a *builder* object to define case reducers via calls to builder.addCase(actionCreatorOrType, reducer).

  Example 1

  ```ts import { createAction, createSlice, Action } from '@reduxjs/toolkit' const incrementBy = createAction('incrementBy') const decrement = createAction('decrement')

  interface RejectedAction extends Action { error: Error }

  function isRejectedAction(action: Action): action is RejectedAction { return action.type.endsWith('rejected') }

  createSlice({ name: 'counter', initialState: 0, reducers: {}, extraReducers: builder => { builder .addCase(incrementBy, (state, action) => { // action is inferred correctly here if using TS }) // You can chain calls, or have separate builder.addCase() lines each time .addCase(decrement, (state, action) => {}) // You can match a range of action types .addMatcher( isRejectedAction, // action will be inferred as a RejectedAction due to isRejectedAction being defined as a type guard (state, action) => {} ) // and provide a default case if no other handlers matched .addDefaultCase((state, action) => {}) } }) ```

property initialState

initialState: State | (() => State);

• The initial state that should be used when the reducer is called the first time. This may also be a "lazy initializer" function, which should return an initial state value when called. This will be used whenever the reducer is called with undefined as its state value, and is primarily useful for cases like reading initial state from localStorage.

property name

name: Name;

• The slice's name. Used to namespace the generated action types.

property reducerPath

reducerPath?: ReducerPath;

• The slice's reducer path. Used when injecting into a combined slice reducer.

property reducers

reducers:
    | ValidateSliceCaseReducers<State, CR>
    | ((creators: ReducerCreators<State>) => CR);

• A mapping from action types to action-type-specific *case reducer* functions. For every action type, a matching action creator will be generated using createAction().

property selectors

selectors?: Selectors;

• A map of selectors that receive the slice's state and any additional arguments, and return a result.

property actionCreators

actionCreators?:
    | ActionCreator<any>[]
    | {
          [key: string]: ActionCreator<any>;
      };