React中 Zustand状态管理库的使用详解

npm install zustand

yarn add zustand

// store.js
import create from 'zustand';
// 定义 store 的状态和更新函数
const useStore = create((set) => ({
  count: 0, // 状态：计数器
  increment: () => set((state) => ({ count: state.count + 1 })), // 增加计数器
  decrement: () => set((state) => ({ count: state.count - 1 })), // 减少计数器
  setCount: (val) => set({count: val}), // 设置计数器
  reset: () => set({ count: 0 }), // 重置计数器
}));
export default useStore;

import React from 'react';
import useStore from './store';
const Counter = () => {
  // 通过 useStore 获取状态和更新方法
  const { count, increment, decrement, setCount, reset } = useStore();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={() => setCount(10)}>Reset</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};
export default Counter;

import create from 'zustand';
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', // localStorage key
    }
  )
);
export default useStore;

import create from 'zustand';
import { devtools } from 'zustand/middleware';
const useStore = create(
  devtools((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }))
);
export default useStore;

import create from 'zustand';
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));
// 监听 count 的变化
useStore.subscribe((state) => {
  console.log('Count changed:', state.count);
});
// 进行状态更改
useStore.getState().increment(); // 控制台将打印 "Count changed: 1"

import create from 'zustand';
// 创建 Zustand store
const useStore = create((set) => ({
  count: 0,
  user: { name: 'John Doe' },
  increment: () => set((state) => ({ count: state.count + 1 })),
}));
// 只订阅 count 状态
const CountComponent = () => {
  // 使用选择器函数来订阅 count 状态
  const count = useStore((state) => state.count);
  return <div>Count: {count}</div>;
};
// 只订阅 user 状态
const UserComponent = () => {
  // 使用选择器函数来订阅 user 状态
  const user = useStore((state) => state.user);
  return <div>User: {user.name}</div>;
};

import create from 'zustand';
import produce from 'immer';
const useStore = create((set) => ({
  user: { name: 'Alice', age: 25 },
  updateName: (newName: string) =>
    set(produce((state) => {
      state.user.name = newName;
    })),
}));
export default useStore;