为何需要通用 Action？
在 Zustand 状态管理库中，开发者常常需要为状态对象的每个字段单独编写更新函数。然而，随着状态结构的复杂化，这种方式会导致代码冗余，维护成本增加。例如：
updateName: (name) => set(() => ({ name })),
updateAge: (age) => set(() => ({ age })),
updateEmail: (email) => set(() => ({ email })),
// 更多字段意味着更多重复代码
在类似 dva（类 Redux）框架中，通常通过定义一个通用 reducer 来简化状态更新操作：
export default {namespace: 'user',state: {name: '好人',age: 18,},reducers: {save(state, { payload }) {return { ...state, ...payload };},},
};
dispatch({ type: 'user/save', payload: { name: '更好的人' } });
那么，如何在 Zustand 中优雅地实现类似的功能？本文将介绍如何通过 TypeScript 泛型实现通用 Action，提升代码简洁性和可维护性。
通用 Action 的实现原理
通过 TypeScript 的泛型和 keyof 操作符，我们可以设计一个通用的更新函数，签名如下：
update: <K extends keyof State>(k: K, v: State[K]) => void;
该函数接受两个参数：
k：状态对象的键名，类型为keyof State，确保键名属于状态对象。v：对应键的新值，类型为State[K]，保证值与字段类型匹配。
这种设计不仅减少了重复代码，还提供了类型安全和自动补全支持。
完整实现方案
以下是实现通用 Action 的详细步骤：
1. 定义状态和 Action 类型
首先，定义状态和 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. 创建 Store 并实现通用 Action
在 Zustand 的 Store 中实现通用更新函数，并保留传统的单一字段更新函数以支持不同场景：
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
为了方便在组件中调用 Action，创建一个 Hook 来提取 actions 对象：
export function useStoreActions() {return useStore((state) => state.actions);
}
使用场景对比
传统方式
传统方式需要为每个字段调用特定的更新函数：
const actions = useStoreActions();actions.updateName('Alice');
actions.updateAge(25);
通用 Action 方式
使用通用 update 函数，代码更加简洁统一：
const actions = useStoreActions();actions.update('name', 'Alice');
actions.update('age', 25);
确保类型安全
通用 update 函数通过 TypeScript 泛型提供了强大的类型安全支持，确保：
- 只能更新状态中已定义的字段。
- 传入的值必须与字段类型匹配。
- 开发工具（如 VS Code）提供字段名的自动补全。
以下操作将触发类型错误：
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;
};
实现批量更新
在 Store 中添加 batchUpdate 函数：
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 });
总结
通过在 Zustand 中实现通用 Action，我们可以获得以下优势：
- 代码简洁：将所有更新逻辑统一到一个
update函数，减少重复代码。 - 类型安全：利用 TypeScript 泛型和
keyof操作符，确保字段和值的类型正确。 - 灵活扩展：支持批量更新，适应更复杂的业务场景。
- 清晰结构：将 Action 集中在一个对象中，避免与状态数据混淆，方便管理和调用。