Logo for jsDocs.io

redux-devtools-extension

  • Version 2.13.9
  • Published
  • 13.6 kB
  • No dependencies
  • MIT license

Install

npm i redux-devtools-extension
yarn add redux-devtools-extension
pnpm add redux-devtools-extension

Overview

Wrappers for Redux DevTools Extension.

Index

Functions

Interfaces

Functions

function composeWithDevTools

composeWithDevTools: {
    <StoreExt, StateExt>(
        ...funcs: Array<StoreEnhancer<StoreExt>>
    ): StoreEnhancer<StoreExt>;
    (options: EnhancerOptions): any;
};

    function devToolsEnhancer

    devToolsEnhancer: (options: EnhancerOptions) => StoreEnhancer<any>;

      Interfaces

      interface EnhancerOptions

      interface EnhancerOptions {}

        property actionCreators

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

        • action creators functions to be available in the Dispatcher.

        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 actionsBlacklist

        actionsBlacklist?: string | string[];

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

        property actionsWhitelist

        actionsWhitelist?: string | string[];

        • *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers). If actionsWhitelist specified, actionsBlacklist 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 actionsBlacklist/actionsWhitelist parameters.

        property serialize

        serialize?:
            | boolean
            | {
                  date?: boolean;
                  regex?: boolean;
                  undefined?: boolean;
                  error?: boolean;
                  symbol?: boolean;
                  map?: boolean;
                  set?: boolean;
                  function?: boolean | Function;
              };

        • - 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.

        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.

        Package Files (1)

        Dependencies (0)

        No dependencies.

        Dev Dependencies (0)

        No dev dependencies.

        Peer Dependencies (1)

        Badge

        To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

        You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/redux-devtools-extension.

        • Markdown
          [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/redux-devtools-extension)
        • HTML
          <a href="https://www.jsdocs.io/package/redux-devtools-extension"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>