在 React 应用程序中，使用 Redux 管理应用程序状态是一种流行的方式。但是，在使用 React Router 进行路由设置时，如何从路由组件中访问 Redux 存储可能会变得不那么明显。本文将详细介绍如何实现这个目标。
为什么要访问 Redux Store？
当我们使用 React Router 控制页面路由时，每个路由都对应于一个组件。然而，有时我们需要在多个路由中使用相同的数据。在这些情况下，通过将所有数据存储在 Redux Store 中，我们可以轻松地将状态传递给任何需要它的组件。
实现方法
假设我们有一个名为 todos 的 Redux 存储，其中包含待办事项列表。现在，我们希望在两个路由组件中访问这个存储：/todos 和 /todos/:id。以下是如何实现这个目标的步骤：
步骤 1：创建 mapStateToProps 函数
首先，我们需要创建一个可以连接到 Redux Store 的函数，并将其导出给路由组件使用。我们可以使用 mapStateToProps 函数来获取我们需要的特定部分的状态。在本例中，我们只需要获取 todos 部分的状态。
-- ---------------------- ------ ----- -------- - ----- -- ------------
步骤 2：在路由组件中使用 mapStateToProps 函数
接下来，我们需要将 mapStateToProps 函数连接到路由组件中。为此，我们可以使用 React Redux 的 connect 函数。
-- -------------------------- ------ - ------- - ---- -------------- ------ - -------- - ---- --------------------- ----- -------- - -- ----- -- -- - -- -------- -- ----- --------------- - ----- -- -- ------ ---------------- --- ------ ------- -----------------------------------
步骤 3：在路由中渲染组件
现在，我们已经将 mapStateToProps 函数与路由组件连接起来，接下来我们需要在路由中渲染它。以下是示例代码：
-- ----------
------ - -------------- ----- - ---- -------------------
------ -------- ---- ------------------------
------ ----------- ---- ---------------------------
----- --- - -- -- -
---------------
------ ------------- -------------------- --
------ ----------------- ----------------------- --
----------------
--
------ ------- ----结论
通过这种方式，我们可以轻松地从路由组件中访问 Redux 存储，并在多个路由中共享状态。虽然这只是一个简单的例子，但它可以应用于更复杂的应用程序中，并且可以帮助您更好地管理您的应用程序状态。
示例代码
下面是完整的示例代码：
-- ----------------------
------ ----- -------- - ----- -- ------------
-- --------------------------
------ - ------- - ---- --------------
------ - -------- - ---- ---------------------
----- -------- - -- ----- -- -- -
-- --------
--
----- --------------- - ----- -- --
------ ----------------
---
------ ------- -----------------------------------
-- ----------
------ - -------------- ----- - ---- -------------------
------ -------- ---- ------------------------
------ ----------- ---- ---------------------------
----- --- - -- -- -
---------------
------ ------------- -------------------- --
------ ----------------- ----------------------- --
----------------
--
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27694