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
• 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.

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! 🔥