redux-thunk-crud 是一款基于 Redux 和 redux-thunk 中间件实现的应用数据管理工具库，它可以通过简单易用的 API 帮助您轻松管理应用中的数据。
本文将介绍 redux-thunk-crud 的基本使用方法，希望能够为您在实际开发中的数据管理提供帮助。
安装
通过 npm 安装：
--- ------- ----------------
使用
1. 初始化配置
在创建 Redux Store 之前，需要调用 configureCrud 方法进行初始化配置：
------ - ------------- - ---- ------------------- -- --- ----- --------- --------------- -------- --------------------------- ---- ------ ---
configureCrud 方法接收一个配置对象，包含以下属性：
baseUrl：数据请求的基础 URL，用于拼接完整的 API URL。xhr：发起网络请求的函数，默认使用fetch。
2. 定义资源
通过 resource 方法定义资源，例如：
------ - -------- - ---- ------------------- ----- ------------ - ---------- ----- -------- ---- ------------ ------ ----- --- ----- ------------ - ---------- ----- -------- ---- -------------- ------ ------- ---
resource 方法接收一个配置对象，包含以下属性：
name：资源名称，用于自动生成 action 的类型和名称。url：API URL 中资源的占位符。keyBy：指定用于唯一标识资源的字段名。
自动化 action：
- ----- --------------------------- ----- - --------- ------- -- - - ----- --------------------------- ----- - --------- ------- -- -------- -- --- -- ----- ------- -- - --- -- ----- ----- --- -
3. 创建 action
redux-thunk-crud 提供了一组用于生成 action 的函数：
fetchList：获取列表数据。fetchOne：获取单条数据。create：创建新数据。update：更新已有数据。partialUpdate：部分更新已有数据。deleteOne：删除单条数据。deleteMany：删除多条数据。
例如：
------ - --------- - ---- ------------------- ------ -------- ------------ - ------ ------------------------ -
这样就创建了一个用于获取用户列表的 action，当你 dispatch 这个 action 时，redux-thunk-crud 会根据 resource 的配置发送网络请求并将请求结果存储在状态树中。
4. 创建 reducer
redux-thunk-crud 提供了 crudReducer 函数，可以根据资源名称自动生成 reducer。例如：
------ - ----------- - ---- ------------------- ----- ----------- - ----------------- ------------------------ ------------------------ ---
5. 创建 API
最后，所有的 API 都可以通过 resources 对象获取，例如：
------ - --------- - ---- ------------------- -- ------ ----- ----- - -------------------------- -- ------ ----- ---- - ----------------------- -- ---- ----- ------- - ------------------------ ----- ------ --- -- ---- ----- ----------- - ------------------------- - ----- ------ --- -- ------ ----- ------------------ - -------------------------------- - ----- --- --- -- ---- ----- ----------- - ----------------------------- -- ------ ----- ------------ - ------------------------------ -- ----
示例代码
1. 配置和初始化
------ - -------------- -------- - ---- ------------------- -- -- --------------- -------- --------------------------- ---- ------ --- -- ---- ----- ------------ - ---------- ----- -------- ---- ------------ ------ ----- ---
2. 创建 action
------ - --------- - ---- ------------------- ------ -------- ------------ - ------ ------------------------ -
3. 创建 reducer
------ - ----------- - ---- ------------------- ----- ----------- - ----------------- ------------------------ ---
4. 创建 API
------ - --------- - ---- ------------------- -- ------ ----- ----- - -------------------------- -- ------ ----- ---- - ----------------------- -- ---- ----- ------- - ------------------------ ----- ------ --- -- ---- ----- ----------- - ------------------------- - ----- ------ --- -- ------ ----- ------------------ - -------------------------------- - ----- --- --- -- ---- ----- ----------- - ----------------------------- -- ------ ----- ------------ - ------------------------------ -- ----
结论
redux-thunk-crud 提供了便捷的 API，能够帮助我们更轻松地管理应用中的数据。同时，它也提供了丰富的配置项，让我们能够根据实际需求进行定制。
在使用过程中，需要注意的是，在安装和使用时，需注意版本之间的兼容性，以避免出现不必要的错误。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700de361a36e0bce8ce0