简介
redux-crud-wip 是一个用于管理 CRUD 操作的 Redux Toolkit 扩展库。可以帮助开发者更方便地处理和管理数据。
安装
使用 npm 安装：
npm install redux-crud-wip
使用方法
创建模块
首先需要创建一个模块来描述数据结构和 CRUD 操作，可以使用 createCrudModule 方法来创建。例如，我们创建一个用户模块：
-- -------------------- ---- -------
------ - ---------------- - ---- -----------------
----- ----------- - ------------------
------------- --------
------------ -------------
-------- -
----- -
----------------- ---- ------ -- --
---
---- ----------
---
--
--
---上述代码中，createCrudModule 方法接收一个包含 resourceName、apiEndpoint、actions 等属性的对象作为参数。
resourceName：定义资源名称。apiEndpoint：定义 API 的接口地址。actions：提供操作资源的方法，例如 edit、create、delete 等。其中，transformPayload方法可以对请求体进行自定义处理，用于处理输入数据和转换数据格式。
添加 reducer
创建好模块后，要将其添加到 reducer 中。可以使用 combineReducers 方法将多个 reducer 合并成一个，然后将其传递给 store。例如：
-- -------------------- ---- ------- ------ - ---------------- -------------- - ---- ------------------- ------ - ------- -- ------------ - ---- ------------------ ----- ----------- - ----------------- ------ ------------- --- ----- ----- - ---------------- -------- ------------ ---
调用 API
使用 createAsyncThunk 方法调用 API，例如：
-- -------------------- ---- -------
------ - ---------------- - ---- -------------------
------ - ----------- - ---- ------------------
------ ----- ---------- - -----------------
--------------
----- -- -- -
----- -------- - ----- --------------------
------ ----- ----------------
-
--
------ ----- ---------- - -----------------
---------------
----- ------- -- -
----- ---- - ---------------------------------------------------
----- -------- - ----- ------------------- -
------- -------
----- ---------------------
-------- - --------------- ------------------ --
---
------ ----- ----------------
-
--上述代码中，在 createUser 中调用了 usersModule.actions.create.transformPayload 方法对请求体进行了处理。
使用 Redux 组件
在组件中，可以使用 useSelector 方法选择状态，并使用 useDispatch 方法发送异步请求。例如：
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ - ----------- ---------- - ---- -----------
----- -------- - -- -- -
----- ----- - ------------------- -- ------------------
----- -------- - --------------
----- ----------- - -- -- -
-----------------------
--
----- ------------ - -- -- -
----- ----- - - ----- ------ ---- -- --
----------------------------
--
------ -
-----
------- --------------------------- --------------
------- ----------------------------- -------------
----
----------------- -- -
--- ------------------------- -----------------
---
-----
------
--
--上述代码中，使用了 useSelector 方法选择了 users 模块下的 list 属性，并使用 useDispatch 方法发送异步请求，处理 API 的返回结果。
总结
redux-crud-wip 是一个管理数据的工具库，可以方便地处理 CRUD 操作。通过创建模块、添加 reducer、调用 API 和使用 Redux 组件，可以更简单地管理数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa481e8991b448d81de