在前端开发中，由于组件之间的相互独立性，组件之间的通信始终是一个难题。尤其是当应用变得越来越复杂时，这个挑战就变得更加显著了。
在 Redux 状态管理库中，跨组件通信似乎变得更加容易了。因为 Redux 的核心思想是通过创建一个单一的全局状态来管理应用的状态。但在实践中，这个问题仍然存在。
本文将介绍 Redux 中遇到的跨组件通信问题，并提供解决方法和示例代码。这将有助于你更好地管理你的应用状态并与其他组件通信。
问题：Redux 中如何从一个组件中访问应用的状态？
在 React Redux 应用程序中，我们在一个单独的组件中使用 connect() 函数来连接 Redux Store，并将需要的状态值从 Store 提取出来。例如：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
----- ----------- ------- --------- -
-------- -
----- - ------- - - -----------
------ -
--------- ------ ------------------
--
-
-
------ ------- ------------- -- --
-------- --------
-----------------在这个示例代码中，我们连接了 Redux 的 Store 并从 Store 提取了 my 状态。通过 props，我们可以在组件中访问它。
这种模式同样适用于任何需要 Redux 状态的其他组件。只需使用 connect() 和 Redux Store 中的数据即可。
问题：如何在一个组件中触发 Redux Store 中的动作？
正如我们在问题一中所看到的，组件可以使用 connect() 函数来连接 Redux Store，并获取其状态。那么如果我们需要在组件中执行某个操作，如何触发 Redux Store 中的 action？
为了解决这个问题，我们可以使用 dispatch() 函数。在 Redux Store 中，dispatch() 函数接受一个 action 对象并将其发送到 Store。与此同时，Store 将更新其状态并通知所有连接的组件。
例如，假设我们有一个应用程序，其中一个组件用于更改我们在 Redux Store 中存储的状态。那么我们可以按以下方式编写代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
----- ----------- ------- --------- -
------------- -
----- - -------- - - -----------
----------
----- ------------------
-------- ---- ----- ------
---
-
-------- -
------ -
---- -------------------------------------------- -----------
--
-
-
------ ------- -----------------------在这个示例代码中，我们连接了 Redux Store，并使用 dispatch() 函数来发送一个 action 对象。这将导致我们的 Redux Store 更新状态，并通知所有连接的组件。
问题：如何在不同的组件之间共享 Redux Store 中的数据？
有时候，在应用程序的不同组件中，我们需要访问相同的状态。例如，在一个电子商务应用程序中，购物车可能是许多组件所需要的数据。那么在 Redux Store 中如何共享这个购物车状态？
实际上，解决这个问题相对简单。只需确保在每个组件中，我们都连接了 Redux Store，并从中提取了相应的数据即可。
例如，我们可以创建一个单独的 ShoppingCart 组件，它从 Redux Store 中提取购物车状态并在其内部呈现这些数据。然后，我们可以将这个组件嵌套在其他所有相关组件中，其中需要访问购物车状态。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
----- ------------ ------- --------- -
-------- -
----- - --------- - - -----------
------ -
-----
------------ ---------
----
------------------- -- -
--- ------------------------------
---
-----
------
-
-
-
------ ------- ------------- -- --
---------- ----------------
------------------在这个示例代码中，我们创建了一个名为 ShoppingCart 的组件，它连接到 Redux Store 并从中提取购物车状态。然后，我们可以将该组件嵌套在其他任何需要访问购物车状态的相关组件中。
结论
在 Redux 中跨组件通信可能有些棘手，但是它可以通过连接 Redux Store 和调度相应的 action 来解决。此外，我们还可以使用单独的组件来共享状态并在应用程序中随时引用它。
当你开始学习如何使用 Redux 时，一些通信挑战可能会让你感到困惑。但是，一旦你了解了这个问题的解决方案，你就能够轻松管理你的应用程序状态并使其相互连接。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67751e546d66e0f9aaf3f552