Zustand 博览会 DevTools

一个 DevTools 插件,将 Zustand 状态调试能力带到 Expo DevTools , 允许您在 Expo 开发环境中直接检查和调试您的 Zustand 商店 。 这个插件的工作原理与内置的Zustand devtools中间软件完全相同,具有相同的API和功能.

特征

• 🔍 国家监察局 实时查看您的 Zustand 商店状态
• 🎯 行动跟踪 - 监测状态变化和有命名动作的行动
• 🔄 时间旅行调试 - 使用 Redux DevTools 导航州历史
• 🚀 博览会整合 - 与世博会DevTools平台无缝结合
• 📱 反应原生支持 - 利用世博会管理的工作流程
• 🌐 Redux DevTools 核心软件 - 用于国家检查的Redux DevTools软件核心
• 🏗️ 类型脚本支持 - 附有适当类型定义的完整类型脚本支持
• ⚡ 安全生产 - 生产建筑自动停用

安装

npm install @csark0812/zustand-expo-devtools
# or
yarn add @csark0812/zustand-expo-devtools
# or
pnpm add @csark0812/zustand-expo-devtools

访问 DevTools 中

要访问 DevTools 接口 :

1. 启动您的 Expo 开发服务器( S)npx expo start(中文(简体) )
2. 在 Expo Go 或开发建设中打开您的应用程序
3. 新闻 移动+M 在 Expo 开发菜单中打开 DevTools
4. 导航到 DevTools 插件以检查您的 Zustand 商店

快速启动

import { create } from 'zustand';
import { devtools } from '@csark0812/zustand-expo-devtools';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounterStore = create<CounterState>()(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 }), false, 'increment'),
      decrement: () => set((state) => ({ count: state.count - 1 }), false, 'decrement'),
    }),
    {
      name: 'counter-store', // Optional: name your store for better debugging
    }
  )
);

如何运作

此插件提供了与 Zustand 内置相同的功能 devtools 中间软件,但与世博会的 DevTools 平台集成:

1. 存储集成: 将您的 Zustand 商店与 devtools 中间软件( 与 Zustand 内置的等同 API)
2. 曝光 DevTools 软件编辑: 移动+M 在您的 Expo 开发菜单中打开 DevTools
3. DevTools 插件: 导航到 DevTools 插件检查您的仓库
4. 调试: 检查状态,跟踪动作,以及穿越您商店历史的时间旅行

配置选项

interface DevtoolsOptions {
  name?: string;                 // Store name (default: 'zustand')
  enabled?: boolean;            // Enable/disable devtools (default: true)
  anonymousActionType?: string; // Default action name (default: 'anonymous')
  store?: string;              // Store identifier
  serialize?: boolean | {       // Serialization options for complex objects
    replacer?: (key: string, value: unknown) => unknown;  // Custom serializer
    reviver?: (key: string, value: unknown) => unknown;   // Custom deserializer
    options?: boolean | {       // Additional serialization options
      date?: boolean;
      regex?: boolean;
      undefined?: boolean;
      error?: boolean;
      symbol?: boolean;
      map?: boolean;
      set?: boolean;
      function?: boolean | ((fn: Function) => string);
    };
  };
}

序列化选项

当您的商店包含复杂对象时 Date, (中文(简体) ), Map, (中文(简体) ), Set,或者自定义类,您可以使用 serialize 在 DevTools 中正确处理它们的选项 :

const useStore = create<State>()(
  devtools(
    (set) => ({
      todos: [],
      addTodo: (text) => set((state) => ({
        todos: [...state.todos, {
          id: Date.now().toString(),
          text,
          createdAt: new Date(), // Date object
        }]
      }), false, 'addTodo'),
    }),
    {
      name: 'todo-store',
      serialize: {
        // Custom function to handle Date objects during serialization
        replacer: (key, value) => {
          if (value instanceof Date) {
            return { __type: 'Date', value: value.toISOString() };
          }
          return value;
        },
        // Custom function to restore Date objects during deserialization
        reviver: (key, value) => {
          if (value && value.__type === 'Date') {
            return new Date(value.value);
          }
          return value;
        },
      },
    }
  )
);

这在使用图书馆时特别有用,例如:

• 超级json 自动序列化
• 自定义映射, Set, dayjs等的序列化 .
• 具有复杂对象的 Immer 或其他状态管理模式

对动作的使用

为了更好的调试经验, 在更新状态时提供动作名 :

const useStore = create<State>()(
  devtools(
    (set) => ({
      // ... your state
      updateUser: (user) => set({ user }, false, 'updateUser'),
      resetState: () => set(initialState, false, 'resetState'),
    }),
    { name: 'user-store' }
  )
);

用其他中间软件

插件与其他 Zustand 中间软件一样效果良好 immer 财务报告和审定财务报表 persist数字 :

import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { devtools } from '@csark0812/zustand-expo-devtools';

const useStore = create<State>()(
  devtools(
    persist(
      immer((set) => ({
        // ... your state and actions
      })),
      {
        name: 'app-storage',
        storage: createJSONStorage(() => AsyncStorage),
      }
    ),
    { name: 'app-store' }
  )
);

生产结构

Devtools中相器在生产建设中自动被禁用,因此不需要担心去掉用于生产.

所需资源

• 曝光 SDK 53+
• 结晶 5.0.5+
• 反应原生/世博会开发环境

社区与收养

见 社区与收养 用于公开执行报告、维护结果、下游融合和日期活动.

用包裹盖了东西? 使用 项目演示窗体 (c) 分享公开执行,但不暗示认可或生产用途.

发展

该寄存器包含:

• /src - 主要devtools插件源代码
• /webui - 连接到 Redux DevTools 扩展的 DevTools 网络用户界面
• /examples/basic - 展示使用情况的世博会应用程序示例

举例来说:

cd examples/basic
npm install
npx expo start

要开发插件 :

# Install dependencies
npm install

# For development (rebuilds on changes)
npm run build:dev

# Build the plugin
npm run build

# Build the web UI
npm run web:export

# Build everything
npm run build:all

发展 工作流量: 修改了插件源代码后, 运行 npm run build:dev 在根文件夹中重建库。 这将更新实例应用程序用于测试您更改的编译代码 .

捐款

欢迎捐款! 请随意提交拉力请求.

自动释放

此寄存器在 PR 合并到 main。版本凸起类型由 PR 标签决定 :

• major 标签 → 主要版本起伏(如 2. 0.0 → 3. 0.0) - 断裂变化
• minor 标签 → 小版本起伏(例如 2.0.0 → 2.1.0) - 新特性
• patch 标签 → 补丁版本凸起(如 2. 0.0 → 2. 0.1) - 错误修正(默认)

控制释放类型 :

1. 添加适当的标签( :major, (中文(简体) ), minor,或 patch您的公关
2. 如果没有添加标签,则默认为 patch 释放
3. PR合并后,该版本会自动被撞出并发布到npm

许可证

麻省理工学院 克里斯托弗·萨尔基相

相关

• 苏斯坦德 - 反应中国家管理所需的熊
• 结晶取出器 - 反活性 JavaScript 获取器用于 Zustand
• 曝光 DevTools 软件 - 博览会的调试和剖析工具
• Redux 开发工具 - DevTools核心集成

启发和信用

这个项目的灵感来自:

• redux- devtools- expo- dev- plugin 服务器 - 世博会的Redux DevTools集成
• zustand-expo-devtools 变奏器 - 以往的Zustand DevTools执行

使用 :

• 曝光 DevTools 插件 - 博览会的 DevTools 插件架构