為何需要通用 Action？

在 Zustand 狀態(tài)管理庫中，開發(fā)者常常需要為狀態(tài)對象的每個字段單獨編寫更新函數(shù)。然而，隨著狀態(tài)結(jié)構(gòu)的復(fù)雜化，這種方式會導(dǎo)致代碼冗余，維護成本增加。例如：

updateName: (name) => set(() => ({ name })),
updateAge: (age) => set(() => ({ age })),
updateEmail: (email) => set(() => ({ email })),
// 更多字段意味著更多重復(fù)代碼

在類似 dva（類 Redux）框架中，通常通過定義一個通用 reducer 來簡化狀態(tài)更新操作：

export default {
  namespace: 'user',
  state: {
    name: '好人',
    age: 18,
  },
  reducers: {
    save(state, { payload }) {
      return { ...state, ...payload };
    },
  },
};

dispatch({ type: 'user/save', payload: { name: '更好的人' } });

那么，如何在 Zustand 中優(yōu)雅地實現(xiàn)類似的功能？本文將介紹如何通過 TypeScript 泛型實現(xiàn)通用 Action，提升代碼簡潔性和可維護性。

通用 Action 的實現(xiàn)原理

通過 TypeScript 的泛型和 keyof 操作符，我們可以設(shè)計一個通用的更新函數(shù)，簽名如下：

update: <K extends keyof State>(k: K, v: State[K]) => void;

該函數(shù)接受兩個參數(shù)：

1. k：狀態(tài)對象的鍵名，類型為 keyof State，確保鍵名屬于狀態(tài)對象。
2. v：對應(yīng)鍵的新值，類型為 State[K]，保證值與字段類型匹配。

這種設(shè)計不僅減少了重復(fù)代碼，還提供了類型安全和自動補全支持。

完整實現(xiàn)方案

以下是實現(xiàn)通用 Action 的詳細步驟：

1. 定義狀態(tài)和 Action 類型

首先，定義狀態(tài)和 Action 的類型，確保類型安全：

type State = {
  name: string;
  age: number;
};

type Action = {
  update: <K extends keyof State>(k: K, v: State[K]) => void;
  updateName: (name: State['name']) => void;
  updateAge: (age: State['age']) => void;
};

2. 創(chuàng)建 Store 并實現(xiàn)通用 Action

在 Zustand 的 Store 中實現(xiàn)通用更新函數(shù)，并保留傳統(tǒng)的單一字段更新函數(shù)以支持不同場景：

import { create } from 'zustand';

type Store = State & { actions: Action };

export const useStore = create<Store>()((set) => ({
  name: '',
  age: 18,
  actions: {
    updateName: (name) => set(() => ({ name })),
    updateAge: (age) => set(() => ({ age })),
    update: (k, v) => set(() => ({ [k]: v })),
  },
}));

3. 提取 Action 的便捷 Hook

為了方便在組件中調(diào)用 Action，創(chuàng)建一個 Hook 來提取 actions 對象：

export function useStoreActions() {
  return useStore((state) => state.actions);
}

使用場景對比

傳統(tǒng)方式

傳統(tǒng)方式需要為每個字段調(diào)用特定的更新函數(shù)：

const actions = useStoreActions();

actions.updateName('Alice');
actions.updateAge(25);

通用 Action 方式

使用通用 update 函數(shù)，代碼更加簡潔統(tǒng)一：

const actions = useStoreActions();

actions.update('name', 'Alice');
actions.update('age', 25);

確保類型安全

通用 update 函數(shù)通過 TypeScript 泛型提供了強大的類型安全支持，確保：

• 只能更新狀態(tài)中已定義的字段。
• 傳入的值必須與字段類型匹配。
• 開發(fā)工具（如 VS Code）提供字段名的自動補全。

以下操作將觸發(fā)類型錯誤：

actions.update('nonexistent', 'value'); // 錯誤：字段不存在
actions.update('age', '25'); // 錯誤：類型不匹配

擴展：支持批量更新

為了進一步提升靈活性，可以擴展通用 Action 以支持批量更新：

類型定義

type Action = {
  update: <K extends keyof State>(k: K, v: State[K]) => void;
  batchUpdate: (updates: Partial<State>) => void;
  updateName: (name: State['name']) => void;
  updateAge: (age: State['age']) => void;
};

實現(xiàn)批量更新

在 Store 中添加 batchUpdate 函數(shù)：

export const useStore = create<Store>()((set) => ({
  name: '',
  age: 18,
  actions: {
    updateName: (name) => set(() => ({ name })),
    updateAge: (age) => set(() => ({ age })),
    update: (k, v) => set(() => ({ [k]: v })),
    batchUpdate: (updates) => set((state) => ({ ...state, ...updates })),
  },
}));

使用批量更新

const actions = useStoreActions();

actions.batchUpdate({ name: 'Bob', age: 30 });

總結(jié)

通過在 Zustand 中實現(xiàn)通用 Action，我們可以獲得以下優(yōu)勢：

1. 代碼簡潔：將所有更新邏輯統(tǒng)一到一個 update 函數(shù)，減少重復(fù)代碼。
2. 類型安全：利用 TypeScript 泛型和 keyof 操作符，確保字段和值的類型正確。
3. 靈活擴展：支持批量更新，適應(yīng)更復(fù)雜的業(yè)務(wù)場景。
4. 清晰結(jié)構(gòu)：將 Action 集中在一個對象中，避免與狀態(tài)數(shù)據(jù)混淆，方便管理和調(diào)用。