介绍
redux-modern-crud 是一个使用简单的 npm 包，旨在帮助开发人员轻松实现基于 Redux 的 CRUD（创建、读取、更新和删除）操作。此包提供了一套统一的接口，可在实体之间执行 CRUD 操作。该包还与大部分 UI 框架（如 React）兼容。
安装
npm install --save redux-modern-crud
如何使用
初始化
import createCrud from 'redux-modern-crud';
const { reducer, actions } = createCrud('books', {
fetchMethod: 'get',
});此示例中，createCrud 函数的第一个参数为实体名称，第二个参数是可选的配置对象。在此示例中，我们使用默认配置，从 HTTP GET 方法获取数据。
定义操作
export const {
create: createBook,
read: readBooks,
update: updateBook,
delete: deleteBook
} = actions;我们从 actions 对象中导出一个可变的操作集合。在此示例中，我们导出基本 CRUD 操作（即创建、读取、更新和删除）。
创建 Reducer
export default combineReducers({ books: reducer });然后我们将 reducer 函数与我们自己的 reducers 合并。
调用 API
function fetchBooks() {
return fetch('/api/books').then(response => response.json());
}
store.dispatch(readBooks(fetchBooks()));我们将 fetchBooks 函数传递给 readBooks 操作。这样，readBooks 操作将执行该函数，获取我们的数据。
绑定 React 组件
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
----- -------- ------- --------- -
------------------- -
-----------------------
-
-------- -
----- - ----- - - -----------
------ -
-----
--------------- -- -
---- --------------
---------------------
--------------------
------
---
------
--
-
-
----- --------------- - ----- -- --
------ ------------------
---
------ ------- ------------------------ - --------- -------------最后，我们使用 Redux 的 connect 函数将 store 和 action 传递给我们的 React 组件。在此示例中，我们将 readBooks 操作传递给 connect，以便在组件中读取所有书籍。
自定义操作
redux-modern-crud 还支持自定义操作。例如，下面是一个基于 createCrud 函数创建的高级 fetchAndCreate 操作：
-- -------------------- ---- -------
----- - ------- - - --------------------
----- - ------ - - --------
-------- -------------------- -
------ ----- ---------- -- -
-------------------------------
--- -
----- -------- - ----- ------------------- -
------- -------
----- ---------------------
-------- -
--------------- -------------------
--
---
----- ---- - ----- ----------------
-------------------------------
- ----- ----- -
------------------------------
-
--
-我们从 actions 中导入我们的 create 操作，然后创建了一个名为 fetchAndCreate 的新操作。fetchAndCreate 操作中的代码与使用相同方法完成的普通 HTTP 请求大致相同。
自定义操作与 createCrud 函数返回的操作具有相同的属性，例如 request、success 和 failure。在此示例中，我们使用 create.request、create.success 和 create.failure 构建我们自己的操作。
结论
希望此指南可以帮助你使用 redux-modern-crud 更快地编写基于 Redux 的应用程序！此包不仅为开发人员提供了非常好的引导，同时也为他们节省了开发时间。它不仅提供了出色的示例代码，还具有可扩展性，帮助开发人员根据自己的需要构建自己的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b92