简介
redux-dynamic-middlewares 是一个可用于动态添加 redux 中间件的 npm 包。它提供了一种灵活的机制，以便在 redux 应用程序中方便地引入和移除中间件。
安装
可以通过 npm 或者 yarn 安装：
npm install redux-dynamic-middlewares --save
或者
yarn add redux-dynamic-middlewares
基本用法
首先，使用 applyMiddleware 函数来应用 middleware：
import { createStore, applyMiddleware } from 'redux';
import { createMiddleware } from 'redux-dynamic-middlewares';
const middleware = createMiddleware();
const store = createStore(
reducer,
applyMiddleware(middleware)
);现在，您可以使用 middleware 来注册您的 middleware。例如，添加一个 logger middleware：
-- -------------------- ---- ------- ------ ----- ------ - ----- -- ---- -- ------ -- - -------------------------- -------- --- ------ - ------------- ----------------- ------- ------------------ ------ ------- -- ----------------------- -- -- ------ ---------- --------------------------
动态添加 Middleware
除了在创建 store 时添加 middleware 之外，您还可以在任何时候动态添加 middleware，甚至在处理某些 action 之前添加 middleware。
例如，在处理一个带有 ADD_TODO 类型的 action 之前，添加一个 logger middleware：
store.dispatch({ type: 'ADD_TODO', payload: 'Buy Milk', beforeMiddlewares: [logger] });在 redux-dynamic-middlewares 中，我们使用 beforeMiddlewares 和 afterMiddlewares 参数来指定在处理 action 之前或之后要添加的特定 middleware。
示例代码
下面是一个示例代码，演示了如何在 Redux 应用中使用 redux-dynamic-middlewares：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ---------------- - ---- ----------------------------
----- -------- - -----------
-- ------- --
-------- ------------- - --- ------- -
------ ------------- -
---- ---------
------ ---------- ----------------
--------
------ ------
-
-
-- ------ ----------
------ ----- ------ - ----- -- ---- -- ------ -- -
-------------------------- --------
--- ------ - -------------
----------------- ------- ------------------
------ -------
--
-- ----- ----------
------ ----- ----- - ----- -- ---- -- ------ -- -
--- -
------ -------------
- ----- ----- -
--------------------- -- ------------ -----
------ ----
-
--
----- ---------- - -------------------
-- -- ----------
-----------------------
----------------------
----- ----- - ------------
--------
---------------------------
--
-- -- -----
------------------ -- -
------------------------------
---
-- --- ------ ---- ----------
----------------
----- ---------
-------- ---- ------
------------------ --------
---
-- --- ------ ---- ----------
----------------
----- ---------
-------- ---- -------
----------------- --------
---
运行上面的示例代码后，您将在控制台中看到以下输出：
-- -------------------- ---- ------- ----------- ------ ----------- -------- ---- ------ ------------------ --------- --- ---------- ---- ---- ----- ----- ----------- ------ ----------- -------- ---- ------ ------------------ --------- ------ ---------- ---- ---- ----- ----- ---- ----------- ------ ----------- -------- ---- ------- ----------------- --------- ----- ----- ---------- ---- ---- ----- ----- ---- ---- ----------- ------ ----------- -------- ---- ------- ----------------- --------- ----- ---- ----- ---------- ---- ---- ----- ----- ---- ---- ----
结论
通过使用 redux-dynamic-middlewares，您可以轻松地在您的应用程序中引入和移除中间件，这使得应用程序更加灵活和易于维护。示例代码显示了如何在 Redux 应用程序中使用 redux-dynamic-middlewares 并动态添加 middleware。现在，您可以在自己的项目中使用它，并在必要时轻松调整 middleware。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f4f23518250f93ef89002f8