Redux 是前端状态管理框架，通过统一状态树管理应用的状态，提高了应用的可测试性、可维护性和可扩展性。然而，Redux 标准的 middleware 没有提供很好的针对特定业务场景的定制能力，这时候，我们需要使用自定义的 middleware。本文将介绍如何使用 npm 包 redux-custom-middlewares 编写自定义 middleware。
安装
通过 npm 安装最新版的 redux-custom-middlewares 包。
npm install redux-custom-middlewares
基础用法
下面给出一个基础使用 redux-custom-middlewares 的示例。假设我们要实现一个简单的记录每个 Redux action 执行时间的 middleware。
-- -------------------- ---- ------- ------ - ---------------- ----------- - ---- ------- ------ - --------------------------- - ---- -------------------------- ----- ------- - ------ - --- ------- -- ------ -- -- ---------- ----- --------------- - ------------------------------ -- -- ----- ----- ----- - -------------------- ----------------------------------
以上代码创建了一个名为 traceMiddleware 的 middleware，它可以记录每个 Redux action 执行时间，并输出到控制台。在 createStore 函数中，我们将该 middleware 通过 applyMiddleware 方法注册到 store 中。
核心 API
redux-custom-middlewares 包提供了多个方法，以下是最常用的两个方法：
1. createMiddleware
function createMiddleware<Ext = {}, S = any>(
middleware: Middleware<Ext, S>
): Middleware<Ext, S>createMiddleware 方法可以用来将使用 Redux 标准 middleware 风格编写的 middleware 转换成 redux-custom-middlewares 风格。
例如，我们使用 Redux 标准的 logger middleware：
import { applyMiddleware, createStore } from 'redux'
import logger from 'redux-logger'
const reducer = (state = {}, action) => state;
// 创建 store
const store = createStore(reducer, applyMiddleware(logger));如果我们想要使用 redux-custom-middlewares 的 createNamespaceMiddleware 方法来增强该 middleware 功能，我们可以先将 logger middleware 转换成 redux-custom-middlewares 风格：
-- -------------------- ---- ------- ------ - ---------------- ----------- - ---- ------- ------ - ---------------- - ---- -------------------------- ------ ------ ---- -------------- ----- ------- - ------ - --- ------- -- ------ -- -- --------- ---------- ----- ------------------- - ----------------------------------- -- -- ------ ---------- - ------------------------ -- ----- ---------------- - ------------------------- -- -- -------- ---------- -- ----- ----- - -------------------- ------------------------------------ -------------------
2. createActionTraceMiddleware
-- -------------------- ---- -------
-------- ------------------------------- - -
---------- --------------------
---------- -- -- ---
---
--------- -
-------------- -------- ---------- -- --------
------------------- -------- ---------- -- ----------
--------- -------
-
-- ---------------createActionTraceMiddleware 方法可以快速创建一个 action 执行时间追踪 middleware。
options 参数说明：
- actionFilter：一个函数，作用是过滤需要记录执行时间的 action。
- actionTransformer：一个函数，作用是转换 action，一般来说，改变 action 的 payload 属性可以加强输出内容。
- console：一个对象，可以自定义输出方式，例如可以将执行时间记录到服务器。
下面是一个使用 createActionTraceMiddleware 方法的示例：
-- -------------------- ---- ------- ------ - ---------------- ----------- - ---- ------- ------ - --------------------------- - ---- -------------------------- ----- ------- - ------ - --- ------- -- ------ -- -- ---------- ----- --------------- - ----------------------------- ------------- ------ -- -------------------------------------- --- -- -- ----- ----- ----- - -------------------- ----------------------------------
结语
使用 redux-custom-middlewares 可以方便地编写针对特定业务场景的 middleware，并大幅提升 Redux 开发效率和质量。当然，本文介绍的内容只是冰山一角，如果您想深入了解，建议查看官方文档，或者阅读源代码注释。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8ae0