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

    Installation

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

    Install dependencies

    Install the Redux DevTools plugin as a development dependency:

    npm
    yarn
    pnpm
    bun
    deno
    npm install -D @rozenite/redux-devtools-plugin

    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;

    Usage

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

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

    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