前端开发中，我们往往需要处理后端 API 的请求和响应，同时也需要管理前端组件的状态。在 React 生态圈中，一个非常常见的做法是使用 Redux 来管理应用的状态，并使用 redux-thunk 中间件处理异步的 action。这里介绍一个名为 resourceful-action-creators 的 npm 包，它可以帮助我们更方便地编写 action 和 reducer。
功能介绍
resourceful-action-creators 提供了以下几个功能：
- 自动生成简单的 CRUD 操作的 action 和 reducer。
- 支持异步请求的开始、成功和失败，以及请求结束时的状态更新。
- 支持请求开始和结束时的 loading 状态管理。
基础用法
通过 npm 安装 resourceful-action-creators：
npm install resourceful-action-creators
示例代码
以一个简单的博客管理前端应用为例，介绍 resourceful-action-creators 的用法。首先定义一个 blog 的资源：
-- -------------------- ---- -------
----- ------------ - -
----- -------
---------- -
------ - ------- ------ ---- -------- --
----- - ------- ------ ---- ------------ --
------- - ------- ------- ---- -------- --
------- - ------- -------- ---- ------------ --
------- - ------- --------- ---- ------------ -
-
--
然后在 Redux store 中使用 resourceful-action-creators：
import { createResourcefulActionCreators, createResourcefulReducer } from 'resourceful-action-creators';
const blogActionCreators = createResourcefulActionCreators(blogResource);
const blogReducer = createResourcefulReducer(blogResource);
// 将 blogReducer 加入 combineReducers，以便跟其他 reducer 一起管理应用状态
接着在 React 组件中使用：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
----- ---- - -- -------- ------ ---------- ----- -- -- -
------------ -- -
----------------
-- ----
-- ----------- ------ ------------ ----------
-- ------- ------ ----------- ----------------------
------ -
-----
----
--------------- -- -
--- --------------
-- -------------------------------------------
-----
---
-----
------
--
--
----- --------------- - ----- -- --
------ -----------------
---------- ---------------------
------ ----------------
---
----- ------------------ - -------- -- --
-------- -------------------------------------- ---------
---
------ ------- ------------------------ --------------------------
在上面的示例中，我们使用了 resourceful-action-creators 自动生成的 index action、posts state、isLoading state 和 error state。同时我们也可以自定义一些 action，比如：
export const create = data => dispatch =>
api.post('/posts', data).then(
response => dispatch({ type: CREATE_SUCCESS, payload: response }),
error => dispatch({ type: CREATE_FAILURE, payload: error, error: true })
);
高级用法
resourceful-action-creators 还提供了很多高级用法，比如：
- 支持自定义 reducer 的 state key 和 action type 的前缀。
- 支持对 response 数据进行转换。
- 使用 redux-saga 代替 redux-thunk 处理异步 action。
- 等等。
更多用法可以参考官方文档和源代码。使用 resourceful-action-creators 可以大大减少我们的代码量，提高开发效率和可维护性，非常值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fda81e8991b448dd6e8