在 Zustand 中创建通用 Action

为何需要通用 Action？

在 Zustand 状态管理库中，开发者常常需要为状态对象的每个字段单独编写更新函数。然而，随着状态结构的复杂化，这种方式会导致代码冗余，维护成本增加。例如：

1. updateName: (name) => set(() => ({ name })),
2. updateAge: (age) => set(() => ({ age })),
3. updateEmail: (email) => set(() => ({ email })),
4. // 更多字段意味着更多重复代码

复制代码

在类似 dva（类 Redux）框架中，通常通过定义一个通用 reducer 来简化状态更新操作：

1. export default {
2.   namespace: 'user',
3.   state: {
4.     name: '好人',
5.     age: 18,
6.   },
7.   reducers: {
8.     save(state, { payload }) {
9.       return { ...state, ...payload };
10.     },
11.   },
12. };

复制代码

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

复制代码

那么，如何在 Zustand 中优雅地实现类似的功能？本文将介绍如何通过 TypeScript 泛型实现通用 Action，提升代码简洁性和可维护性。
通用 Action 的实现原理

通过 TypeScript 的泛型和 keyof 操作符，我们可以设计一个通用的更新函数，签名如下：

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

复制代码

该函数接受两个参数：

• k：状态对象的键名，类型为 keyof State，确保键名属于状态对象。
  
• v：对应键的新值，类型为 State[K]，保证值与字段类型匹配。
  

这种设计不仅减少了重复代码，还提供了类型安全和自动补全支持。
完整实现方案

以下是实现通用 Action 的详细步骤：
1. 定义状态和 Action 类型

首先，定义状态和 Action 的类型，确保类型安全：

1. 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 中实现通用更新函数，并保留传统的单一字段更新函数以支持不同场景：

1. import { create } from 'zustand';
3. type Store = State & { actions: Action };
5. export const useStore = create<Store>()((set) => ({
6.   name: '',
7.   age: 18,
8.   actions: {
9.     updateName: (name) => set(() => ({ name })),
10.     updateAge: (age) => set(() => ({ age })),
11.     update: (k, v) => set(() => ({ [k]: v })),
12.   },
13. }));

复制代码

3. 提取 Action 的便捷 Hook

为了方便在组件中调用 Action，创建一个 Hook 来提取 actions 对象：

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

复制代码

使用场景对比

传统方式

传统方式需要为每个字段调用特定的更新函数：

1. const actions = useStoreActions();
3. actions.updateName('Alice');
4. actions.updateAge(25);

复制代码

通用 Action 方式

使用通用 update 函数，代码更加简洁统一：

1. const actions = useStoreActions();
3. actions.update('name', 'Alice');
4. actions.update('age', 25);

复制代码

确保类型安全

通用 update 函数通过 TypeScript 泛型提供了强大的类型安全支持，确保：

• 只能更新状态中已定义的字段。
  
• 传入的值必须与字段类型匹配。
  
• 开发工具（如 VS Code）提供字段名的自动补全。
  

以下操作将触发类型错误：

1. actions.update('nonexistent', 'value'); // 错误：字段不存在
2. actions.update('age', '25'); // 错误：类型不匹配

复制代码

扩展：支持批量更新

为了进一步提升灵活性，可以扩展通用 Action 以支持批量更新：
类型定义

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

复制代码

实现批量更新

在 Store 中添加 batchUpdate 函数：

1. export const useStore = create<Store>()((set) => ({
2.   name: '',
3.   age: 18,
4.   actions: {
5.     updateName: (name) => set(() => ({ name })),
6.     updateAge: (age) => set(() => ({ age })),
7.     update: (k, v) => set(() => ({ [k]: v })),
8.     batchUpdate: (updates) => set((state) => ({ ...state, ...updates })),
9.   },
10. }));

复制代码

使用批量更新

1. const actions = useStoreActions();
3. actions.batchUpdate({ name: 'Bob', age: 30 });

复制代码

总结

通过在 Zustand 中实现通用 Action，我们可以获得以下优势：

• 代码简洁：将所有更新逻辑统一到一个 update 函数，减少重复代码。
  
• 类型安全：利用 TypeScript 泛型和 keyof 操作符，确保字段和值的类型正确。
  
• 灵活扩展：支持批量更新，适应更复杂的业务场景。
  
• 清晰结构：将 Action 集中在一个对象中，避免与状态数据混淆，方便管理和调用。
  

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！