在 React 应用中，组件复用是一种非常常见的需求，能够有效提高代码的可维护性和可扩展性。然而，在使用 React Router 进行页面路由的过程中，我们可能会遇到一些问题，例如在页面间传递数据、管理全局状态等。为了解决这些问题，我们可以结合使用 Redux 和 React Router，实现一个更为优雅和高效的组件复用方案。
Redux 简介
Redux 是一个 JavaScript 状态管理库，用于管理 Web 应用中的所有数据状态。它通过将应用程序的状态存储在一个单一的、可预测的状态容器中，并强制执行约定，使得状态管理变得简单而可预测。
Redux 的三个核心概念是：store、action 和 reducer：
- store：应用程序的单一状态容器，存储应用程序中的所有状态。
- action：描述应用程序中的某个事件的普通对象。
- reducer：一个纯函数，将当前状态和一个特定的 action 作为输入参数，并生成一个新的状态。
React Router 简介
React Router 是一个流行的 React 应用程序的路由库。它提供一套简单、灵活和可扩展的 API，用于管理应用程序中不同页面的路由。
React Router 主要包含两种路由方式：
- route matching：使用路径匹配来确定当前页面的哪些组件应该呈现。
- declarative routing：在组件声明中使用路由来描述应该如何渲染组件。
Redux 和 React Router 的结合使用
Redux 和 React Router 可以相互结合，以便更好地管理应用程序的状态和路由。为了实现这种结合使用，我们可以使用如下的方法：
- 在 Redux 的 store 中存储路由信息，以便在整个应用程序中使用。
- 在每个 React Router 组件中读取 Redux store 中的路由信息，并将其传递到子组件。
这种方法可以有效地管理应用程序的状态和路由信息，并实现组件的高效复用。
下面是一个示例代码，演示如何将 Redux 和 React Router 结合使用：
-- -------------------- ---- -------
-- ------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ - ------------- -- ------- ------- ----- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
-- ------
----- ------------ - -
------- -
--------- -----
------ -----
--
-------- -
----- ---
-------- -----
--
--
-- -- ------- --
-------- ----------------- - ------------- ------- -
-- ----- ------------------
------ ------------- -
---- ---------------
------ -
---------
------- -
----------------
--------- ---------------
--
--
---- ------------
------ -
---------
------- -
----------------
------ ---------------
--
--
---- -------------------
------ -
---------
-------- -
-----------------
----- ---------------
--
--
---- ----------------------
------ -
---------
-------- -
-----------------
-------- ---------------
--
--
--------
------ ------
-
-
-- -- -----
----- ----- - -------------------------
-------- ----- -
------ -
--------- --------------
--------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
---------
-----------
--
-
------ ------- ----在上面的代码示例中，我们定义了一个 Redux store，其中包含了应用程序的路由信息和产品列表信息。我们还定义了一个 rootReducer 函数，用于处理不同的 action，并生成新的状态。在 App 组件中，我们使用 Provider 组件将 store 传递到整个应用程序中，并使用 Router 和 Switch 组件定义应用程序的路由。
下面是一个示例的 Home 组件，演示如何在组件中读取 Redux store 中的路由信息，并将其传递到子组件：
-- -------------------- ---- -------
-- -------
------ - ------- - ---- --------------
------ - ---- - ---- -------------------
-------- ----------- -
----- - -------- - - ------
------ -
-----
-------- ---------
-------------------------------
----
----
----- -----------------------
-----
----
----- -------------------------
-----
-----
------
--
-
-------- ---------------------- -
------ - --------- --------------------- --
-
------ ------- -------------------------------在上面的代码示例中，我们使用 connect 函数将 Home 组件连接到 Redux store。在 mapStateToProps 函数中，我们将 Redux store 中的 router.location 作为 props 传递给 Home 组件。在组件中，我们可以读取 props 中的 location，并在页面上显示当前路径。
总结
Redux 和 React Router 的结合使用可以实现更为优雅和高效的组件复用方案。我们可以在 Redux store 中存储应用程序的状态和路由信息，并在 React Router 组件中读取和传递这些信息。这种方法可以提高代码的可维护性和可扩展性，适用于大型的 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d49af2b5eee0b525c2dffc