react-native-debug-toolkit/lib/features/ZustandLogFeature.js

A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development

const MAX_LOGS = 200; // Max number of Zustand logs to store
const logs = [];

// Zustand middleware to capture state changes
export const addZustandLog = (action, prevState, nextState, actionCompleteTime, storeName) => {
      // Store log data
      logs.push({
        timestamp: new Date(),
        action: action,
        prevState: prevState,
        nextState: nextState,
        actionCompleteTime: actionCompleteTime,
        storeName: storeName,
      });

      // Trim logs if they exceed the maximum limit
      if (logs.length > MAX_LOGS) {
        logs.splice(0, logs.length - MAX_LOGS);
      }
};

const setup = () => {

  // Note: The actual middleware setup happens in the store creation
  // This function is mainly for compatibility with the feature API
};

const getData = () => {
  return logs;
};

const cleanup = () => {
  logs.length = 0; // Clear array
};

export const createZustandLogFeature = () => {
  return {
    name: 'zustand',
    label: 'Zustand Logs',
    setup: setup,
    getData: getData,
    cleanup: cleanup,
  };
};