#Redux DevTools Plugin

The Redux DevTools plugin brings the familiar Redux DevTools experience into React Native DevTools: state inspection, action history, and state diffs for your store.

#Installation

Make sure to go through the Getting Started guide before installing the plugin.

npm install -D @rozenite/redux-devtools-plugin

yarn add -D @rozenite/redux-devtools-plugin

pnpm add -D @rozenite/redux-devtools-plugin

bun add -D @rozenite/redux-devtools-plugin

deno add -D npm:@rozenite/redux-devtools-plugin

Add the enhancer to your store:

#Redux Toolkit (recommended)

import { configureStore } from '@reduxjs/toolkit';
import { rozeniteDevToolsEnhancer } from '@rozenite/redux-devtools-plugin';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
  enhancers: (getDefaultEnhancers) => getDefaultEnhancers().concat(rozeniteDevToolsEnhancer()),
});

export default store;

#Classic Redux

import { createStore, applyMiddleware } from 'redux';
import { rozeniteDevToolsEnhancer } from '@rozenite/redux-devtools-plugin';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(/* your middleware */),
  rozeniteDevToolsEnhancer(),
);

export default store;

#Rematch

Follow the Rematch documentation and use composeWithRozeniteDevTools as the devtoolComposer:

import { init } from '@rematch/core';
import { composeWithRozeniteDevTools } from '@rozenite/redux-devtools-plugin';

export const store = init({
  models: {
    // your models
  },
  redux: {
    devtoolComposer: composeWithRozeniteDevTools(),
  },
});

export default store;

#Web (React Native for Web)

With Rozenite for Web, this plugin is also available when debugging your React Native web app.

#Usage

Once configured, "Redux DevTools" appears in your React Native DevTools sidebar.

#Multiple stores

Give each store a distinct name so you can tell them apart in the panel:

const appStoreEnhancer = rozeniteDevToolsEnhancer({ name: 'app-store' });
const sessionStoreEnhancer = rozeniteDevToolsEnhancer({ name: 'session-store' });

#Large stores

State is serialized and sent to DevTools over the device bridge, so a large store combined with a lot of action history can use a lot of memory — on Android this can even crash the app when you open the panel. If your store is large (RTK Query caches, big entity maps), lower maxAge (default 50) and strip bulky slices with stateSanitizer / actionSanitizer:

rozeniteDevToolsEnhancer({
  maxAge: 20,
  stateSanitizer: (state) => ({
    ...(state as Record<string, unknown>),
    api: '[omitted]',
  }),
  actionSanitizer: (action) => ({
    ...action,
    payload: action.type === 'large/payload' ? '[omitted]' : action.payload,
  }),
});

#Dispatch traces

Set trace: true to capture where each action was dispatched from, symbolicated back to your source files through Metro:

rozeniteDevToolsEnhancer({
  trace: true,
  traceLimit: 25,
});

Pass traceSymbolication: false to keep raw stacks without the Metro round-trip.

#Agent Integration

Agent tools are a separate, manual step — instrumenting your store with the enhancer doesn't register them on its own. Mount this once near your app root:

import { useReduxDevToolsAgentTools } from '@rozenite/redux-devtools-plugin';

function App() {
  useReduxDevToolsAgentTools();

  return <YourApp />;
}

This registers curated tools under the @rozenite/redux-devtools-plugin domain for listing stores/actions, dispatching actions, and driving history (jump/rollback/commit) — rather than exposing raw eval-based commands.

Next: Learn about Plugin Development, or explore other Official Plugins.