State Management

// ✅ 好：职责清晰
useCartStore; // 只管购物车
useWalletStore; // 只管钱包

// ❌ 差：职责混乱
useAppStore; // 什么都放

// ✅ Server state 用 hook（内部可能用 React Query 或直接 API）
const { orders, isLoading } = useOrders();

// ✅ Client state 用 Store
const cartItems = useCartStore(state => state.items);

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

// 1. 定义接口
interface ExampleState {
  // 状态
  items: Item[];
  selectedId: string | null;
  isLoading: boolean;
  error: string | null;

  // 动作
  fetchItems: () => Promise<void>;
  addItem: (item: Item) => void;
  removeItem: (id: string) => void;
  selectItem: (id: string | null) => void;
  clearError: () => void;

  // 计算属性
  getItemCount: () => number;
  getItemById: (id: string) => Item | undefined;
}

// 2. 创建 Store
export const useExampleStore = create<ExampleState>()(
  devtools(
    persist(
      (set, get) => ({
        // 初始状态
        items: [],
        selectedId: null,
        isLoading: false,
        error: null,

        // 异步动作
        fetchItems: async () => {
          try {
            set({ isLoading: true, error: null });
            const items = await exampleApi.getItems();
            set({ items, isLoading: false });
          } catch (err) {
            set({
              error: err instanceof Error ? err.message : '加载失败',
              isLoading: false,
            });
          }
        },

        // 同步动作
        addItem: item =>
          set(state => ({
            items: [...state.items, item],
          })),

        removeItem: id =>
          set(state => ({
            items: state.items.filter(i => i.id !== id),
          })),

        selectItem: id => set({ selectedId: id }),

        clearError: () => set({ error: null }),

        // 计算属性
        getItemCount: () => get().items.length,
        getItemById: id => get().items.find(i => i.id === id),
      }),
      {
        name: 'mobazha-example-storage', // localStorage key
        partialize: state => ({
          items: state.items, // 只持久化必要的字段
          // 不持久化 isLoading, error 等临时状态
        }),
      }
    ),
    { name: 'ExampleStore' } // DevTools 中显示的名称
  )
);

// 3. 导出选择器
export const selectItems = (state: ExampleState) => state.items;
export const selectLoading = (state: ExampleState) => state.isLoading;
export const selectError = (state: ExampleState) => state.error;

// 在 Redux DevTools 中可视化状态变化
devtools(storeCreator, { name: 'StoreName' });

persist(storeCreator, {
  name: 'mobazha-xxx-storage', // localStorage key，统一 mobazha- 前缀
  partialize: state => ({
    // 只持久化必要字段
    items: state.items,
    preferences: state.preferences,
    // ❌ 不要持久化：isLoading, error, 临时 UI 状态
  }),
});

// 标准顺序：devtools 在最外层
create<State>()(
  devtools(         // 最外层
    persist(        // 内层（可选）
      (set, get) => ({ ... })
    )
  )
);

// ❌ 差：每次 store 任何变化都会重渲染
const { items, isLoading, error } = useCartStore();

// ✅ 好：只订阅需要的字段
const items = useCartStore(state => state.items);
const isLoading = useCartStore(state => state.isLoading);

// ✅ 更好：使用导出的选择器
const items = useCartStore(selectCartItems);

// ✅ 组合选择器（需要 shallow 比较）
import { useShallow } from 'zustand/react/shallow';

const { items, total } = useCartStore(
  useShallow(state => ({
    items: state.items,
    total: state.getTotal(),
  }))
);

// 前缀 select + 描述
export const selectCartItems = (state: CartState) => state.items;
export const selectCartTotal = (state: CartState) => state.getTotal();
export const selectIsCartEmpty = (state: CartState) => state.items.length === 0;

fetchData: async () => {
  try {
    set({ isLoading: true, error: null });
    const data = await apiCall();
    set({ data, isLoading: false });
  } catch (err) {
    set({
      error: err instanceof Error ? err.message : '未知错误',
      isLoading: false,
    });
  }
},

import { act } from '@testing-library/react';

describe('useCartStore', () => {
  beforeEach(() => {
    // 重置 store 状态
    useCartStore.setState({
      items: [],
      isLoading: false,
      error: null,
    });
  });

  it('应正确添加商品', () => {
    act(() => {
      useCartStore.getState().addItem(mockItem);
    });

    expect(useCartStore.getState().items).toHaveLength(1);
  });
});