@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 devTools

devTools?: boolean | DevToolsOptions;

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

  Additional configuration can be done by passing Redux DevTools options

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>;
      };

• action creators functions to be available in the Dispatcher.

property actionsAllowlist

actionsAllowlist?: string | string[];

• *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers). If actionsAllowlist specified, actionsDenylist is ignored.

property actionSanitizer

actionSanitizer?: <A extends Action>(action: A, id: number) => A;

• function which takes action object and id number as arguments, and should return action object back.

property actionsDenylist

actionsDenylist?: string | string[];

• *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers). If actionsAllowlist specified, actionsDenylist is ignored.

property autoPause

autoPause?: boolean;

• auto pauses when the extension’s window is not opened, and so has zero impact on your app when not in use. Not available for Redux enhancer (as it already does it but storing the data to be sent).

  false

property features

features?: {
    /**
     * start/pause recording of dispatched actions
     */
    pause?: boolean;
    /**
     * lock/unlock dispatching actions and side effects
     */
    lock?: boolean;
    /**
     * persist states on page reloading
     */
    persist?: boolean;
    /**
     * export history of actions in a file
     */
    export?: boolean | 'custom';
    /**
     * import history of actions from a file
     */
    import?: boolean | 'custom';
    /**
     * jump back and forth (time travelling)
     */
    jump?: boolean;
    /**
     * skip (cancel) actions
     */
    skip?: boolean;
    /**
     * drag and drop actions in the history list
     */
    reorder?: boolean;
    /**
     * dispatch custom actions or action creators
     */
    dispatch?: boolean;
    /**
     * generate tests for the selected actions
     */
    test?: boolean;
};

• If you want to restrict the extension, specify the features you allow. If not specified, all of the features are enabled. When set as an object, only those included as true will be allowed. Note that except true/false, import and export can be set as custom (which is by default for Redux enhancer), meaning that the importing/exporting occurs on the client side. Otherwise, you'll get/set the data right from the monitor part.

property latency

latency?: number;

• if more than one action is dispatched in the indicated interval, all new actions will be collected and sent at once. It is the joint between performance and speed. When set to 0, all actions will be sent instantly. Set it to a higher value when experiencing perf issues (also maxAge to a lower value).

  500 ms.

property maxAge

maxAge?: number;

• (> 1) - maximum allowed actions to be stored in the history tree. The oldest actions are removed once maxAge is reached. It's critical for performance.

  50

property name

name?: string;

• the instance name to be showed on the monitor page. Default value is document.title. If not specified and there's no document title, it will consist of tabId and instanceId.

property pauseActionType

pauseActionType?: string;

• if specified, whenever clicking on Pause recording button and there are actions in the history log, will add this action type. If not specified, will commit when paused. Available only for Redux enhancer.

  "@@PAUSED""

property predicate

predicate?: <S, A extends Action>(state: S, action: A) => boolean;

• called for every action before sending, takes state and action object, and returns true in case it allows sending the current data to the monitor. Use it as a more advanced version of actionsDenylist/actionsAllowlist parameters.

property serialize

serialize?:
    | boolean
    | {
          /**
           * - `undefined` - will use regular `JSON.stringify` to send data (it's the fast mode).
           * - `false` - will handle also circular references.
           * - `true` - will handle also date, regex, undefined, error objects, symbols, maps, sets and functions.
           * - object, which contains `date`, `regex`, `undefined`, `error`, `symbol`, `map`, `set` and `function` keys.
           *   For each of them you can indicate if to include (by setting as `true`).
           *   For `function` key you can also specify a custom function which handles serialization.
           *   See [`jsan`](https://github.com/kolodny/jsan) for more details.
           */
          options?:
              | undefined
              | boolean
              | {
                    date?: true;
                    regex?: true;
                    undefined?: true;
                    error?: true;
                    symbol?: true;
                    map?: true;
                    set?: true;
                    function?: true | ((fn: (...args: any[]) => any) => string);
                };
          /**
           * [JSON replacer function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#The_replacer_parameter) used for both actions and states stringify.
           * In addition, you can specify a data type by adding a [`__serializedType__`](https://github.com/zalmoxisus/remotedev-serialize/blob/master/helpers/index.js#L4)
           * key. So you can deserialize it back while importing or persisting data.
           * Moreover, it will also [show a nice preview showing the provided custom type](https://cloud.githubusercontent.com/assets/7957859/21814330/a17d556a-d761-11e6-85ef-159dd12f36c5.png):
           */
          replacer?: (key: string, value: unknown) => any;
          /**
           * [JSON `reviver` function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter)
           * used for parsing the imported actions and states. See [`remotedev-serialize`](https://github.com/zalmoxisus/remotedev-serialize/blob/master/immutable/serialize.js#L8-L41)
           * as an example on how to serialize special data types and get them back.
           */
          reviver?: (key: string, value: unknown) => any;
          /**
           * Automatically serialize/deserialize immutablejs via [remotedev-serialize](https://github.com/zalmoxisus/remotedev-serialize).
           * Just pass the Immutable library. It will support all ImmutableJS structures. You can even export them into a file and get them back.
           * The only exception is `Record` class, for which you should pass this in addition the references to your classes in `refs`.
           */
          immutable?: any;
          /**
           * ImmutableJS `Record` classes used to make possible restore its instances back when importing, persisting...
           */
          refs?: any;
      };

• Customizes how actions and state are serialized and deserialized. Can be a boolean or object. If given a boolean, the behavior is the same as if you were to pass an object and specify options as a boolean. Giving an object allows fine-grained customization using the replacer and reviver functions.

property shouldCatchErrors

shouldCatchErrors?: boolean;

• if specified as true, whenever there's an exception in reducers, the monitors will show the error message, and next actions will not be dispatched.

  false

property shouldHotReload

shouldHotReload?: boolean;

• if set to false, will not recompute the states on hot reloading (or on replacing the reducers). Available only for Redux enhancer.

  true

property shouldRecordChanges

shouldRecordChanges?: boolean;

• if specified as false, it will not record the changes till clicking on Start recording button. Available only for Redux enhancer, for others use autoPause.

  true

property shouldStartLocked

shouldStartLocked?: boolean;

• if specified as true, it will not allow any non-monitor actions to be dispatched till clicking on Unlock changes button. Available only for Redux enhancer.

  false

property stateSanitizer

stateSanitizer?: <S>(state: S, index: number) => S;

• function which takes state object and index as arguments, and should return state object back.

property trace

trace?: boolean | (<A extends Action>(action: A) => string);

• Set to true or a stacktrace-returning function to record call stack traces for dispatched actions. Defaults to false.

property traceLimit

traceLimit?: number;

• The maximum number of stack trace entries to record per action. Defaults to 10.