使用 Redux Middleware 开发快速流应用程序
在前端开发领域中，Redux 是一种广泛使用的状态管理库。它通过将应用程序状态存储在单个地方并使用纯函数更新该状态来提高代码的可维护性和可重用性。但是， Redux 没有提供一种直接处理异步操作的机制。为了解决这个问题，Redux 提供了 middleware 中间件概念。
Middleware 是 Redux 中具有拦截和处理能力的函数。它可以访问并处理 Redux Action 在准备被发送到 Reducer 之前或之后发生的事件。使用 middleware，我们可以轻松地在 Redux 中实现异步操作。它们还有助于处理事件记录、日志记录、权限控制等相关操作。
在这篇文章中，我们将讨论如何使用 Redux Middleware 开发快速流应用程序。我们将深入了解 Middleware 的概念、如何编写自定义 Middleware，以及如何使用常见的 Middleware 库。
Middleware 的原理
在 Redux 中，Middleware 是在 Action 发送到 Reducer 之前和之后进行拦截和处理的函数。每个 Middleware 都有一个与之关联的 Action 处理器（有时也称为 Next），它接收 Action 并将其传递到下一个 Middleware 或 Reducer。Middleware 将处理 Action 并执行特定于应用程序的任务，例如记录、日志记录或读取现有状态。
下面是一个简单的 Middleware 函数，它会在每个送往 Reducer 的 Action 之前输出一些调试信息：
const myMiddleware = store => next => action => {
console.log('Action:', action);
const result = next(action);
console.log('State:', store.getState());
return result;
}这个函数采用了一个函数式编程的方式。它应该看起来很熟悉，因为这就是中间件的标准模板。它还包含一个用于输出调试信息的语句和一个位于 Middleware 链末端的返回语句，该语句将 Action 传递给 Reducer，并返回从 Reducer 返回的结果。这个函数中的 store 参数包含有关 Redux Store 的信息，例如 getState 和 dispatch 方法，可以在 Middleware 函数中使用。
编写自定义 Middleware
现在，我们已经了解了 Middleware 是如何工作的，下面我们将编写自己的 Middleware 来理解更多。
假设我们正在开发一个购物车应用程序，我们想要使用 Middleware 来记录每个 Action 的类型和时间戳，以便我们可以分析用户的购买行为。
首先，我们需要创建一个 Redux Store：
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);接下来，我们可以编写一个 Middleware 函数来记录用户购物车中添加、删除或调整某个商品时发生的所有行为：
const myMiddleware = store => next => action => {
console.log(`Action Type: ${action.type}, Timestamp: ${Date.now()}`);
const result = next(action);
return result;
}最后，我们需要将这个 Middleware 应用到 Redux Store 中：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----------- ---- ------------- ----- ------------ - ----- -- ---- -- ------ -- - ------------------- ----- --------------- ---------- ---------------- ----- ------ - ------------- ------ ------- - ----- ----- - ------------------------ -------------------------------
现在，每当用户添加、删除或调整商品时，我们都会收到一条记录，告诉我们发生的操作类型和时间戳。这样的信息可以用于制定更好的销售策略。
常见的 Middleware 库
Redux 生态系统有许多专门为标准的 Redux Middleware 链而创建的库。这里我们介绍两个最常见的 Middleware 库：
- Redux Thunk
Redux Thunk 是一个流行的 Middleware 库，它提供了一个简单的方式来处理异步 Action。它通过允许在 Action Creator 函数中返回一个函数（而不是一个简单的对象）来实现这一点，该函数接受 dispatch 和 getState 函数作为参数。这个库特别适合针对数据获取和 API 调用等 I/O 操作，因为它们通常需要一些时间来完成。
例如，我们将介绍如何使用 Axios 库访问网络 API。我们首先需要安装 Axios 库：
npm install axios
接下来，我们可以编写一个使用 Redux Thunk 的异步 Action Creator 函数，该函数会从 API 获取一些商品数据并将其存储在 Redux 中：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ------------- - -- -- ----- -------- -- -
---------- ----- ------------------------ ---
--- -
----- -------- - ----- ---------------------------
---------- ----- ------------------------- -------- ------------- ---
- ----- ------- -
---------- ----- ------------------------- -------- ------------- ---
-
--在这个示例中，我们首先在 Store 中分发一个 Action，该 Action 指示我们正在请求商品数据。接下来，我们使用 Axios 库发出 API 请求，如果请求成功，我们将收到数据并在 Store 中分发一个“FETCH_PRODUCTS_SUCCESS” Action。如果请求失败，我们将在 Store 中分发一个“FETCH_PRODUCTS_FAILURE” Action。这些 Action 将在 Reducer 中处理。
- Redux Logger
Redux Logger 是一个用于记录 Action 和状态更改的 Middleware 库。它可以将状态更改记录到浏览器控制台或服务器日志中，以便我们可以轻松地了解应用程序中发生的事件。
我们可以像下面这样使用 Redux Logger：
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(logger));这个例子使用 Redux Logger 中的一个默认值，该值将结构化重写的以前和以后的状态更改打印到控制台。由于日志信息本质上是贴近原始的状态更改，因此我们可以用大量的时间和精力来分析和了解应用程序的行为。因此它对于程序员 debug 是非常有帮助的。
结论
Redux Middleware 是 Redux 生态系统的一个重要组成部分。它们可以使我们轻松地在 Redux 中编写异步操作和处理复杂的事件记录逻辑。在本文中，我们介绍了 Middleware 的概念和原理，并演示了如何编写自己的 Middleware 和使用两个流行的 Middleware 库。希望它对你有所帮助！
完整示例代码:
- 创建 Store
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);- 编写自定义 Middleware
const myMiddleware = store => next => action => {
console.log(`Action Type: ${action.type}, Timestamp: ${Date.now()}`);
const result = next(action);
return result;
}- 将 Middleware 应用到 Store 中
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----------- ---- ------------- ----- ------------ - ----- -- ---- -- ------ -- - ------------------- ----- --------------- ---------- ---------------- ----- ------ - ------------- ------ ------- - ----- ----- - ------------------------ -------------------------------
- 使用 Redux Thunk 库
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ------------- - -- -- ----- -------- -- -
---------- ----- ------------------------ ---
--- -
----- -------- - ----- ---------------------------
---------- ----- ------------------------- -------- ------------- ---
- ----- ------- -
---------- ----- ------------------------- -------- ------------- ---
-
--- 使用 Redux Logger 库
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(logger));来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675266e68bd460d3ad93d46f