Zustand 轻量状态管理

import { create } from 'zustand';

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

function Counter() {
  const { count, increment, decrement } = useStore();
  
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

const useStore = create((set) => ({
  users: [],
  loading: false,
  fetchUsers: async () => {
    set({ loading: true });
    const response = await fetch('/api/users');
    const users = await response.json();
    set({ users, loading: false });
  }
}));

import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set) => ({
      token: null,
      setToken: (token) => set({ token })
    }),
    { name: 'auth-storage' }
  )
);

import { immer } from 'zustand/middleware/immer';

const useStore = create(
  immer((set) => ({
    todos: [],
    addTodo: (text) => set((state) => {
      state.todos.push({ id: Date.now(), text });
    })
  }))
);

const createUserSlice = (set) => ({
  user: null,
  setUser: (user) => set({ user })
});

const createSettingsSlice = (set) => ({
  theme: 'light',
  setTheme: (theme) => set({ theme })
});

const useStore = create((...a) => ({
  ...createUserSlice(...a),
  ...createSettingsSlice(...a)
}));

import { shallow } from 'zustand/shallow';

// 只在 count 变化时重新渲染
const count = useStore((state) => state.count);

// 多个值
const { count, increment } = useStore(
  (state) => ({ count: state.count, increment: state.increment }),
  shallow
);