React 是一个流行的 JavaScript 库，广泛用于 Web 应用程序的开发。然而，对于大型应用程序，仅使用 React 来管理状态可能会变得麻烦和混乱。为此，Redux 作为一个状态管理工具被广泛应用在 React 中。React Router 提供了路由管理的能力，用于构建单页面应用。在本文中，我们将学习如何将 Redux 和 React Router 集成到 React 应用中。
Redux 简介
Redux 是一个基于 Flux 开发模式的 JavaScript 应用程序状态容器。Redux 管理应用程序的状态，使其易于跨组件和应用程序进行访问和维护。Redux 通过在 store 中存储应用程序状态来工作。Redux 是一个单向数据流，通过 action 发送到 reducer 中，从而更新应用程序状态。
安装 Redux
在 React 中安装 Redux 很简单。通过 npm 依赖管理器来安装 Redux 和 React-Redux 库。
--- ------- ----- ----------- ------
React Router 简介
React Router 是 React 应用程序的路由库。它使开发者能够轻松构建单页面应用程序，通过 URL 进行导航。React Router 与 React 组件相匹配，将应用程序状态绑定到应用程序 URL 中。
安装 React Router
通过一个简单的 npm 安装即可安装 React Router。
--- ------- ---------------- ------
Redux 和 React Router 集成
Redux 和 React Router 能够轻松的结合使用，以帮助开发者维护和跟踪应用程序的状态。要在 React 应用程序中集成 Redux 和 React Router，需要进行以下步骤。
第一步：创建 Redux 的 store
Redux 应用程序状态的主要存储方式是 store。在 React 应用程序中使用 Redux，需要创建一个 store，并将其提供给 React 组件进行访问。
------ - ----------- - ---- -------- ------ ----------- ---- ------------- ----- ----- - -------------------------
此代码创建了一个 Redux 的 store，用 Redux 的 createStore() 函数。rootReducer 是一个组合了子 reducer 的 Redux reducer。
第二步：使用 Provider 将 store 作为 props 提供给应用程序
React 的顶层组件 Provider 能够将 Redux 中的 store 作为应用程序的 props 提供给其下面的所有组件。只需要将 store 作为 Provider 的 prop 即可。
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ ----------- ---- -------------
------ --- ---- -------------------
----- ----- - -------------------------
----------------
--------- --------------
---- --
-----------
-------------------------------
--此代码中，Provider 组件使得全部的后代组件都能够坚挺到 Redux 的 store 的变化，并在需要的时候去获取其中关键数据，并自行触发重绘。
第三步：使用 react-router-dom 包装应用程序
应用程序状态已集成到应用程序中。现在需要集成路由。React Router 包含在 react-router-dom npm 包中。首先引入该包，然后配置路由。
------ - ------------- -- ------- ----- - ---- -------------------
----- --------- - -- -- -
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
--
------ ------- ----------这个例子中有三个 <Route> 组件，每个都显示一个不同的页面组件。可以在 <Route> 组件中添加路由所需的任何其他属性。使用相对路径指定路由路径，并将其与 Router 组件包装在一起。
第四步：让 app 组件使用 router 组件
路由已准备好，但需要确保 App 组件能够渲染 Router 组件中的路由组件。可以将 AppRouter 组件添加到 App 中，以使其成为整个应用程序的顶层组件。
------ ------ - --------- - ---- --------
------ --------- ---- -----------
----- --- ------- --------- -
-------- -
------ -
-----
---------- --
------
--
-
-
------ ------- ----<AppRouter> 中包含多个 <Route> 组件，但它们可以嵌套在该应用程序的任意组件中。
示例代码
完整的示例代码如下所示。这个应用程序包含三个页面组件，并显示一个标题和一个菜单。
------ ------ - --------- - ---- --------
------ - ------------- -- ------- ------ ---- - ---- -------------------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ ---- ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
------ ----------- ---- -------------
----- ----- - -------------------------
----- --------- - -- -- -
--------
-----
--------
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
------
---------
------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
-------
------
---------
--
----- --- ------- --------- -
-------- -
------ -
--------- --------------
-----
------ ---- ----------------
---------- --
------
-----------
--
-
-
------ ------- ----结论
Redux 和 React Router 集成在 React 应用程序中后能够处理应用程序的状态和路由。通过分离站点的不同区域来提高应用程序的性能，并使原始代码更干净、更可读。使用此技术创建一个真正的单页面应用程序，能够带来更好的用户体验、高效的代码执行和更好的维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66efe1bf6fbf9601973132a4