前言
redux-req-middleware 是一个方便开发者处理异步数据流（例如 API 请求或者 WebSocket 操作）的中间件。
通常情况下，Redux 要求应用中的所有数据和状态都以普通 JavaScript 对象的形式呈现。而做到这一点最简单的方式就是在 Action 的时候传递一个简单纯洁的 JavaScript 对象。但是，当进行异步操作时，这一方式可能会变得很困难。redux-req-middleware 正是为了解决这一个问题而生的。
在本篇文章中，我们将详细介绍 redux-req-middleware 的使用方法，以及为什么它很有用。
安装和配置
如果你已经有了一个使用 Redux 的项目，你可以直接通过 npm 安装 redux-req-middleware。
npm install redux-req-middleware
redux-req-middleware 的使用相对简单，只需要配置 middleware 并在创建 store 时启用即可。
import { createStore, applyMiddleware } from 'redux'
import { reqMiddleware } from 'redux-req-middleware'
const store = createStore(
reducer,
applyMiddleware(reqMiddleware)
)使用方式
创建一个可以执行 API 请求的 Action 并没有传统的 Redux Action 那样让人满意。传统的方式会将异步操作的 Action Creator 抽象成以下形式：
-- -------------------- ---- -------
-------- ------------ -
------ ---------- --------- -- -
---------- ----- ------------------- --
------ --------------------------------------
--------- -- -----------
---------- -- -
---------- ----- -------------------- -------- - ---- - --
--
------------ -- -
---------- ----- -------------------- -------- - ----- - --
--
-
-可以看到，这个函数对于操作类型（STARTED、SUCCESS、FAILURE）和逻辑都有巨大的依赖性。为了保持这种抽象的 Action Creator 清晰和总结的，我们可以将其封装成一个函数。
function createRequestActionTypes(key) {
const upperKey = key.toUpperCase()
return {
start: `${upperKey}_START`,
success: `${upperKey}_SUCCESS`,
failure: `${upperKey}_FAILURE`,
}
}-- -------------------- ---- -------
-------- --------------------------
------
--------
-- -
------ -------- -- --
------
----- --------- -
--- -
----- -------- - ----- ---------------
-- ---------------- -
----- --- -----------------------
- ---- -
------ -------------
-
- ----- ------- -
----- --- --------------------
-
--
--
-我们现在有了一种创建可以用于 API 请求的 Action Creator 的方式，这种方式很清晰和无耦合。
const types = createRequestActionTypes('LOAD_USER')
const loadUser = makeRequestActionCreator({
types,
callAPI: (id) => api.get(`/users/${id}`),
})我们可以将此 Action Creator 添加到组件并在触发时向 Redux Store 中发出 Action。
componentDidMount() {
const { dispatch } = this.props
dispatch(loadUser(42))
}通过使用 redux-req-middleware，我们可以在 Action 中直接使用普通的 JavaScript 对象，而不必创建一个巨大的异步函数。我们所需做的就是将每一个 API 请求抽象成一个简单无耦合的对象。
-- -------------------- ---- -------
----- --------------- - -
---- -
------- ------
---- ---------
------- -
----------- --
--------- ---
--
--
---------- ---------------------
---------- ---------------------
-这里的 req 对象描述了 API 调用的 HTTP 方法、请求 URL 和参数。回调方法 onSuccess 和 onFailure 都会在 API 调用成功或失败时被调用。
我们只需要向 Redux Store 中发出此请求对象的 Action：
dispatch(loadUsersAction)
此 Action 会经过 redux-req-middleware，并生成一个新的 Action 来指示请求是否成功、失败以及结果对象。
下面是解析结果并将其附加到 Redux store 的示例 Action：
function users(state = [], action) {
switch (action.type) {
case 'LOAD_USERS_SUCCESS':
return [...action.payload]
default:
return state
}
}结语
我们已经掌握了如何在应用程序中使用 redux-req-middleware。使用中间件进行异步操作可以让我们的应用更清晰、更专注于业务逻辑。如果您还没有尝试过，我们强烈建议您使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006734b890c4f727758376b