Redux-easy-crud 是一个简单且优雅的实现增删改查的 CRUD 库，可以更方便地处理 JSON 数据。
安装
可以使用 npm 或 yarn 安装：
--- ------- --------------- ------ ---- --- ---------------
使用
初始化
在应用的入口文件中导入并创建 Store，然后将其传递给 Providern 组件：
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------ --------------- - ---- --------
------ - -------- - ---- --------------
------ - --------------- - ---- ------------------
------ - ------- -- ------------ - ---- -------------------
----- -------- - -
------ ------------
--
----- ----- - ----------------
--------------------------
-
-------- ------- -- --- ---
------------- ------- -- ---------- -------
---
----------------
--------- --------------
---- --
------------
-------------------------------
--这里我们使用 Redux 的 combineReducers 函数将多个 reducer 合并成一个，然后通过 createCrudStore 函数创建一个支持 CRUD 操作的 Store。
渲染视图
一旦 Store 被创建，就可以将其中的数据渲染到你的应用程序中。你可以使用 react-redux 库中提供的 HOC connect 函数将 Store 和 View 组件连接起来。
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------ - ---- ------------------
----- --------- ------- --------------- -
------------ - --- -- -
----- - ------ - - -----------
-------------------
----- ----- - -----------------------------
-- -------- -------
-------- ----- --- -- -------
--------------------- - ---
-
-------- -
----- - ---- - - -----------
------ -
-----
----- -----------------------------
------ ----------- ---------------- - ----- ------- -- --------------- - --- --
------- --------------------------
-------
----
-------------- -- -
--- --------------
------------
-----
---
-----
------
--
-
-
----- --------------- - ------- --------- -- --
----- ---------------------
---
------ ------- ------------------------ -
------ -- - ------- -----
--------------这里我们使用 react-redux 中的 connect 函数连接 TodoView 组件和 Store。此时，数据将由 redux-easy-crud 中的 reducer 和 actions 来管理。
数据操作（Action）
redux-easy-crud 在 Store 中添加了 6 个 action，用于增删改查操作的实现。
- fetchList: 获取数据列表
- fetchItem: 获取单条数据
- create: 创建一条数据
- update: 修改一条数据
- destroy: 删除一条数据
- reset: 重置相应的状态
这些 action 可以直接通过 props 传递给组件，再由组件触发执行。如：
-- ------ ------------------- - ----- - --------- - - ----------- ------------ - -- ------ ------------------- - ----- - --------- - - ----------- ------------- -- -- -- -- -- - -- ------ ------------ - --- -- - ----- - ------ - - ----------- ------------------- ----- ----- - ----------------------------- -- -------- ------- -------- ----- --- --------------------- - --- - -- ------ ------------ - ------ -- - ----- - ------ - - ----------- ----- -------- - ------------- ------- ---- ------- ------------ -- ----------- ------- --------------- - ------ -------- --- - -- ------ ------------- - ---- -- - ----- - ------- - - ----------- ------------ -
总结
redux-easy-crud 是一个强大且易于使用的 NPM 库，可以使开发者更容易地处理数据。我们可以使用它来快速增加、删除、修改、查询记录，从而快速开发应用程序。同时，我们要注意到，redux-easy-crud 可以让我们的代码更容易维护，并且使我们能够优化应用程序的性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067009e361a36e0bce8bd6