A Rozenite plugin that provides Redux DevTools integration for React Native applications.

The Rozenite Redux DevTools Plugin provides Redux state inspection and debugging capabilities within your React Native DevTools environment, including action dispatch and time-travel controls.

Features

• Redux 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: Expose Redux state inspection and curated history-control tools to coding agents
• Production Safety: Automatically disabled in production builds

Installation

1. Install the Plugin

Install the Redux DevTools plugin:

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

2. Set up the Store Enhancer

Add the Redux DevTools enhancer to your Redux store:

For Redux Toolkit (Recommended)

// store.ts
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

// store.ts
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;

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 the Redux DevTools, increase maxAge:

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

3. Access DevTools

Start your development server and open React Native DevTools. You'll find the "Redux DevTools" panel in the DevTools interface.

Agent Tools (LLM Integration)

Agent support is a separate manual integration step. Adding the store enhancer is not enough by itself.

If you want agents to use Redux DevTools, you must mount the hook once near your app root by hand:

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

function App() {
  useReduxDevToolsAgentTools();

  return <YourApp />;
}

This manually registers tools under the @rozenite/redux-devtools-plugin domain.

Without this hook, the Redux DevTools panel will still work in DevTools, but the Redux domain will not appear for agents.

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 public agent surface intentionally excludes raw eval-based action execution and raw lifted-state import.

Made with ❤️ at Callstack

rozenite is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.

Callstack is a group of React and React Native geeks, contact us at [email protected] if you need any help with these or just want to say hi!

Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥