Redux DevTools

Full Redux Toolkit inspection for React Native. Monitor actions, explore state changes, time-travel debug, and inspect your Redux store in real-time — directly on your device.

Don't take our word for it — this is the real tool, wired to a real (small) Redux store running right here. The guided tour below walks one debugging story: a checkout session dispatches, a thunk comes back declined, you read the error and the diff, jump the store back, and replay the failure. Or skip the tour and just start tapping:

Installation

That's it. The Redux DevTools auto-detects your store and appears in your FloatingDevTools menu.

Zero config required — Just install the package. Your existing Redux store works as-is with no middleware or wrapper needed. Buoy hooks the store at creation via the official Redux DevTools integration point (Redux Toolkit enables it by default), so actions are captured from your app's very first dispatch — including thunk-internal and RTK Query actions — with no UI interaction required.

Guarantee full capture — the store-creation hook needs @buoy-gg/redux to load before your store module. That's usually automatic; to make it a guarantee, put import '@buoy-gg/redux'; as the first import of your app entry. If Buoy loads too late, it still binds your store automatically at app mount (top-level dispatches only — the tool tells you when it's in that mode).

BUOY vs Chrome Redux DevTools

BUOY brings the power of Redux DevTools to mobile — with features designed for React Native workflows.

Why on-device matters: Debug Redux on real devices, in TestFlight, or in production. No USB cable, no desktop app, no "it works on the simulator" moments.

Action List

Every dispatched action is captured with rich metadata:

• Action Type — Full action name with automatic slice detection
• Category Badges — Instant recognition of pending, fulfilled, rejected states
• Duration — How long the action took (with slow action warnings >16ms)
• Diff Summary — Quick overview of state changes (+added -removed ~modified)
• Timestamp — When the action was dispatched with relative time

Detail View

Tap any action to see three detailed tabs:

Action Tab

View the complete action payload, meta information, and error details for failed actions. Interactive JSON tree for exploring nested data.

State Tab

Explore the full state tree after this action with a collapsible data viewer. Navigate deeply nested state with ease.

Diff Tab

Side-by-side comparison showing exactly what changed — additions (green), removals (red), and modifications (yellow) clearly highlighted. Choose between tree view or split view.

Time-Travel Debugging

Jump to any point in your app's history:

• Jump to State — Instantly restore your app to the state after any action
• Replay Action — Re-dispatch any action to test how your reducers respond
• Async Timeline — Visual timeline showing the full lifecycle of async operations

Note: For full time-travel support (jumping to past states), add the optional reducer wrapper. See Advanced Configuration below.

RTK Async Thunks

Full support for Redux Toolkit async thunks with intelligent linking:

• Request ID Tracking — Automatically links pending → fulfilled/rejected actions
• Visual Timeline — See the full async flow in a connected timeline
• Concurrent Request Handling — Color-coded badges distinguish parallel requests (#1, #2, etc.)
• Duration Calculation — Total time from pending to completion
• Original Arguments — See exactly what was passed to the thunk

Performance Monitoring

Catch performance issues before they impact users:

• Action Timing — Millisecond-precision duration for every action
• Slow Action Detection — Actions taking >16ms (frame budget) are flagged with warnings
• Average Duration — Track performance trends across your session
• State Change Indicators — Quickly identify actions that actually modified state

Features

Search & Filter

Find actions instantly by type, or filter to show only actions that changed state.

Copy to Clipboard

Export action data or payloads for debugging, bug reports, or test fixtures.

Recording Toggle

Pause action capture when you need to focus, resume when ready.

Export History

Download your complete action history as JSON for sharing with teammates or creating test data.

Advanced Configuration

For most apps, zero-config is all you need. But if you want more control:

Enable Full Time-Travel

To enable jumping to past states (not just viewing them), wrap your reducer:

import { configureStore } from '@reduxjs/toolkit';
import { withBuoyDevTools } from '@buoy-gg/redux';

const store = configureStore({
  reducer: withBuoyDevTools(rootReducer),
});

import { configureStore } from '@reduxjs/toolkit';
import { withBuoyDevTools } from '@buoy-gg/redux';

const store = configureStore({
  reducer: withBuoyDevTools(rootReducer),
});

Custom Middleware Options

For fine-grained control over what gets captured:

import { createBuoyReduxMiddleware, withBuoyDevTools } from '@buoy-gg/redux';

const customMiddleware = createBuoyReduxMiddleware({
  maxActions: 500,           // History size (default: 200)
  ignoreActions: [           // Actions to skip
    'persist/PERSIST',
    'persist/REHYDRATE',
  ],
});

const store = configureStore({
  reducer: withBuoyDevTools(rootReducer),
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(customMiddleware),
});

import { createBuoyReduxMiddleware, withBuoyDevTools } from '@buoy-gg/redux';

const customMiddleware = createBuoyReduxMiddleware({
  maxActions: 500,           // History size (default: 200)
  ignoreActions: [           // Actions to skip
    'persist/PERSIST',
    'persist/REHYDRATE',
  ],
});

const store = configureStore({
  reducer: withBuoyDevTools(rootReducer),
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(customMiddleware),
});

When to use manual middleware: If you need to ignore specific actions, increase history size, or you simply prefer explicit wiring — the middleware path is also a guaranteed-full-capture alternative to the import-order note above. Everything (action log, desktop sync, MCP get_redux_state/redux_dispatch) works the same on either path.

No conflicts: If you configure middleware manually, the auto-instrumentation automatically detects this and defers to your configuration. You'll never get duplicate action entries.

API Reference

Exports

import {
  // Auto-instrumentation (used internally, rarely needed)
  instrumentStore,
  isStoreInstrumented,

  // Manual middleware (optional, for advanced config)
  buoyReduxMiddleware,
  createBuoyReduxMiddleware,

  // Time-travel (optional)
  withBuoyDevTools,
  jumpToState,
  replayAction,

  // Hooks
  useReduxActions,
  useAutoInstrumentRedux,

  // History adapter (for custom integrations)
  reduxHistoryAdapter,
  createReduxHistoryAdapter,
} from '@buoy-gg/redux';

import {
  // Auto-instrumentation (used internally, rarely needed)
  instrumentStore,
  isStoreInstrumented,

  // Manual middleware (optional, for advanced config)
  buoyReduxMiddleware,
  createBuoyReduxMiddleware,

  // Time-travel (optional)
  withBuoyDevTools,
  jumpToState,
  replayAction,

  // Hooks
  useReduxActions,
  useAutoInstrumentRedux,

  // History adapter (for custom integrations)
  reduxHistoryAdapter,
  createReduxHistoryAdapter,
} from '@buoy-gg/redux';

What's Next

• React Query DevTools — TanStack Query inspection
• Network Monitor — See every API call your app makes
• Storage Explorer — Browse and edit AsyncStorage & MMKV

FAQ

How do I use Redux DevTools in React Native without Flipper?

Install @buoy-gg/redux — the action stream, state diffs, and time-travel controls run inside the app on the device. Flipper (deprecated since RN 0.73) is not involved.

Does time travel work on the device?

Yes — JUMP restores the store to the state after any recorded action, and REPLAY re-dispatches an action, directly from the in-app panel.