Zustand

介绍

Zustand 是一个小而灵活的状态管理库，适用于 React 应用程序。它的设计目标是提供一个简单的 API，以便于在组件之间共享状态，同时保持良好的性能和可维护性。

Zustand 的核心概念是“store”，它是一个包含状态和操作的对象。你可以创建一个 store，并在你的组件中使用它来访问和更新状态。Zustand 还支持中间件和插件，使其功能更加丰富。

基本使用

安装

npm i zustand

快速入门

目录结构

src
├─ stores
│  ├─ counter.ts
│  ├─ user.ts
│  └─ ...
└─ main.ts

示例

定义 Store

import { create } from 'zustand'

type CounterStore = {
  count: number
  increment: () => void
  incrementAsync: () => Promise<void>
  decrement?: () => void
  decrementAsync?: () => Promise<void>
}

export const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  increment: () => {
    set((state) => ({ count: state.count + 1 }))
  },
  incrementAsync: async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000))
    set((state) => ({ count: state.count + 1 }))
  },
  decrement: () => {
    set((state) => ({ count: state.count - 1 }))
  },
  decrementAsync: async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000))
    set((state) => ({ count: state.count - 1 }))
  },
}))

使用 Store

import { useCounterStore } from '@/stores/counter'
import { useEffect } from 'react'

const setCount = () => {
  useCounterStore.setState({ count: 100 })
}

const logCount = () => {
  const count = useCounterStore.getState().count
  console.log('Current count:', count)
}

function App() {
  const count = useCounterStore((state) => state.count)
  // const { count } = useCounterStore((state) => state)

  useEffect(() => {
    setCount()
  }, [])

  useEffect(() => {
    logCount()
  }, [count])

  const OtherComp = () => {
    const increment = useCounterStore((state) => state.increment)
    const incrementAsync = useCounterStore((state) => state.incrementAsync)
    const decrement = useCounterStore((state) => state.decrement)
    const decrementAsync = useCounterStore((state) => state.decrementAsync)

    return (
      <>
        <div>
          <button onClick={increment}>Increment</button>
          <button onClick={decrement}>Decrement</button>
        </div>
        <div>
          <button onClick={incrementAsync}>Increment Async</button>
          <button onClick={decrementAsync}>Decrement Async</button>
        </div>
      </>
    )
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <OtherComp />
    </div>
  )
}

export default App

定义 Store

创建 Store

使用 create 方法定义状态和操作。

import { create } from 'zustand'

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

const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))

export default useCounterStore

添加中间件（可选）

如果需要持久化或调试工具，可以使用 Zustand 提供的中间件。

import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'

const useCounterStore = create(
  devtools(
    persist((set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
      decrement: () => set((state) => ({ count: state.count - 1 })),
    })),
  ),
)

使用 Store

组件中使用 Store

• 使用 Store 的 Hook 来订阅状态。
• 通过 Store 提供的操作更新状态。

import useCounterStore from '@/stores/counter';


function CounterActions() {
 // 获取状态
  const count = useCounterStore((state) => state.count);

  // 更新状态
  const increment = useCounterStore((state) => state.increment);
  const decrement = useCounterStore((state) => state.decrement);

  return (
    <div>
      <h1>Count: {count}</h1>;

      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

在组件外使用状态

在组件外（如事件处理程序或定时器中），可以使用 getState 和 setState。

import useCounterStore from '@/stores/counter'

// 获取当前状态
const currentCount = useCounterStore.getState().count

// 更新状态
useCounterStore.setState({ count: 100 })