在 Redux 中，应用状态的管理通常通过创建一个全局唯一的 store 来处理。这意味着 Redux 的工作方式与传统的依赖注入（DI）实践不同。但是，在某些情况下，我们仍然需要在 Redux 应用中使用 DI，如在 Redux 中使用异步请求、多语言支持或使用中间件的情况下。
本文将介绍 Redux 中依赖注入的实现方法，并提供一些实用的示例代码。
为什么需要 DI
在 Redux 中，我们创建了一个唯一的 store，而所有组件共享这个 store。尽管这种共享数据的方式可以提供统一的状态管理方案，但是在一些特定情况下，我们将需要声明不同于当前 store 形式的数据，如异步请求响应或多语言支持。
在这些情况下，我们需要 DI 来注入这些数据或功能。通过 DI，我们可以以独立的方式处理这些功能，并确保我们的代码具有可靠性和可测试性。
DI 的实现方法
为了实现 Redux 中的 DI，我们可以使用 Redux 提供的 applyMiddleware() 函数。applyMiddleware() 函数允许我们增强 Redux 的 dispatch 函数并允许我们在 action 被 dispatch 之前或之后注入代码。
具体来说，我们可以编写一个中间件将依赖项注入到 action 中，然后 dispatch 该操作。中间件看起来像这样：
const myMiddleware = store => next => action => {
// 在这里注入您需要的依赖项
action.dependency = 'xyz';
return next(action);
};在上面的代码中，我们使用了一个典型的 Redux 中间件格式。该中间件接受一个 store 对象作为参数，并返回一个函数，该函数被调用来处理 action。在 dispatch() 调用中间件时，此函数接受一个 action 对象作为参数。
在上面的示例中，我们将注入了一个简单的字符串依赖项，但实际上，我们可以执行任何操作，包括读取数据、创建实例等。这允许我们在 Redux 应用中使用 DI 并提供可测试性。
实际应用
接下来，让我们看看如何在实际应用中使用 DI。
多语言支持
在 Redux 应用程序中实现多语言支持时，我们可以使用 DI 来注入翻译服务。例如，我们可以使用一个名为 translateService 的简单服务：
-- -------------------- ---- -------
----- ---------------- - -
-------------- --------- -
-- ------------------
-- ---
------ ---------------
--
--
----- ------------------- - ------- -- ------ -- -------- -- -
-- ---------------------- -
----- - ---- -------- - - ---------------------
----- -------------- - ------------------------------- ----------
----------- - ---------------
-
------ -------------
--在上面的代码中，我们定义了一个 translateService，它有一个可以接受两个参数的 translate() 方法。然后，我们编写了一个中间件，该中间件使用 translate() 方法将传递到 action 中的 key 和 language 翻译成文本。该代码通过将翻译后的文本附加到 action 对象中的 text 属性来执行此操作。
异步请求
在完成异步请求时，我们可以注入一个名为 apiService 的服务。这样，我们就可以以独立的方式处理 API 调用。
-- -------------------- ---- -------
----- ---------- - -
----- ----------- -
----- -------- - ----- --------------------------------------
------ ----------------
--
--
----- --------------- - ------- -- ------ -- ----- -------- -- -
-- ------------ --- ------------- -
--- -
----- ---- - ----- -----------------------
---------------- ----- --------------------- -------- ---- ---
- ----- ------- -
---------------- ----- -------------------- ----- ---
-
-
------ -------------
--在上面的代码中，我们定义了一个名为 apiService 的服务，并将其注入到 asyncMiddleware 中。在 middleware 中，我们使用 apiService 调用 fetchData()，然后根据 API 响应 dispatch 成功或失败的 action。
组合 DI
最后，让我们看看如何组合 DI 以提高可测试性和可维护性。例如，假设我们有一个需要将时间戳转换为本地日期的应用程序。我们可以编写一个名为 dateService 的服务来完成此操作，然后将其注入到异步请求中。
-- -------------------- ---- -------
----- ----------- - -
------------------ -
----- ---- - --- ----------------
------ ----------------------
--
--
----- ---------- - -
----- ----------- -
----- -------- - ----- --------------------------------------
----- --------- - --------------------------
----- ---- - -------------------------------
------ - ---------- ---- --
--
--
----- --------------- - ------- -- ------ -- ----- -------- -- -
-- ------------ --- ------------- -
--- -
----- - ---------- ---- - - ----- -----------------------
---------------- ----- --------------------- -------- - ---------- ---- - ---
- ----- ------- -
---------------- ----- -------------------- ----- ---
-
-
------ -------------
--在上面的代码中，我们向 apiService 注入了 dateService 服务，并使用该服务将时间戳转换为本地日期。在异步请求完成后，我们将该日期包含在成功 action 的 payload 中，使我们可以在组件中显示日期。
结论
依赖注入对于 Redux 应用程序是有用的。通过使用中间件和注入服务，我们可以提高可测试性和可维护性，并处理与 Redux store 形式不同的数据。
在本文中，我们学习了如何在 Redux 中实现 DI 并使用多语言支持和异步请求服务的示例。通过使用此方法，我们可以编写更好的代码，使得它更易于阅读和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee98896fbf960197253876