如何在 Redux Store 中用 300 行代码替换 2000 行代码 — 且不破坏应用程序!

我观察到使用 Redux 存储的开发人员有一个共同的模式:当面对新的但略有不同的要求时,他们通常会创建新功能并重写通用样板代码,包括 Reducer、Thunk、Action 和中间件。这可能会导致整个代码库出现大量重复。

我们不能完全责怪开发人员,因为标准化和团队最佳实践通常由团队领导制定......

但是,当 API 或微服务标准化时(其中诸如删除、创建、放置和获取等端点遵循可预测的结构),可以创建可以动态生成 Redux Reducer 和操作的高阶函数。这减少了冗余并鼓励更可扩展的架构。以下是如何实现此目的的示例:

https://gist.github.com/ARAldhafeeri/1ad10710bee110b9a88013984272fbbd

它有 200 行代码,下面是它的示例用法:

  • 动态 Redux 切片创建:函数 createEntitySlice 为实体(如预订或用户)生成 Redux 切片,允许开发人员以最少的样板代码轻松地为任何实体创建、读取、更新和删除数据。
  • 可定制参数:该函数接受可定制参数,例如 entityName、endpoint、extraReducers、extraThunks 和 extraActions,从而能够灵活地适应不同的实体和特定要求。
  • 基本 CRUD Thunk:它为常见操作(如获取、创建、更新、删除和搜索)提供基本异步 Thunk,这些操作根据提供的端点与 API 进行交互。这些 Thunk 管理必要的 API 调用并处理错误。
  • 用于状态管理的 Reducer:该切片包括用于管理加载状态、存储获取的数据、处理错误以及执行搜索和重置状态等操作的 Reducer。
  • 中间件集成:代码集成了监听器中间件,以处理副作用,例如根据 CRUD 操作的结果显示成功或错误消息。它还增强了中间件,使其能够自定义状态更改的行为,例如在满足某些条件时触发其他操作。
  • 优化代码可重用性:通过使用这种高阶函数方法,开发人员可以避免重复的样板代码,并为不同的实体创建可重复使用的动态切片,而无需每次手动写出操作和减速器。
  • 可扩展和模块化:高阶函数从 redux 存储中为某个功能生成所需的功能,同时我们还可以扩展其中的所有内容,从 Reducer 到初始状态,因此当自定义端点到达时,如果它不属于我们创建的通用基础,我们只需添加它即可。
  • 最好的,

    艾哈迈德,