在 Redux 中，中间件是帮助我们处理异步逻辑，以及添加额外功能的重要手段。然而，对于中大型 Redux 应用，单个中间件的代码量可能会变得非常庞大，这给维护和复用造成了很大的困难。在本文中，我们将探讨如何提升 Redux 中间件的复用性和可维护性。
提取公共逻辑
在创建中间件之前，我们应该思考一个问题：我们所需要实现的逻辑，是否已经在其他中间件中处理过了。如果是，我们可以将这一部分公共逻辑提取出来，作为一个单独的函数或类，供我们的中间件使用。
例如，我们在不同的中间件中可能会用到一个 isValidAction 函数来检查 Redux action 是否符合某些规范。这个函数可以从多个中间件中提取出来，放在一个被称为 utils.js 的公共文件中：
export function isValidAction(action) {
return action && typeof action === 'object' && action.type && action.type.length > 0;
}接下来，我们可以在其他中间件文件中引入该函数来进行 action 检查：
-- -------------------- ---- -------
------ - ------------- - ---- ----------
------ ----- ------------ - ----- -- ---- -- ------ -- -
-- ------------------------ -
------ -------------
-
-- -----
-通过这种方式，我们可以避免多个中间件中编写相同的代码，减少重复劳动，提高代码复用和可维护性。
链式调用
在 Redux 中，我们可以使用 applyMiddleware 函数来同时使用多个中间件。例如：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ --------------- ---- -------------- ------ ---------------- ---- --------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ -------------------------------- ----------------- --
这种方式确实可以方便地使用多个中间件。但是，这也可能导致中间件之间的紧密耦合，进而导致代码维护困难。
如果我们需要在多个中间件中共享数据或状态，最好的方式是使用链式调用，而不是一次性传入所有中间件。
例如，我们可以编写一个名为 notificationMiddleware 的中间件，将其与其他中间件链接在一起：
-- -------------------- ---- -------
------ - ------------- - ---- ----------
-------- ----------------------------- -
------ -------------- -
------ ---------------- -
-- ----------------------- -
-------------- --- ------ --- ------------- --------
-
------ -------------
--
--
-
------ ------- -----------------------接下来，我们可以在创建 store 时将中间件链接起来：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ --------------- ---- -------------- ------ ---------------- ---- --------------- ------ ---------------------- ---- -------------------------------------- ------ ----------- ---- ------------- ----- ---------- - ----------------- ----------------- ------------------------ ----- ----- - ------------ ------------ ------------------------------ --
注意，在 notificationMiddleware 中，我们返回了一个函数，该函数接受一个名为 next 的参数。这里的 next 就是下一个中间件的 dispatch 函数。通过这种方式，我们实现了多个中间件之间的松耦合。
使用高阶函数
在 Redux 中，中间件通常使用闭包来实现某些功能。然而，当我们需要添加相似但略有不同的功能时，我们可能需要复制粘贴整个中间件代码并进行微小的修改，这样的代码重复是非常繁琐和容易导致错误的。
这时候，我们可以使用高阶函数来提高代码复用性。例如，我们可以编写一个名为 createFilterMiddleware 的高阶函数，用于创建一个接收特定 filter 参数的中间件：
-- -------------------- ---- -------
------ - ------------- - ---- ----------
-------- ------------------------------ -
------ --------------- -
------ -------------- -
------ ---------------- -
-- ---------------------- -- ------------- --- ------- -
------------------- ---------------- -- ------ --- ----------- ----------
-
------ -------------
--
--
--
-
------ ------- -----------------------使用这个高阶函数，我们就可以轻松地创建多个不同的中间件，而不必重复整个中间件代码。例如，如果我们需要一个传递了 .important 属性的 action 才会触发的中间件，我们可以这样创建它：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ --------------- ---- -------------- ------ ---------------- ---- --------------- ------ ---------------------- ---- -------------------------------------- ------ ----------- ---- ------------- ----- ------------------------- - ------------------------------------- ----- ---------- - ----------------- ----------------- --------------------------- ----- ----- - ------------ ------------ ------------------------------ --
总结
在本文中，我们探讨了如何在 Redux 中提升中间件的复用性和可维护性。我们提出了以下几点建议：
- 提取公共逻辑。
- 使用链式调用来实现多个中间件之间的松耦合。
- 使用高阶函数来提高代码复用性。
通过遵循这些建议，我们可以更轻松地开发、维护和重用我们的 Redux 中间件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646431d8968c7c53b0514359