Redux 是一个流行的 JavaScript 应用程序状态管理工具，它使得为复杂的应用程序管理数据和状态变得更加简单。本文将重点介绍 Redux 在前端路由中的使用，通过详细的说明和示例代码帮助您更好理解和掌握 Redux 在路由中的应用。
路由管理的挑战
在传统的 Web 应用中，前端路由的管理方式基本是通过特定 URL 的匹配来确定要渲染的视图并且在应用的状态中存储当前的路由信息。但是，在现代单页面应用程序中，前端路由管理变得越来越复杂。因此，需要一种能够有效管理路由的工具。
Redux 的路由管理机制
Redux 是一种应用程序状态管理工具，用于帮助解决在实现路由管理时出现的问题。Redux 应用程序的路由管理可以通过以下方式实现。
React Router
React Router 是一个针对 React 应用程序的路由管理工具。通过和 React 无缝集成，它可以在不重载整个页面的情况下更新应用程序的 URL，并声明哪个组件将渲染哪个 URL。React Router 提供了三种路由类型：BrowserRouter、HashRouter 和 MemoryRouter。
BrowserRouter 在 HTML5 的 history API 上建立，它使用 react-router 和 React 中的 history 库来匹配和监视 URL 的变化。如果应用程序正在运行传统的服务器，则可以使用 BrowserRouter。
HashRouter 与 BrowserRouter 类似，但在 URL 中嵌入了 #。在浏览器不支持 HTML5 的 history API 时，这是很有用的。
MemoryRouter 不使用 URL 来管理路由状态，而是将其状态保存在内存中。这使得您可以在不依赖浏览器 URL 的情况下处理路由。
React Router Redux
React Router Redux 是 Redux 和 React Router 之间的桥梁。它提供了一个中间件和一些帮助器函数，使得在 Redux 中路由管理的代码更加简单和直观。
有几个关键组件在 React Router Redux 中：
- react-router-redux：这是 React Router Redux 中的核心组件，用于在你的 Redux 应用程序中同步路由状态和 Redux 状态。
- push：这是一个动作生成器，用于将路由生成器推入路由历史记录表中并同步它们的 URL。例如：
// 导入 push 动作生成器
import { push } from 'react-router-redux'
// 在动作生成器中调用 push 方法
store.dispatch(push('/path'))示例代码
在以下示例中，我们将演示如何使用 React Router 和 React Router Redux 实现路由管理。此示例使用 React、React Router、Redux 和 React Router Redux 库。
安装必需的库
首先，需要安装必要的库，这里我们需要安装以下库：
npm install --save react react-dom react-router-dom react-redux redux react-router-redux
创建 App 组件和路由规则
在此示例中，我们将创建两个路由：主页和详情页面。我们使用 React Router 定义路由规则，如下所示：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ----- - ---- ------------------
----- ---- - -- -- -
------ -
-----
----------- -- -- -------------
------
-
-
----- ------- - -- -- -
------ -
-----
------ ------- ------- ---------
------
-
-
----- --- ------- --------------- -
-------- -
------ -
-----
------ ----- -------- ---------------- --
------ --------------- ------------------- --
------
-
-
-
------ ------- ---此代码首先导入 React 和 Route，然后定义了两个组件：Home 和 Details。需要注意的是，在 App 组件中，Route 元素被用来渲染这两个组件。
创建 Redux 存储和路由中间件
现在，我们需要创建 Redux 存储和路由中间件，以便能够对应用程序的状态进行路由管理。为此，请使用下面的代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ----- - ---- ------------------
------ - ------------ ---------------- --------------- - ---- -------
------ - -------- - ---- -------------
------ - -------------------- - ---- ---------
------ - --------------------- -------------- ---------------- - ---- --------------------
------ -------- ---- ------------
------ --- ---- -------
----- ---------- - ----------------------------------------
----- ----- - ------------
-----------------
------------
-------- --------------
---
----------------------------
-
----- ------- - -------------------------------------------- ------
----- ---- ------- --------------- -
-------- -
------ -
--------- --------------
------- ------------------
---- --
---------
-----------
-
-
-
------ ------- ----此代码导入了许多需要的库，首先创建了一个名为 middleware 的路由中间件。然后，使用 combineReducers 函数将路由 reducer 和您自己的其他 reducer 合并。接下来，使用 applyMiddleware 函数将路由中间件添加到 Redux Store 中。最后，使用 createBrowserHistory 函数创建浏览器 history 对象，并将其与 Redux Store 同步。
连接到路由器
最后，我们需要将新创建的 Root 组件连接到应用程序中的路由器。使用以下代码：
import React from 'react'
import ReactDOM from 'react-dom'
import { Router } from 'react-router-dom'
import Root from './Root'
ReactDOM.render(
<Root />, document.getElementById("root")
)在这个例子中，我们创建了一个根 React 组件 Root 并将其传递给 ReactDOM.render。然后，在 Root 中，我们使用 Provider 和 react-router 的 Router 组件包装了我们的应用程序。
最后，我们只需要将这些组件导出并在应用程序中使用它们即可！
结论
Redux 是管理 Web 应用程序状态的强大工具和抽象层。在本文中，我们学习了 Redux 在管理 Web 应用程序中的路由方面的应用，并演示了一些例子代码帮助您理解如何使用它。通过 Redux，您可以通过过程、管理状态和状态的变化，这个更好地管理 Web 应用程序的路由和其他方面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d9377947dc5bcb3fe8af9