Zustand State Management 技能用于在 Remix/React 应用（尤其是 Shopify 应用）中进行状态管理。
用途：Zustand 被描述为轻量、快速的状态管理方案，适合 Shopify Remix 应用，相比 Redux 更简单、比 Context 更灵活，并可配合 TypeScript 使用。
主要特点：
- 极少样板代码：无 provider、无 reducer、无 action。
- TypeScript 优先：开箱即用的完整类型推断。
- 体积小：压缩后约 1KB。
- Remix 友好：可与 SSR 配合且无 hydration 问题。
- 选择性重渲染：仅当组件所选状态变化时才重渲染。
使用方式（安装）：
- via npm install zustand
技能内容按以下部分展开：
- 基础 Store 模式：用 create 定义状态字段与 actions（如 isLoading、selectedProductIds、setLoading、selectProduct、deselectProduct、clearSelection），并在组件中按需选择状态与 action。
- TypeScript 模式：使用 StateCreator 的切片（Slice）模式，将 ProductSlice、UISlice 等切片组合为一个 store；提供类型化选择器，包括单值选择器、使用 useShallow 的多值选择器以及派生状态选择器。
- 持久化：使用 persist 与 createJSONStorage 将状态写入 localStorage/sessionStorage，支持指定 key、指定 storage 与 partialize 只持久化特定字段；并提供 SSR 安全做法，在 window 未定义时返回空实现、设置 skipHydration 并在 useEffect 中手动调用 persist.rehydrate()。
- Shopify 专属模式：店铺上下文 store（店铺信息、认证状态）、批量操作 store（操作类型、状态、进度、错误等）、资源选择器 store（打开/关闭、资源类型、已选资源、最大可选数量）。
- 中间件与调试：devtools 集成（可仅在开发环境启用）、immer 中间件（允许直接修改），以及 devtools、persist、immer 组合使用。
- 测试：使用 @testing-library/react 的 renderHook 与 act，配合 setState 在测试前重置 store，对选择与清空等行为进行断言。
反模式提示：不要把服务端数据放进 Zustand（应由 Remix loader 提供，Zustand 仅用于 UI 状态）；不要在组件内部创建 store；不要选择整个 state 对象，而应只选择所需字段或使用 useShallow。
最佳实践摘要：store 保持小而聚焦，按领域拆分；始终使用选择器；服务端数据走 loader；全面使用 TypeScript；对 store 单独测试；开发环境启用 DevTools；持久化需处理 SSR hydration。
限制与未提供信息：关于具体收费、价格、平台兼容范围、性能指标等内容，资料中暂未提供。