Redux DevTools Integration

import { create } from "zustand";
import { devtools } from "zustand/middleware";
 
interface AppStore {
  count: number;
  increment: () => void;
  decrement: () => void;
}
 
export const useAppStore = create<AppStore>()(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set((s) => ({ count: s.count + 1 }), false, "increment"),
      decrement: () => set((s) => ({ count: s.count - 1 }), false, "decrement"),
    }),
    { name: "AppStore" }
  )
);

// stores/order-store.ts
import { create } from "zustand";
import { devtools } from "zustand/middleware";
 
interface OrderItem {
  id: string;
  name: string;
  quantity: number;
  price: number;
}
 
interface OrderStore {
  items: OrderItem[];
  status: "idle" | "processing" | "completed" | "error";
  discount: number;
  addItem: (item: Omit<OrderItem, "quantity">) => void;
  removeItem: (id: string) => void;
  updateQuantity: (id: string, quantity: number) => void;
  applyDiscount: (percent: number) => void;
  submitOrder: () => Promise<void>;
  resetOrder: () => void;
}
 
export const useOrderStore = create<OrderStore>()(
  devtools(
    (set, get) => ({
      items: [],
      status: "idle",
      discount: 0,
 
      addItem: (item) =>
        set(
          (s) => {
            const existing = s.items.find((i) => i.id === item.id);
            if (existing) {
              return {
                items: s.items.map((i) =>
                  i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i
                ),
              };
            }
            return { items: [...s.items, { ...item, quantity: 1 }] };
          },
          false,
          { type: "order/addItem", item } // Named action with payload
        ),
 
      removeItem: (id) =>
        set(
          (s) => ({ items: s.items.filter((i) => i.id !== id) }),
          false,
          { type: "order/removeItem", id }
        ),
 
      updateQuantity: (id, quantity) =>
        set(
          (s) => ({
            items: s.items.map((i) => (i.id === id ? { ...i, quantity } : i)),
          }),
          false,
          { type: "order/updateQuantity", id, quantity }
        ),
 
      applyDiscount: (percent) =>
        set(
          { discount: Math.min(100, Math.max(0, percent)) },
          false,
          { type: "order/applyDiscount", percent }
        ),
 
      submitOrder: async () => {
        set({ status: "processing" }, false, "order/submitOrder/pending");
 
        try {
          const { items, discount } = get();
          await fetch("/api/orders", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ items, discount }),
          });
          set(
            { status: "completed", items: [], discount: 0 },
            false,
            "order/submitOrder/fulfilled"
          );
        } catch {
          set({ status: "error" }, false, "order/submitOrder/rejected");
        }
      },
 
      resetOrder: () =>
        set(
          { items: [], status: "idle", discount: 0 },
          false,
          "order/reset"
        ),
    }),
    {
      name: "OrderStore",
      enabled: process.env.NODE_ENV === "development",
    }
  )
);

// components/order-form.tsx
"use client";
 
import { useOrderStore } from "@/stores/order-store";
 
export function OrderForm() {
  const items = useOrderStore((s) => s.items);
  const status = useOrderStore((s) => s.status);
  const discount = useOrderStore((s) => s.discount);
  const addItem = useOrderStore((s) => s.addItem);
  const removeItem = useOrderStore((s) => s.removeItem);
  const updateQuantity = useOrderStore((s) => s.updateQuantity);
  const applyDiscount = useOrderStore((s) => s.applyDiscount);
  const submitOrder = useOrderStore((s) => s.submitOrder);
 
  const subtotal = items.reduce((sum, i) => sum + i.price * i.quantity, 0);
  const total = subtotal * (1 - discount / 100);
 
  return (
    <div>
      <h2>Order ({status})</h2>
 
      <button
        onClick={() => addItem({ id: "p1", name: "Widget", price: 9.99 })}
      >
        Add Widget
      </button>
 
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.name} x{item.quantity} = ${(item.price * item.quantity).toFixed(2)}
            <button onClick={() => updateQuantity(item.id, item.quantity + 1)}>+</button>
            <button onClick={() => removeItem(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
 
      <div>
        <label>
          Discount %:
          <input
            type="number"
            value={discount}
            onChange={(e) => applyDiscount(Number(e.target.value))}
          />
        </label>
      </div>
 
      <p>Total: ${total.toFixed(2)}</p>
 
      <button onClick={submitOrder} disabled={status === "processing"}>
        {status === "processing" ? "Submitting..." : "Submit Order"}
      </button>
    </div>
  );
}

// Each store gets its own DevTools instance
const useAuthStore = create<AuthState>()(
  devtools((set) => ({ ... }), { name: "AuthStore" })
);
 
const useCartStore = create<CartState>()(
  devtools((set) => ({ ... }), { name: "CartStore" })
);
// Both appear as separate instances in Redux DevTools

devtools(storeCreator, {
  name: "RemoteStore",
  // Connect to remote Redux DevTools instance
  // Useful for debugging mobile or embedded apps
});

devtools(storeCreator, {
  name: "Store",
  trace: true,       // Show stack trace for each action
  traceLimit: 25,    // Max stack frames to show
});

// devtools should always be the outermost middleware
const useStore = create<State>()(
  devtools(
    persist(
      immer((set) => ({ ... })),
      { name: "persist-key" }
    ),
    { name: "DevToolsName" }
  )
);

// Fully typed set with action name
set(
  (state) => ({ count: state.count + 1 }),  // State updater
  false,                                      // replace flag
  { type: "counter/increment", by: 1 }       // Action for DevTools
);