API 参考

相关源文件

• docs/apis/create-with-equality-fn.md
• docs/apis/create.md
• docs/hooks/use-store-with-equality-fn.md
• docs/hooks/use-store.md
• src/react.ts
• src/react/shallow.ts
• src/traditional.ts
• src/vanilla.ts
• tests/basic.test.tsx

本页提供了 Zustand API 表面和核心功能的全面参考。它涵盖了 vanilla JavaScript 核心和 React 集成，让您全面了解用于管理应用程序状态的可用工具。有关中间件的具体信息，请参阅中间件系统。

核心 API 结构

来源： src/vanilla.ts43-100 src/react.ts17-64 src/traditional.ts23-90

Store Creation Functions

createStore

Creates a vanilla (framework-agnostic) store that can be used in any JavaScript environment.

签名

Returns: A store API object with getState, setState, subscribe, and getInitialState methods.

The createStore function is the foundation of all Zustand stores. It creates a store instance containing state and providing methods to interact with that state.

Sources: src/vanilla.ts43-100

create

Creates a React hook with store API methods attached.

签名

Returns: A React hook that can access the store state with optional selectors.

The create function combines store creation with React integration, providing a hook that components can use to access state.

Sources: src/react.ts44-64

createWithEqualityFn

Creates a React hook with store API methods attached and a custom equality function.

签名

Returns: A React hook with custom equality checking to control re-renders.

This function extends create with the ability to customize when components re-render based on state changes.

Sources: src/traditional.ts57-90

React Integration Hooks

useStore

Connects a vanilla store to React components.

签名

Returns: The selected state from the store.

The useStore hook allows React components to access state from vanilla stores that were created with createStore.

Sources: src/react.ts17-37

useStoreWithEqualityFn

Connects a vanilla store to React components with custom equality checking.

签名

Returns: The selected state from the store, with re-renders controlled by the equality function.

This hook extends useStore with custom equality checking for optimized rendering.

Sources: src/traditional.ts23-47

useShallow

Creates a selector with built-in shallow equality checking for use with Zustand stores.

签名

Returns: A new selector function that uses shallow equality to optimize re-renders.

Sources: src/react/shallow.ts4-12

Store API Interface

The StoreApi interface defines the core methods available on all Zustand stores

Sources: src/vanilla.ts9-14

setState

Updates the store state.

• partial: New state object or function that returns a state update
• replace: When true, completely replaces state instead of merging

getState

Gets the current store state.

subscribe

Subscribes to state changes.

Returns an unsubscribe function.

getInitialState

Gets the initial store state.

数据流图

Sources: src/vanilla.ts60-97 src/react.ts30-36

Type System Overview

Sources: src/vanilla.ts9-41 src/react.ts39-42 src/traditional.ts49-56

关键类型

StoreApi<T>

Core interface for all Zustand stores.

Sources: src/vanilla.ts9-14

StateCreator<T>

Type for functions that create store state.

Sources: src/vanilla.ts28-37

UseBoundStore<S>

Type for React hooks returned by create().

Sources: src/react.ts39-42

UseBoundStoreWithEqualityFn<S>

Type for React hooks returned by createWithEqualityFn().

Sources: src/traditional.ts49-55

使用示例

Basic Usage with create

Using Selectors

Using Vanilla Stores with React

Using Custom Equality Functions

State Update Process

Sources: src/vanilla.ts66-81 tests/basic.test.tsx130-163

Extending With Middleware

Zustand's middleware system allows extending store functionality. Each middleware wraps the store creator and can add functionality or modify behavior. For more details on specific middleware, see Middleware System.