前言
在现代 web 应用开发中，前端实现了更多复杂的逻辑和交互，redux 作为 react 中最主流的状态管理库，负责管理整个应用的状态。当应用变得越来越复杂时，redux 的复杂性也会随之增加，并且通过 redux 来实现 CRUD 的操作也会变得更加困难。为了解决这个问题，社区中出现了很多帮助 redux 简化 CRUD 操作的 npm 包，本文将介绍一个名为 @opstalent/redux-crud 的包。
一、安装
在使用 @opstalent/redux-crud 之前，需要先安装 redux 和 react-redux。
--- ------- ----- -----------
然后安装 @opstalent/redux-crud：
--- ------- ---------------------
二、使用
@opstalent/redux-crud 提供了一些 action 和 reducer，以及一些帮助函数来简化 redux 操作。
首先需要在 redux store 中配置 reducer：
-- ----------- ------ - --------------- - ---- -------- ------ - -------- -- ------------ - ---- ------------------------ ----- ----------- - ----------------- ---------------- -- - ------------ --- ----------- --- ------ ------- ------------
然后在组件中，使用 wrapper 函数来创建和 dispatch action：
-- ------------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --------------------- - ---- ------------------------
----- - -------- --------- - - -------------------------------
----- --------- ------- --------------- -
------------------- -
----- - -------- - - -----------
-----------
-
-------- -
----- - ----- - - -----------
------ -
-----
--------------- -- -
---- -------------------------------
---
------
--
-
-
----- --------------- - ----- -- --
------ ------------------------
---
----- ------------------ - -
-----------
--
------ ------- ------------------------ -------------------------------createResourceWrapper 函数接收一个参数，即资源的名称，该参数将被用于生成 action 和 selector 的名称。在上面的示例中，createResourceWrapper('users') 将生成名为 createUser、updateUser、deleteUser、getUsers、getUsersByIds、getAllUsers 等的 action 和 selectors。
在组件中，只需要调用相应的 action 名称并将相关的参数传递过去就能 dispatch action。例如 getUsers() 将 dispatch 名称为 GET_USERS 的 action。
同时，selectors 也提供了 getAll、getById、getByStringId、getStatusCode、getError 等方法，方便组件获取 state 中的数据。
三、总结
使用 @opstalent/redux-crud 可以方便地实现基于 redux 的 CRUD 操作，极大地简化了 redux 的操作，避免了代码重复，提高了开发效率。同时 @opstalent/redux-crud 也提供了可配置的功能，可以满足更多个性化需求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065b4ac6eb7e50355dbfc9