Easy Peasy 状态管理：使用辅助函数泛化模型设计-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00204/article/details/148507847

Easy Peasy 状态管理：使用辅助函数泛化模型设计

easy-peasy Vegetarian friendly state for React 项目地址: https://gitcode.com/gh_mirrors/ea/easy-peasy

前言

在状态管理实践中，我们经常会遇到多个模型具有相似结构和行为的情况。Easy Peasy 提供了灵活的方式来创建可复用的模型辅助函数，帮助我们减少重复代码，提高开发效率。本文将详细介绍如何利用 Easy Peasy 的特性来泛化模型设计。

问题场景

假设我们正在开发一个电商应用，需要管理产品和用户两种数据。观察以下初始实现：

const store = createStore({
  products: {
    data: {},
    ids: computed(
      [state => state.data],
      (resolvedState) => {
        const [data] = resolvedState;
        return Object.keys(state.data)
      }
    ),
    fetched: action((state, products) => {
      products.forEach(product => {
        state.data[product.id] = product;
      });
    }),
    fetch: thunk(async (actions) => {
      const data = await fetchProducts();
      actions.fetched(data);
    })
  },
  users: {
    data: {},
    ids: computed(
      [state => state.data],
      (resolvedState) => {
        const [data] = resolvedState;
        return Object.keys(state.data)
      }
    ),
    fetched: action((state, users) => {
      users.forEach(user => {
        state.data[user.id] = user;
      });
    }),
    fetch: thunk(async (dispatch) => {
      const data = await fetchUsers();
      actions.fetched(data);
    })
  }
})

可以看到，products 和 users 两个模型的结构几乎完全相同，只是处理的数据类型不同。这种情况下，我们可以考虑创建一个通用的模型辅助函数。

创建通用模型辅助函数

我们可以将公共逻辑提取到一个辅助函数中：

const dataModel = (endpoint) => ({
  data: {},
  ids: computed(
    [state => state.data],
    (resolvedState) => {
      const [data] = resolvedState;
      return Object.keys(state.data)
    }
  ),
  fetched: action((state, items) => {
    items.forEach(item => {
      state.data[item.id] = item;
    });
  }),
  fetch: thunk(async (actions, payload) => {
    const data = await endpoint();
    actions.fetched(data);
  })
})

这个辅助函数接受一个端点函数作为参数，返回一个完整的模型配置。这样我们就可以轻松创建多个相似但处理不同数据的模型。

使用辅助函数重构

使用我们创建的辅助函数，之前的代码可以简化为：

const store = createStore({
  products: {
    ...dataModel(fetchProducts)
    // 可以在这里添加其他特定于产品的状态/操作
  },
  users: {
    ...dataModel(fetchUsers)
  }
})

这种实现方式不仅减少了代码量，还提高了代码的可维护性。如果需要修改数据获取逻辑，只需在辅助函数中修改一次即可。

TypeScript 实现

对于使用 TypeScript 的项目，我们可以进一步增强类型安全性：

export interface ObjectWithId {
  id: string;
}

export interface DataModel<DataItem extends ObjectWithId> {
  data: { [key: string]: DataItem };
  ids: Select<DataModel<DataItem>, string[]>;
  fetch: Thunk<DataModel<DataItem>>;
  fetched: Action<DataModel<DataItem>, DataItem[]>;
}

export const dataModel = <Items extends ObjectWithId>(
  endpoint: () => Promise<Items[]>
): DataModel<Items> => ({
  data: {},
  ids: select(state => Object.keys(state.data)),
  fetched: (state, items) => {
    state.data = items;
  },
  fetch: thunk(async (actions, payload) => {
    const data = await endpoint();
    actions.fetched(data);
  })
});

这个 TypeScript 实现定义了泛型接口和函数，确保类型安全。ObjectWithId 接口要求所有数据项必须包含 id 属性，DataModel 接口定义了模型的结构，dataModel 函数则实现了具体的逻辑。