npm package: @rozenite/redux-devtools-plugin
Description: Redux DevTools for Rozenite.
Latest version: 1.7.0

![rozenite-banner](https://www.rozenite.dev/rozenite-banner.jpg)

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

[![mit licence][license-badge]][license] [![npm downloads][npm-downloads-badge]][npm-downloads] [![Chat][chat-badge]][chat] [![PRs Welcome][prs-welcome-badge]][prs-welcome]

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.

![Redux DevTools Plugin](https://rozenite.dev/redux-devtools-plugin.png)

## 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:

```bash
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)

```typescript
// 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

```typescript
// 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:

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

To see more actions in the Redux DevTools, increase `maxAge`:

```ts
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:

```tsx
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][callstack-readme-with-love] is a group of React and React Native geeks, contact us at [hello@callstack.com](mailto:hello@callstack.com) if you need any help with these or just want to say hi!

Like the project? ⚛️ [Join the team](https://callstack.com/careers/?utm_campaign=Senior_RN&utm_source=github&utm_medium=readme) who does amazing stuff for clients and drives React Native Open Source! 🔥

[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com&utm_medium=referral&utm_campaign=rozenite&utm_term=readme-with-love
[license-badge]: https://img.shields.io/npm/l/rozenite?style=for-the-badge
[license]: https://github.com/callstackincubator/rozenite/blob/main/LICENSE
[npm-downloads-badge]: https://img.shields.io/npm/dm/rozenite?style=for-the-badge
[npm-downloads]: https://www.npmjs.com/package/@rozenite/redux-devtools-plugin
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge
[prs-welcome]: https://github.com/callstackincubator/rozenite/blob/main/CONTRIBUTING.md
[chat-badge]: https://img.shields.io/discord/426714625279524876.svg?style=for-the-badge
[chat]: https://discord.gg/xgGt7KAjxv