# @csark0812/zustand-expo-devtools 中文文档

规范地址：https://npmcn.com/package/%40csark0812/zustand-expo-devtools/

版本：2\.1\.8
npm 元数据更新时间：2026-09-01T05:59:17.754Z
中文译文更新时间：2026-11-11T02:53:50.784Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40csark0812/zustand-expo-devtools
原文对照：https://npmcn.com/package/%40csark0812/zustand-expo-devtools/?lang=original
项目主页：https://github.com/csark0812/zustand-expo-devtools
源码仓库：https://github.com/csark0812/zustand-expo-devtools

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：7.2 MB，17 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：expo \*，zustand ^5\.0\.5
- 首次发布：2025-05-25T07:43:19.188Z
- 最新版本发布：2026-09-01T05:59:17.310Z
- 近 30 天下载量：138343（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 4 个）

## 中文简介

Zustand 为 Expo 应用程序进行状态检查和时间旅行调试

## 安装

```sh
npm install @csark0812/zustand-expo-devtools
```

也可以使用：`pnpm add @csark0812/zustand-expo-devtools`、`yarn add @csark0812/zustand-expo-devtools`、`bun add @csark0812/zustand-expo-devtools`

## README

# Zustand 博览会 DevTools

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

## 特征

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

## 安装

```bash
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 商店

## 快速启动

```typescript
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.  **调试**: 检查状态,跟踪动作,以及穿越您商店历史的时间旅行

## 配置选项

```typescript
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 中正确处理它们的选项 :

```typescript
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](https://github.com/blitz-js/superjson) 自动序列化
-   自定义映射, Set, dayjs等的序列化 .
-   具有复杂对象的 Immer 或其他状态管理模式

## 对动作的使用

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

```typescript
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`数字 :

```typescript
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+
-   反应原生/世博会开发环境

## 社区与收养

见 [社区与收养](https://npmcn.com/package/%40csark0812/zustand-expo-devtools/ADOPTION.md) 用于公开执行报告、维护结果、下游融合和日期活动.

用包裹盖了东西? 使用 [项目演示窗体](https://github.com/csark0812/zustand-expo-devtools/issues/new?template=showcase.yml) (c) 分享公开执行,但不暗示认可或生产用途.

## 发展

该寄存器包含:

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

举例来说:

```bash
cd examples/basic
npm install
npx expo start
```

要开发插件 :

```bash
# 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

## 许可证

麻省理工学院 [克里斯托弗·萨尔基相](https://github.com/csark0812)

## 相关

-   [苏斯坦德](https://github.com/pmndrs/zustand) - 反应中国家管理所需的熊
-   [结晶取出器](https://github.com/csark0812/zustand-getters) - 反活性 JavaScript 获取器用于 Zustand
-   [曝光 DevTools 软件](https://docs.expo.dev/debugging/tools/) - 博览会的调试和剖析工具
-   [Redux 开发工具](https://github.com/reduxjs/redux-devtools) - DevTools核心集成

## 启发和信用

这个项目的灵感来自:

-   [redux- devtools- expo- dev- plugin 服务器](https://github.com/matt-oakes/redux-devtools-expo-dev-plugin) - 世博会的Redux DevTools集成
-   [zustand-expo-devtools 变奏器](https://github.com/jhonny1525/zustand-expo-devtools) - 以往的Zustand DevTools执行

使用 :

-   [曝光 DevTools 插件](https://docs.expo.dev/debugging/devtools-plugins/) - 博览会的 DevTools 插件架构

## 常见问题

### @csark0812/zustand-expo-devtools 是什么？

Zustand 为 Expo 应用程序进行状态检查和时间旅行调试

### 如何安装 @csark0812/zustand-expo-devtools？

在项目目录运行 npm install @csark0812/zustand-expo-devtools，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：expo（\*）、zustand（^5\.0\.5）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @csark0812/zustand-expo-devtools 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @csark0812/zustand-expo-devtools 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @csark0812/zustand-expo-devtools 可以商用吗？

@csark0812/zustand-expo-devtools 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @csark0812/zustand-expo-devtools 的下载量有多少？

根据 npm 官方下载统计，@csark0812/zustand-expo-devtools 在 2026/10/11 – 2026/11/09 这 30 天内被下载 138,343 次，日均约 4,611 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @csark0812/zustand-expo-devtools 还在维护吗？

最新版本 2\.1\.8 发布于 2026/09/01（2 个月前）；至今共发布 16 个版本，其中过去 12 个月发布了 4 个；首次发布于 2025/05/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。