Redux DevTools Extension

https://github.com/zalmoxisus/redux-devtools-extension
Admin
A browser extension that provides powerful debugging and inspection capabilities for Redux...
Tokens:14,235
Snippets:61
Trust Score:7.6
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Redux DevTools Extension

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/README.md

Installs the redux-devtools-extension package using npm. This is the first step to integrating the extension into your Redux application.

```bash
npm install --save redux-devtools-extension
```

--------------------------------

### Install atom-url-handler for Linux

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Features/Trace.md

This command shows how to install the 'atom-url-handler' package using npm, which is recommended for using the editor integration feature of Redux DevTools Extension on Linux systems.

```bash
npm install -g atom-url-handler
```

--------------------------------

### Install Redux DevTools Extension (npm)

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/README.md

This command installs the Redux DevTools Extension package using npm, a common package manager for Node.js. This is typically the first step before integrating the extension into a Redux application.

```bash
npm install redux-devtools-extension
```

--------------------------------

### Install Redux DevTools Extension (yarn)

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/README.md

This command installs the Redux DevTools Extension package using yarn, an alternative package manager for Node.js. It achieves the same result as the npm installation.

```bash
yarn add redux-devtools-extension
```

--------------------------------

### Basic Redux Store Setup with DevTools

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/README.md

Demonstrates the basic integration of the Redux DevTools Extension into a Redux store. It uses `composeWithDevTools` to apply middleware and other store enhancers.

```javascript
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));
```

--------------------------------

### Installing Redux DevTools Extension via npm

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/README.md

This command shows how to install the `redux-devtools-extension` package as a project dependency using npm. This package provides convenient functions for integrating the Redux DevTools.

```bash
npm install --save redux-devtools-extension
```

--------------------------------

### Using `redux-devtools-extension` npm Package

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/README.md

This snippet illustrates how to install and use the `redux-devtools-extension` npm package to simplify the Redux DevTools integration. It utilizes the `composeWithDevTools` function for a cleaner setup with middleware and enhancers.

```javascript
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));
```

--------------------------------

### Initialize Redux DevTools Extension with Options

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md

Demonstrates how to integrate the Redux DevTools Extension into a Redux store using `redux-devtools-extension`. It shows the usage of `composeWithDevTools` with custom options to enhance the store setup.

```javascript
import { composeWithDevTools } from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools(options);
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
    applyMiddleware(...middleware),
    // other store enhancers if any
  ));
```

--------------------------------

### Redux Store Setup with DevTools Options

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/README.md

Shows how to configure the Redux DevTools Extension with specific options by creating a custom enhancer. This allows for fine-grained control over the extension's behavior.

```javascript
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools({
  // Specify here name, actionsBlacklist, actionsCreators and other options
});
const store = createStore(reducer, composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));
```

--------------------------------

### Integrate Cycle.js with @culli/store

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Integrations.md

This example demonstrates integrating Redux DevTools with Cycle.js using the `@culli/store` package. It shows how to configure the `Store` driver with `ReduxDevtools` and pass initial state.

```javascript
import {run} from "@cycle/most-run"
import {makeDOMDriver as DOM} from "@cycle/dom"
import Store, {ReduxDevtools} from "@culli/store"
import App, {newId} from "./App"


run(App, {
  DOM: DOM("#app"),
  Store: Store(ReduxDevtools({items: [{id: newId(), num: 0}, {id: newId(), num: 0}]}))
})
```

--------------------------------

### Configuring `composeWithDevTools` with Options

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/README.md

This example shows how to configure the `composeWithDevTools` function from the `redux-devtools-extension` npm package with specific options. It demonstrates passing an options object to `composeWithDevTools` to customize the extension's behavior.

```javascript
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools({
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));
```

--------------------------------

### Advanced Store Setup with Redux DevTools Extension

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/README.md

This snippet demonstrates how to integrate the Redux DevTools Extension into a Redux store setup that uses middleware and enhancers. It shows how to conditionally use the extension's compose function or the default Redux compose function when the extension is not available.

```javascript
import { createStore, applyMiddleware, compose } from 'redux';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
    applyMiddleware(...middleware)
  ));
```

--------------------------------

### Configuring Redux DevTools Extension Options

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/README.md

This example shows how to configure the Redux DevTools Extension by passing options such as name, actionsBlacklist, actionsCreators, and serialize. It defines a composeEnhancers function that includes these options and then uses it to create the Redux store.

```javascript
const composeEnhancers = 
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension's options like name, actionsBlacklist, actionsCreators, serialize...
    }) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
);
const store = createStore(reducer, enhancer);
```

--------------------------------

### Integrate MobX with Mobx-remotedev

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Integrations.md

This example demonstrates how to integrate MobX with Redux DevTools using the `mobx-remotedev` library. It shows how to import `remotedev` and apply it to an observable store or class.

```javascript
import remotedev from 'mobx-remotedev';
// or import remotedev from 'mobx-remotedev/lib/dev'
// in case you want to use it in production or don't have process.env.NODE_ENV === 'development'

const appStore = observable({
  // ...
});

// Or
class appStore {
    // ...
}

export default remotedev(appStore);
```

--------------------------------

### Redux DevTools Actions Blacklist Example

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md

Shows how to use `actionsBlacklist` to prevent specific action types from being sent to the Redux DevTools.

```javascript
createStore(reducer, remotedev({
  sendTo: 'http://localhost:8000',
  actionsBlacklist: 'SOME_ACTION'
  // or actionsBlacklist: ['SOME_ACTION', 'SOME_OTHER_ACTION']
  // or just actionsBlacklist: 'SOME_' to omit both
}))
```

--------------------------------

### Integrate Horizon with horizon-remotedev

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Integrations.md

This example demonstrates integrating Redux DevTools with Horizon.js using the `horizon-remotedev` library. It shows how to set up a Horizon connection and then pass the Horizon instance to `hzRemotedev` for monitoring.

```javascript
// import hzRemotedev from 'horizon-remotedev';
// or import hzRemotedev from 'horizon-remotedev/lib/dev'
// in case you want to use it in production or don't have process.env.NODE_ENV === 'development'

//Setup Horizon connection
const horizon = Horizon();

// ...
// Specify the horizon instance to monitor
hzRemotedev(horizon("react_messages"))
```

--------------------------------

### Using `logOnlyInProduction` for Production Builds

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/README.md

This example demonstrates how to use the `logOnlyInProduction` enhancer from `redux-devtools-extension` to include the extension in production builds but only for logging purposes. It's useful for monitoring without full interactivity in production.

```javascript
import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction';

const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(
  // options like actionSanitizer, stateSanitizer
));
```

--------------------------------

### Redux DevTools Predicate Configuration

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md

Example of using a predicate function to conditionally allow actions to be sent to the Redux DevTools based on state and action properties.

```javascript
const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  predicate: (state, action) => state.dev.logLevel === VERBOSE && !action.forwarded
}));
```

--------------------------------

### Serialize ImmutableJS Records with Refs

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md

This example shows how to serialize ImmutableJS `Record` classes by providing their references in the `serialize.refs` array, enabling proper restoration of Record instances.

```javascript
import Immutable from 'immutable';
// ...

const ABRecord = Immutable.Record({ a:1, b:2 });
const myRecord = new ABRecord({ b:3 }); // used in the reducers

const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  serialize: {
    immutable: Immutable,
    refs: [ABRecord]
  }
}));
```

--------------------------------

### Serialize with Mori Data Structures

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md

This example shows how to use a custom `replacer` function with the `serialize` option to handle Mori data structures, converting them to plain JavaScript objects for serialization.

```javascript
const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  serialize: {
    replacer: (key, value) => value && mori.isMap(value) ? mori.toJs(value) : value
  }
}));
```

--------------------------------

### Integrate Ember with ember-redux

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Integrations.md

This snippet shows how to enable Redux DevTools extension for an Ember application using `ember-redux`. It utilizes `window.__REDUX_DEVTOOLS_EXTENSION__` to get the enhancer and `compose` from Redux.

```javascript
//app/enhancers/index.js
import { compose } from 'redux';
var devtools = window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f;
export default compose(devtools);
```

--------------------------------

### Redux Component State Sanitization

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md

Example of a Redux reducer that sanitizes component state, ensuring only specific data is sent to the DevTools.

```javascript
function component(
  state = { component: null, toJSON: () => ({ component: '[React]' }) }, 
  action
) {
  switch (action.type) {
    case 'ADD_COMPONENT': return { component: action.component };
    default: return state;
  }
}
```

--------------------------------

### Inspect React States with remotedev-react-state

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Integrations.md

This example shows how to connect a React component to Redux DevTools using the `remotedev-react-state` library. The `connectToDevTools` function is called within `componentWillMount` to establish the connection.

```javascript
import connectToDevTools from 'remotedev-react-state'

componentWillMount() {
    // Connect to devtools after setup initial state
    connectToDevTools(this/*, options */)
  }
```

--------------------------------

### Deserialize Custom Data Types

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md

This example shows how to implement a `reviver` function to deserialize custom data types, such as ImmutableJS Lists, that were previously serialized with a `__serializedType__` key.

```javascript
const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  serialize: {
    reviver: (key, value) => {
      if (typeof value === 'object' && value !== null && '__serializedType__'  in value) {
        switch (value.__serializedType__) {
          case 'ImmutableList': return Immutable.List(value.data);
        }
      }
    }
  }
}));
```

--------------------------------

### Integrate Angular @ngrx/store with @ngrx/store-devtools

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Integrations.md

This example demonstrates integrating Redux DevTools with Angular's NgRx store using `@ngrx/store-devtools`. The `StoreDevtoolsModule.instrument` method is used to enable the extension with optional configuration like `maxAge`.

```typescript
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    StoreModule.forRoot(rootReducer),
    // Instrumentation must be imported after importing StoreModule (config is optional)
    StoreDevtoolsModule.instrument({
      maxAge: 5
    })
  ]
})
export class AppModule { }
```

--------------------------------

### Integrate Redux DevTools Extension with ESLint Exception

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/README.md

This example shows how to integrate the Redux DevTools Extension while handling potential ESLint warnings related to underscore-dangled properties. By wrapping the `createStore` call with `/* eslint-disable no-underscore-dangle */` and `/* eslint-enable */`, you can temporarily disable the ESLint rule for this specific line, allowing the use of `window.__REDUX_DEVTOOLS_EXTENSION__`.

```javascript
/* eslint-disable no-underscore-dangle */
  const store = createStore(
   reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
/* eslint-enable */
```

--------------------------------

### Custom Trace Function for Redux DevTools

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Features/Trace.md

This example shows how to provide a custom function for the 'trace' option in Redux DevTools. This is useful for handling edge cases where the default stack trace generation might fail, such as with setTimeout. The function receives the action object and should return the stack trace string.

```javascript
const store = createStore(reducer, /* preloadedState */, devToolsEnhancer({
  trace: (action) => {
    // Custom logic to get stack trace
    return new Error().stack;
  }
}));
```

--------------------------------

### Configure Aurelia Store with Redux DevTools Options

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Integrations.md

This TypeScript code demonstrates how to configure the `aurelia-store` plugin to use the Redux DevTools Extension. It shows how to pass initial state and optional `devToolsOptions` during the Aurelia application's configuration.

```typescript
import {Aurelia} from 'aurelia-framework';
import {initialState} from './state';
  
export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources');
  
    ...
  
  aurelia.use.plugin('aurelia-store', {
    initialState,
    devToolsOptions: { // optional
      ... // see https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md
    },
  });
  
  aurelia.start().then(() => aurelia.setRoot());
}

```

--------------------------------

### Compose Enhancers with Redux DevTools

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md

Demonstrates how to correctly order store enhancers, including the Redux DevTools extension, when using `createStore` and `compose`. This is crucial for ensuring proper functionality, especially when other enhancers like `batchedSubscribe` have specific ordering requirements.

```javascript
const store = createStore(reducer, preloadedState, compose(
  // applyMiddleware(thunk),
  window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : noop => noop,
  batchedSubscribe(/* ... */)
));
```

--------------------------------

### Connect Reductive Dev Tools to Redux DevTools Extension

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Integrations.md

This ReasonML code snippet shows how to connect the `reductive-dev-tools` library to the Redux DevTools Extension. It defines a `storeEnhancer` using `ReductiveDevTools.Connectors.reductiveEnhancer` with custom options.

```reason
let storeEnhancer =
  ReductiveDevTools.(
    Connectors.reductiveEnhancer(
      Extension.enhancerOptions(~name="MyApp", ()),
    )
  );
  
let storeCreator = storeEnhancer @@ Reductive.Store.create;

```

--------------------------------

### Integrate Swift Katana Monitor with Redux DevTools

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Integrations.md

This Swift code snippet shows how to integrate the KatanaMonitor library with the Redux DevTools Extension for debugging. It appends `MonitorMiddleware.create` to the store's middleware during debug builds.

```swift
import KatanaMonitor

var middleware: [StoreMiddleware] = [
// other middleware
]

#if DEBUG
middleware.append(MonitorMiddleware.create(using: .defaultConfiguration))
#endif

```

--------------------------------

### Configure Redux DevTools Extension Compose for Universal Apps

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/README.md

This code snippet demonstrates how to configure `window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__` for universal (isomorphic) Redux applications. It checks if `window` is defined before accessing the extension, preventing errors in server-side rendering environments. The `compose` function from Redux is used to combine enhancers.

```javascript
const composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
```

--------------------------------

### Open Redux DevTools Programmatically

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/FAQ.md

Demonstrates how to programmatically open the Redux DevTools extension. It's recommended to conditionally call this function to avoid a poor developer experience. Refer to the API documentation for more details.

```javascript
window.__REDUX_DEVTOOLS_EXTENSION__.open();
```

--------------------------------

### Connect Fable/Elmish to Redux DevTools Extension

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Integrations.md

This F# code demonstrates how to connect a Fable/Elmish application to the Redux DevTools Extension. It uses `Program.withDebugger` to connect to a Chrome extension or `Program.withDebuggerAt` to connect to a remote server.

```fsharp
open Elmish.Debug

Program.mkProgram init update view
|> Program.withDebugger // connect to a devtools monitor via Chrome extension if available
|> Program.run

```

```fsharp
open Elmish.Debug

Program.mkProgram init update view
|> Program.withDebuggerAt (Remote("localhost",8000)) // connect to a server running on localhost:8000
|> Program.run

```

--------------------------------

### Apply Multiple Redux DevTools Enhancers

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Recipes.md

Illustrates how to apply multiple instances of the `devToolsEnhancer` from the `redux-devtools-extension/logOnly` package to a Redux store. Each enhancer can be configured with unique options like `instanceID`, `name`, `actionsBlacklist`, or `actionsWhitelist`.

```javascript
import { createStore, compose } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension/logOnly';

const store = createStore(reducer, /* preloadedState, */ compose(
devToolsEnhancer({
  instaceID: 1,
  name: 'Blacklisted',
  actionsBlacklist: '...'
}),
devToolsEnhancer({
  instaceID: 2,
  name: 'Whitelisted',
  actionsWhitelist: '...'
})
));
```

--------------------------------

### Use Redux DevTools Extension in TypeScript

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Recipes.md

Demonstrates how to integrate the Redux DevTools Extension into a TypeScript project. It shows two methods: using the npm package with TypeScript definitions or casting `window` to `any`. It also includes a type guard for safer access to the extension.

```javascript
const store = createStore(
  rootReducer,
  initialState,
  (window as any).__REDUX_DEVTOOLS_EXTENSION__ &&
    (window as any).__REDUX_DEVTOOLS_EXTENSION__()
);
```

```typescript
import { createStore, StoreEnhancer } from "redux";

// ... 

type WindowWithDevTools = Window & { __REDUX_DEVTOOLS_EXTENSION__: () => StoreEnhancer<unknown, {}> }

const isReduxDevtoolsExtenstionExist = 
(arg: Window | WindowWithDevTools): 
  arg is WindowWithDevTools  => {
    return  '__REDUX_DEVTOOLS_EXTENSION__' in arg;
}

// ...

const store = createStore(rootReducer, initialState,
  isReduxDevtoolsExtenstionExist(window) ? 
  window.__REDUX_DEVTOOLS_EXTENSION__() : undefined)
```

--------------------------------

### Configuring `composeWithDevTools` for Production Logging

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/README.md

This snippet shows how to configure `composeWithDevTools` from `redux-devtools-extension/logOnlyInProduction` for production environments. It allows specifying options like actionSanitizer and stateSanitizer for controlled logging.

```javascript
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';

const composeEnhancers = composeWithDevTools({
  // options like actionSanitizer, stateSanitizer
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));
```

--------------------------------

### Export State from Browser Console

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Recipes.md

Shows how to access and export the current state of your Redux store from the browser's developer console using the `liftedStore.getState()` method provided by the Redux DevTools Extension.

```javascript
store.liftedStore.getState()
```

--------------------------------

### Integrate Redux DevTools Extension with Redux Store

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/README.md

This snippet shows how to integrate the Redux DevTools Extension with a basic Redux store. It uses `window.__REDUX_DEVTOOLS_EXTENSION__` to connect the store to the extension, enabling debugging capabilities. Ensure you have Redux version 3.1.0 or later for this enhancer to work as the last argument.

```javascript
const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
```

--------------------------------

### Integrate Freezer with freezer-redux-devtools

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Integrations.md

This snippet shows how to enable Redux DevTools extension for Freezer.js state management using the `freezer-redux-devtools` middleware. It calls `supportChromeExtension` with the Freezer state object.

```javascript
import React, { Component } from 'react';
import { supportChromeExtension } from 'freezer-redux-devtools/freezer-redux-middleware';
import Freezer from 'freezer-js';

// Our state is a freezer object
var State = new Freezer({hello: 'world'});

// Enable the extension
supportChromeExtension( State );
```

--------------------------------

### Configure ImmutableJS Serialization

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md

This snippet demonstrates how to enable automatic serialization and deserialization of ImmutableJS data structures by passing the Immutable library reference to the `serialize.immutable` option.

```javascript
import Immutable from 'immutable'; // https://facebook.github.io/immutable-js/
// ...
const composeEnhancers = typeof window === 'object' && typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ !== 'undefined' ?
 window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
   serialize: {
     immutable: Immutable
   }
}) : compose;
```

--------------------------------

### Redux Counter State Transformation

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md

Demonstrates transforming state values before sending them to the DevTools, such as multiplying a counter value.

```javascript
function counter(
  state = { count: 0, toJSON: function (){ return { conter: this.count * 10 }; } },
  action
) {
  switch (action.type) {
    case 'INCREMENT': return { count: state.count + 1 };
    default: return state;
  }
}
```

--------------------------------

### Configure Redux DevTools Extension Compose with TypeScript

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/README.md

This snippet shows how to configure `window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__` for Redux applications using TypeScript. It uses a type assertion `(window as any)` to access the extension property, which is necessary because the extension's API might not be directly recognized by TypeScript's type definitions. Alternatively, using the `redux-devtools-extension` npm package provides proper type definitions.

```typescript
const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
```

--------------------------------

### Enable Tracing in Redux DevTools

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Features/Trace.md

This snippet demonstrates how to enable the 'trace' option in Redux DevTools Extension to view action callstacks. It involves setting the 'trace' parameter to 'true' when configuring the extension.

```javascript
import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension';

const store = createStore(reducer, /* preloadedState */, devToolsEnhancer({ trace: true }));
```

--------------------------------

### Connect and Communicate with Redux DevTools Extension

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Methods.md

Establishes a connection with the Redux DevTools Extension, allowing for real-time communication. It enables subscribing to state changes, sending initial state, and dispatching actions. This is an advanced API typically used when not relying on the standard Redux enhancer.

```javascript
const devTools = window.__REDUX_DEVTOOLS_EXTENSION__.connect(config);
devTools.subscribe((message) => {
  if (message.type === 'DISPATCH' && message.state) {
    console.log('DevTools requested to change the state to', message.state);
  }
});
devTools.init({ value: 'initial state' });
devTools.send('change state', { value: 'state changed' })
```

--------------------------------

### Inspect React Props with react-inspect-props

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Integrations.md

This snippet demonstrates how to use the `react-inspect-props` library with `recompose` to inspect React component props. It composes `withState` for managing local state and `inspectProps` for the debugging functionality.

```javascript
import { compose, withState } from 'recompose'
import { inspectProps } from 'react-inspect-props'

compose(
  withState('count', 'setCount', 0),
  inspectProps('Counter inspector')
)(Counter)
```

--------------------------------

### Configure Serialization with Custom Options

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md

This snippet demonstrates how to configure the `serialize` option with custom settings for handling `undefined` and `function` types during Redux state serialization.

```javascript
const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  serialize: {
    options: {
     undefined: true,
     function: function(fn) { return fn.toString() }
    }
  }
}));
```

--------------------------------

### Using `devToolsEnhancer` without Middleware

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/README.md

This snippet shows a simplified way to use the Redux DevTools Extension when no other enhancers or middleware are applied. It directly uses the `devToolsEnhancer` function, passing any desired options.

```javascript
import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension';

const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
));
```

--------------------------------

### Configure Trace Limit in Redux DevTools

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Features/Trace.md

This code illustrates how to set the 'traceLimit' option for Redux DevTools Extension. This parameter controls the maximum number of stack frames to serialize, helping to manage memory usage and override browser-imposed limits on stack trace length.

```javascript
const store = createStore(reducer, /* preloadedState */, devToolsEnhancer({
  trace: true,
  traceLimit: 20 // Example: Set limit to 20 frames
}));
```

--------------------------------

### Enable Serialization for Unserializable Data

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md

Configure the Redux DevTools Extension to serialize data that `JSON.stringify` cannot handle, such as dates, regex, undefined, errors, symbols, maps, sets, and functions. This is achieved by setting the `serialize` parameter to `true` in the extension's configuration.

```javascript
const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
   serialize: true
}));
```

--------------------------------

### Integrate Redux DevTools Extension with Redux Store

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/README.md

This JavaScript code snippet demonstrates how to integrate the Redux DevTools Extension with a Redux store. It uses the `composeWithDevTools` function to enable the extension, allowing for state inspection and time-travel debugging.

```javascript
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(rootReducer, composeWithDevTools());
```

--------------------------------

### Conditional DevTools Import for Production

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/README.md

Provides an alternative import path for the Redux DevTools Extension that disables it in production environments. This ensures that development tools are not included in the production build.

```javascript
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));
```

--------------------------------

### Redux DevTools Action and State Sanitizer Configuration

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md

Configures action and state sanitizers for the Redux DevTools Extension to mask sensitive or large data.

```javascript
const actionSanitizer = (action) => (
  action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?
  { ...action, data: '<<LONG_BLOB>>' } : action
);
const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  actionSanitizer,
  stateSanitizer: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
}));
```

--------------------------------

### Configure Redux DevTools Extension Features

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md

This JavaScript code snippet demonstrates how to configure the `features` object within `composeWithDevTools` to selectively enable or disable various functionalities of the Redux DevTools Extension. It includes options for pausing, locking, persisting, exporting, importing, jumping, skipping, reordering, dispatching, and testing actions.

```javascript
const composeEnhancers = composeWithDevTools({
  features: {
    pause: true, // start/pause recording of dispatched actions
    lock: true, // lock/unlock dispatching actions and side effects    
    persist: true, // persist states on page reloading
    export: true, // export history of actions in a file
    import: 'custom', // import history of actions from a file
    jump: true, // jump back and forth (time travelling)
    skip: true, // skip (cancel) actions
    reorder: true, // drag and drop actions in the history list 
    dispatch: true, // dispatch custom actions or action creators
    test: true // generate tests for the selected actions
  },
  // other options like actionSanitizer, stateSanitizer
});

```

--------------------------------

### Inspect React Hooks (useState, useReducer) with reinspect

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Integrations.md

This snippet illustrates the integration of Redux DevTools with React Hooks, specifically `useState` and `useReducer`, using the `reinspect` library. It shows how to pass an ID to `useState` for better tracking.

```javascript
import { useState } from 'reinspect'

export function CounterWithUseState({ id }) {
    const [count, setCount] = useState(0, id)
    // ...
}
```

--------------------------------

### Sanitize Action and State for Performance

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md

Provides a method to sanitize large or sensitive data within Redux actions and state to prevent excessive memory and CPU usage by the Redux DevTools Extension. It uses custom sanitizer functions to selectively omit or modify data.

```javascript
const actionSanitizer = (action) => (
  action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?
  { ...action, data: '<<LONG_BLOB>>' } : action
);
const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  actionSanitizer,
  stateSanitizer: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
}));
```

--------------------------------

### Persist Synthetic Event for Serialization

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md

If the entire synthetic event object is required, use `event.persist()` to prevent React from pooling it. Be aware that this consumes additional RAM. This method is suggested in React's documentation for handling events.

```diff
function increment(event) {
+ event.persist();
  return {
    type: ELEMENT_CLICKED,
    event: event,
  };
}
```

--------------------------------

### Integrate Angular with ng2-redux

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Integrations.md

This snippet shows how to configure Redux DevTools extension for an Angular application using `ng2-redux`. It imports necessary modules and uses `DevToolsExtension` to add the enhancer to the store configuration.

```typescript
import { NgReduxModule, NgRedux, DevToolsExtension } from 'ng2-redux'

@NgModule({
  /* ... */
  imports: [ /* ... */, NgReduxModule ]
})export class AppModule {
  constructor(
    private ngRedux: NgRedux,
    private devTools: DevToolsExtension) {

    let enhancers = [];
    // ... add whatever other enhancers you want.

    // You probably only want to expose this tool in devMode.
    if (__DEVMODE__ && devTools.isEnabled()) {
      enhancers = [ ...enhancers, devTools.enhancer() ];
    }

    this.ngRedux.configureStore(
      rootReducer,
      initialState,
      [],
      enhancers);
  }
}
```

--------------------------------

### Serialize Custom Data Types with __serializedType__

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md

This snippet illustrates how to serialize custom data types, like ImmutableJS Lists, by adding a `__serializedType__` key to the serialized object, enabling custom deserialization.

```javascript
const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  serialize: {
    replacer: (key, value) => {
      if (typeof value === 'object' && value !== null && '__serializedType__'  in value) {
        switch (value.__serializedType__) {
          case 'ImmutableList': return Immutable.List(value.data);
        }
      }
    }
  }
}));
```

--------------------------------

### Extract Data from Synthetic Event

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md

Avoid passing the entire synthetic event object to reducers. Instead, extract the specific data needed from the event target, such as its value, to ensure proper serialization.

```diff
function click(event) {
  return {
    type: ELEMENT_CLICKED,
-    event: event
+    value: event.target.value
  };
}
```

--------------------------------

### Custom toJSON for Synthetic Event Serialization

Source: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md

Implement a custom `toJSON` function within the action object as a workaround to serialize the synthetic event object without persisting it. This function is called by the extension before accessing the object, allowing you to control its stringified representation.

```diff
function increment(event) {
  return {
    type: ELEMENT_CLICKED,
    event: event,
+   toJSON: function (){
+     return { ...this, event: '[Event]' };
+   }
  };
}
```
Tokens:
Raw