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
    Coming Soon

    Time travel debugging and action dispatch features will be added in future releases. These features require additional development to work properly in the remote DevTools environment.

    Installation

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

    Install dependencies

    Install the Redux DevTools plugin and its peer dependencies as development dependencies:

    npm
    yarn
    pnpm
    bun
    deno
    npm install -D @rozenite/redux-devtools-plugin
    npm
    yarn
    pnpm
    bun
    deno
    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):

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

    Instrument Redux store

    Add the Redux DevTools enhancer to your Redux store:

    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;

    For Rematch

    If you're using Rematch, follow the Rematch documentation and use composeWithRozeniteDevTools as the devtoolComposer:

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

    Adjust Metro configuration

    Wrap your Metro configuration with withRozeniteReduxDevTools:

    metro.config.js
    const { withRozenite } = require('@rozenite/metro');
const {
  withRozeniteReduxDevTools,
} = require('@rozenite/redux-devtools-plugin/metro');

const config = {
  // Your existing Metro configuration
};

module.exports = withRozenite(config, {
  // Your Rozenite configuration
  enhanceMetroConfig: (config) => withRozeniteReduxDevTools(config),
});

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

    Usage

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

    Device Scope

    The Redux DevTools plugin currently displays Redux stores from all connected devices at once. When multiple devices are connected, be sure to select the correct store in the instance selector to inspect the Redux store for the specific device.

    Physical Devices

    Redux DevTools work out of the box with Android emulators, but when using a physical device, you need to tunnel an additional port using the adb reverse command.

    adb reverse tcp:8765 tcp:8765

    Configuration Options

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

    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.

    Need React or React Native expertise you can count on?

    Let's talk