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. It offers a partial Redux DevTools experience, including state inspection and action history (time travel and action dispatch are currently unavailable in remote mode).

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 and peer dependencies:

npm install -D @rozenite/redux-devtools-plugin
npm install react-native-get-random-values

Important: After installing react-native-get-random-values, you need to import it at the very top of your entry file (usually index.js or App.js):

import 'react-native-get-random-values';
// ... rest of your imports

For more detailed setup instructions, please refer to the react-native-get-random-values documentation.

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;

3. Configure Metro

Wrap your Metro configuration with withRozeniteReduxDevTools:

// metro.config.js
import { withRozeniteReduxDevTools } from '@rozenite/redux-devtools-plugin/metro';

export default withRozeniteReduxDevTools({
  // your existing metro config
});

This setup enables the WebSocket relay that allows the Redux DevTools to communicate with your React Native app.

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