在 Zustand 中创建通用 Action

为何需要通用 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;

该函数接受两个参数：

1. k：状态对象的键名，类型为 keyof State，确保键名属于状态对象。
2. 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，我们可以获得以下优势：

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