前言
在前端开发中，我们经常需要使用到 redux 管理数据流。而在 redux 中，我们可以通过使用 thunk、saga、middleware 等工具来处理异步 action。今天，我将向大家介绍另一种处理异步 action 的 npm 包：redux-processor。
redux-processor 是一个用于处理异步 action 的 redux 中间件，它通过使用 redux-saga 来实现异步任务的控制。使用 redux-processor，我们可以很轻松地实现诸如发起异步请求、轮询等操作。
安装
通过 npm 安装 redux-processor：
npm install --save redux-processor
接下来，在 redux createStore 中使用 applyMiddleware 来添加 redux-processor：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ --------- ---- -----------------
------ -------------------- ---- ------------
------ - ----------- - ---- ------------
------ -------- ---- ---------
----- -------------- - ----------------------
----- ----- - ------------
------------
----------------
---------------
---------
-
-
----------------------------使用
redux-processor 的主要功能是用于处理异步 action，使用 redux-processor，我们可以将处理异步 action 的逻辑和业务逻辑分离。具体使用方法如下：
1. 定义异步 action
在创建 action 时，我们需要为异步 action 定义一个类型，这个类型需要以 suffix “_REQUEST”、”_SUCCESS”、”_FAILURE” 结尾，代表异步请求的不同阶段，如下所示：
const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST'
const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS'
const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE'
const fetchDataRequest = () => ({ type: FETCH_DATA_REQUEST })
const fetchDataSuccess = (data) => ({ type: FETCH_DATA_SUCCESS, data })
const fetchDataFailure = (error) => ({ type: FETCH_DATA_FAILURE, error })2. 定义异步处理方法
我们需要定义一个异步处理方法，用来执行异步请求。这个方法需要返回一个 Promise 对象，并使用相应的 suffix 来产生异步 action，如下所示：
const fetchData = async () => {
try {
const data = await Api.fetchData()
return fetchDataSuccess(data)
} catch (error) {
return fetchDataFailure(error)
}
}3. 使用 redux-processor 处理异步 action
在调用异步处理方法时，我们需要使用 redux-processor 的 process 方法，这个方法接收一个参数 action，并返回一个 Promise 对象。我们需要将这个 Promise 对象返回给调用者，如下所示：
-- -------------------- ---- -------
----- ---------------- - -- -- ----- ---------- --------- -- -
----------------------------
--- -
----- ---- - ----- ------------------------------
--------------
- ----- ------- -
--------------------
-
-以上代码中，我们首先调用了 dispatch(fetchDataRequest())，告诉渲染器开始请求数据，然后使用 processor.process 方法处理异步请求，并将处理结果 dispatch 到 store 中。
注：processor.process 方法内部使用了 redux-saga，因此我们需要确保 sagaMiddleware 已经正确地配置。
4. 在组件中使用异步 action
最后，在我们的组件中调用异步处理方法，如下所示：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------------ ----------- - ---- -------------
------ - ---------------- - ---- -----------
------ ----- --- - -- -- -
----- -------- - -------------
----- ---- - ----------------- -- -----------
------------ -- -
----------------------------
-- -----------
------ -
-----
----- -- --------------- ------ -- -
-- ----------------------
---
------
-
-在以上代码中，我们使用了 useSelector 来从 store 中获取 data 数据，并使用 useEffect 来在组件挂载后调用 fetchDataProcess 方法。
总结
在今天的文章中，我们一起学习了如何使用 npm 包 redux-processor 来处理异步 action，通过使用 redux-processor，我们可以轻松地将异步请求的操作和业务逻辑分离开来，让代码更加易读和易维护。希望这篇文章能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d530d0927023822a8d