当前位置：首页 > article >正文

React Zustand状态管理库的使用

article 2024/9/20 11:02:03

Zustand 是一个轻量级的状态管理库，适用于 React 和浏览器环境中的状态管理需求。它由 Vercel 开发并维护，旨在提供一种简单的方式来管理和共享状态。Zustand 的设计理念是尽可能简化状态管理，使其更加直观和易于使用。

Zustand 官网点击跳转

主要特点

轻量级：Zustand 的体积很小，只有几百字节，使得它非常适合现代 Web 应用程序。
易用性：使用 Zustaand 创建状态存储非常简单，只需要几行代码即可。
灵活性：Zustand 支持多种状态管理模式，包括普通的对象状态、函数状态等。
可组合性：可以很容易地组合多个状态存储，每个存储都可以独立管理自己的状态。
性能优化：Zustand 使用了高效的订阅机制，只在状态变化时重新渲染相关的组件。
跨平台支持：Zustand 不仅支持浏览器环境，还支持 Node.js 环境，可以用于 SSR（服务器端渲染）。

基本用法

创建状态存储

Zustand 使用 create 函数来创建一个新的状态存储。存储包含状态对象以及修改状态的方法。

import { create } from 'zustand';

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

使用状态存储

一旦创建了状态存储，就可以在组件中使用它。

import useStore from './path/to/store';

function Counter() {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

订阅状态变化

Zustand 会自动跟踪哪些组件订阅了状态，并在状态发生变化时重新渲染这些组件。这意味着你不需要手动传递状态或使用 useEffect 来监听状态变化。

高级用法

多个状态存储

你可以创建多个状态存储来管理不同的状态逻辑。

const useUserStore = create((set) => ({
  user: null,
  login: (user) => set({ user }),
  logout: () => set({ user: null }),
}));

const useProductStore = create((set) => ({
  products: [],
  fetchProducts: async () => {
    // 更新状态
  },
}));

自定义中间件

Zustand 支持自定义中间件，可以用来添加日志记录、持久化状态等功能。

import create from 'zustand';
import persist from 'zustand/middleware/persist';

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
      decrement: () => set((state) => ({ count: state.count - 1 })),
    }),
    { name: 'counter-storage' }
  )
);

除了基本的用法之外，Zustand 还提供了许多扩展用法，以下是一些常见的扩展用法：

1. 嵌套状态

管理复杂的状态

const useStore = create(set => ({
  user: {
    name: 'John Doe',
    age: 30,
    address: {
      street: '123 Main St',
      city: 'Anytown'
    }
  },
  updateUserAge: (age) => set(state => ({
    user: { ...state.user, age }
  })),
  updateAddressCity: (city) => set(state => ({
    user: { ...state.user, address: { ...state.user.address, city } }
  }))
}));

2. 动态状态

可以使用函数来创建状态，这在某些情况下很有用，尤其是当状态依赖于外部条件时。

const useStore = create(set => ({
  count: Math.random(), // 初始状态可以是一个函数的结果
  increment: () => set(state => ({ count: state.count + 1 }))
}));

3. 中间件

Zustand 支持自定义中间件，可以用来添加日志记录、状态持久化等功能。

日志中间件

const loggerMiddleware = createStore => (...a) => {
  const store = createStore(...a);
  const originalSet = store.setState;

  store.setState = (...args) => {
    console.log('Setting state', args[0]);
    originalSet.apply(store, args);
  };

  return store;
};

const useStore = create(loggerMiddleware(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
})));

持久化中间件

import { persist } from 'zustand/middleware';

const useStore = create(
  persist(set => ({
    count: 0,
    increment: () => set(state => ({ count: state.count + 1 })),
    decrement: () => set(state => ({ count: state.count - 1 }))
  }), {
    name: 'counter-storage', // 存储的 key 名称
    getStorage: () => localStorage // 存储位置，默认为 localStorage
  })
);

4. 同步状态

Zustand 提供了一种简单的方式来同步状态。

const useCounterStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
}));

const useUserStore = create(set => ({
  user: null,
  setUser: user => set(state => ({ user }))
}));

// 同步状态
useCounterStore.subscribe(() => {
  console.log('Counter changed:', useCounterStore.getState().count);
});
useUserStore.subscribe(() => {
  console.log('User changed:', useUserStore.getState().user);
});

5. 异步操作

Zustand 可以很好地处理异步操作，如 API 请求。

const useStore = create(set => ({
  loading: false,
  data: null,
  fetchData: async () => {
    set({ loading: true });
    try {
      const response = await fetch('/api/data');
      const data = await response.json();
      set({ data, loading: false });
    } catch (error) {
      set({ loading: false });
    }
  }
}));

6. TypeScript 支持

TypeScript，Zustand 提供了类型安全的支持。

import type { StoreApi, UseBoundStore } from 'zustand';

type State = {
  count: number;
  increment: () => void;
  decrement: () => void;
};

const useStore = create<UseBoundStore<StoreApi<State>>>(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 }))
}));

function Counter() {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}