#Redux DevTools Plugin

The Redux DevTools plugin integrates Redux DevTools directly into your React Native DevTools, providing powerful state inspection and debugging capabilities for your Redux-powered React Native applications.

#What is Redux DevTools?

Redux DevTools is a powerful debugging tool for Redux applications that provides:

• State Inspection: View and explore your Redux store state in real-time
• Action History: Track all dispatched actions with timestamps and payloads
• State Diff Viewing: See exactly how each action changes your state
• Agent Tools: Let coding agents inspect stores and drive safe Redux DevTools history actions

#Installation

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

#Install dependencies

Install the Redux DevTools plugin as a development dependency:

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

#Instrument Redux store

Add the Redux DevTools enhancer to your Redux store:

#For 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;

#For 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;

#For Rematch

If you're using 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;

#Usage

Once configured, the Redux DevTools plugin will automatically appear in your React Native DevTools sidebar as "Redux DevTools".

#Agent Integration

This plugin can also expose agent tools under the @rozenite/redux-devtools-plugin domain.

This is a separate manual integration step. Instrumenting the Redux store with rozeniteDevToolsEnhancer or composeWithRozeniteDevTools does not automatically register agent tools.

If you want agent access, mount the hook once near your app root by hand:

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

function App() {
  useReduxDevToolsAgentTools();

  return <YourApp />;
}

Without this hook, the Redux DevTools panel still works, but the Redux plugin domain will not be available through rozenite agent.

Available tools:

• list-stores
• get-store-state
• list-actions
• get-action-details
• dispatch-action
• jump-to-action
• toggle-action
• reset-history
• rollback-state
• commit-current-state
• sweep-skipped-actions
• set-recording-paused
• set-locked

The agent API intentionally exposes curated store and history operations rather than raw eval-based Redux DevTools commands.

#Configuration Options

To distinguish multiple stores, set a custom name per store:

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

To see more actions in Redux DevTools, increase maxAge:

rozeniteDevToolsEnhancer({ maxAge: 150 }) // Default is 50

#Contributing

The Redux DevTools plugin is open source and welcomes contributions! Check out the Plugin Development Guide to learn how to contribute or create your own plugins.

#Support

If you encounter issues with the Redux DevTools plugin:

1. Check Documentation: Review this guide for common solutions
2. Search Issues: Look for similar issues in the repository
3. Create Issue: Report bugs or request features
4. Community: Reach out to the Rozenite community for help

Next: Learn about Plugin Development to create your own plugins, or explore other Official Plugins.