@ilteoood/zorro

Zorro

Zustand Over Redux Remote Overwatch

A powerful adapter that enables Zustand stores to connect to Redux DevTools remote server for debugging and state inspections.

Features

• 🔄 Real-time state monitoring - See your Zustand state changes in Redux DevTools
• 🌐 Remote debugging - Perfect for scenarios in which the Redux DevTools extension is not available, like React Native
• 📱 Rozenite compatible - Works seamlessly with Rozenite plugin framework

Installation

First, install the required dependencies:

# Install Zustand if you haven't already
npm install zustand

# Install Redux DevTools CLI for the remote server (not needed if you re using Rozenite)
npm install -g @redux-devtools/cli

# Install Zorro
npm install @ilteoood/zorro

Setup

1. Start the Redux DevTools Remote Server

# Start the remote server on default port 8000
redux-devtools --hostname=localhost --port=8000

2. Configure Your Zustand Store

import { create } from 'zustand';
import { remoteDevtools } from '@ilteoood/zorro';

const useStore = create(
  remoteDevtools(
    (set, get) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
      decrement: () => set((state) => ({ count: state.count - 1 })),
    }),
    {
      // All the following parameters are optional
      name: 'My Store',
      hostname: 'localhost'
      port: 8000,
      realtime: true,
      secure: false
    }
  )
);

3. Configure with Rozenite (optional)

import { withRozeniteReduxDevTools } from '@ilteoood/zorro/metro'

# Wrap your `withRozenite` config with `withRozeniteReduxDevTools`
export default withRozeniteReduxDevTools(withRozenite(...))

Configuration Options

Option	Type	Default	Description
name	string	'Zustand Store'	Instance name shown in DevTools
hostname	string	'localhost'	DevTools server hostname, for React Native it is automatically converted to 10.0.2.2 when running on Android
port	number	8000	DevTools server port
secure	boolean	false	Use HTTPS/WSS connection
realtime	boolean	false	Enable/disable realtime connection to DevTools
enabled	boolean	true	Enable/disable DevTools

Limitations

Due to limitations with the Remote DevTools, time travel features like reset, commit, rollback and jump to state are not available.

Troubleshooting

Connection Issues

• Can't connect to DevTools server:

  • Make sure the Redux DevTools CLI is running
  • Check that the hostname and port match your configuration

• Actions not showing:

  • Verify that realtime is enabled (enabled by default)
  • Check that the Redx DevTools app is connecting to the remote server

• State not updating:

  • Make sure you're updating your Zustand's state
  • Check that the Redx DevTools app is connecting to the remote server

Performance Considerations

• This middleware should be disabled in release mode

License

MIT

Contributing

Contributions are welcome! Please feel free to open an issue or submit a pull request.

Acknowledgments

This project is kindly sponsored by Nearform.