redux-thunk-crud 是一款基于 Redux 和 redux-thunk 中间件实现的应用数据管理工具库，它可以通过简单易用的 API 帮助您轻松管理应用中的数据。
本文将介绍 redux-thunk-crud 的基本使用方法，希望能够为您在实际开发中的数据管理提供帮助。
安装
通过 npm 安装：
npm install redux-thunk-crud
使用
1. 初始化配置
在创建 Redux Store 之前，需要调用 configureCrud 方法进行初始化配置：
import { configureCrud } from 'redux-thunk-crud';
// 在创建 Store 之前进行初始化配置
configureCrud({
baseUrl: 'https://example.com/api/',
xhr: fetch,
});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：删除多条数据。
例如：
import { fetchList } from 'redux-thunk-crud';
export function fetchUsers() {
return fetchList(userResource);
}这样就创建了一个用于获取用户列表的 action，当你 dispatch 这个 action 时，redux-thunk-crud 会根据 resource 的配置发送网络请求并将请求结果存储在状态树中。
4. 创建 reducer
redux-thunk-crud 提供了 crudReducer 函数，可以根据资源名称自动生成 reducer。例如：
import { crudReducer } from 'redux-thunk-crud';
const rootReducer = combineReducers({
...crudReducer('users'),
...crudReducer('posts'),
});5. 创建 API
最后，所有的 API 都可以通过 resources 对象获取，例如：
-- -------------------- ---- ------- ------ - --------- - ---- ------------------- -- ------ ----- ----- - -------------------------- -- ------ ----- ---- - ----------------------- -- ---- ----- ------- - ------------------------ ----- ------ --- -- ---- ----- ----------- - ------------------------- - ----- ------ --- -- ------ ----- ------------------ - -------------------------------- - ----- --- --- -- ---- ----- ----------- - ----------------------------- -- ------ ----- ------------ - ------------------------------ -- ----
示例代码
1. 配置和初始化
-- -------------------- ---- ------- ------ - -------------- -------- - ---- ------------------- -- -- --------------- -------- --------------------------- ---- ------ --- -- ---- ----- ------------ - ---------- ----- -------- ---- ------------ ------ ----- ---
2. 创建 action
import { fetchList } from 'redux-thunk-crud';
export function fetchUsers() {
return fetchList(userResource);
}3. 创建 reducer
import { crudReducer } from 'redux-thunk-crud';
const rootReducer = combineReducers({
...crudReducer('users'),
});4. 创建 API
-- -------------------- ---- ------- ------ - --------- - ---- ------------------- -- ------ ----- ----- - -------------------------- -- ------ ----- ---- - ----------------------- -- ---- ----- ------- - ------------------------ ----- ------ --- -- ---- ----- ----------- - ------------------------- - ----- ------ --- -- ------ ----- ------------------ - -------------------------------- - ----- --- --- -- ---- ----- ----------- - ----------------------------- -- ------ ----- ------------ - ------------------------------ -- ----
结论
redux-thunk-crud 提供了便捷的 API，能够帮助我们更轻松地管理应用中的数据。同时，它也提供了丰富的配置项，让我们能够根据实际需求进行定制。
在使用过程中，需要注意的是，在安装和使用时，需注意版本之间的兼容性，以避免出现不必要的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8ce0