前言
Redux 和 react-router 都是 React 库中非常重要的组件，Redux 用于管理应用中的状态，而 react-router 则用于处理和组织应用中的路由。这两个库在实际项目中经常被同时使用，本文旨在介绍 Redux 与 react-router 结合的最佳实践。
Redux
Redux 是一个状态管理库，能够有效地解决 React 应用中组件之间的状态传递问题。Redux 基于 Flux 架构而来，背后的理念是“单一来源的数据源”，即整个应用程序的状态被统一地存储在一个对象中。
Redux 有三个核心概念：
- Store：应用状态的单一来源，被存储在一个 JavaScript 对象中；
- Action：描述应用状态的变化；
- Reducer：处理应用状态变化的函数。
下面是一个简单的 Redux 应用示例：
------ - ----------- - ---- --------
----- -------------- - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
--
----- ----- - ----------------------------
------------------ -- -
------------------------------
---
---------------- ----- ----------- ---
---------------- ----- ----------- ---
---------------- ----- ----------- ---上面的代码中，我们使用 createStore 函数创建了一个 Store 对象，并定义了一个 Reducer 函数 counterReducer，之后对 Store 对象进行了操作。
react-router
react-router 是一个用于处理应用路由的库，其提供了 BrowserRouter、HashRouter、MemoryRouter 等多种路由方式，能够很好地帮助我们分发组件、处理路由跳转等功能。
下面是一个简单的 react-router 应用示例：
------ - ------------- -- ------- ------ ---- - ---- -------------------
----- ---- - -- -- --------------
----- ----- - -- -- ---------------
----- --- - -- -- -
--------
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
-----
------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
--在上面的代码中，我们定义了两个组件 Home 和 About，用于展示不同的页面，之后在 App 组件中使用 BrowserRouter 组件包裹，使用 Link 组件实现路由跳转，使用 Route 组件进行路由匹配。
Redux 与 react-router 结合
Redux 与 react-router 最佳实践是将 router 中的路由信息作为一个 state，使用 action 来改变路由信息的同时还能同时改变其他部分的 state。因此我们可以使用 react-router-redux 这个库来辅助我们实现 Redux 与 react-router 的结合。
react-router-redux 提供了以下 API：
routerReducer：一个 Reducer，将 react-router 的路由信息存储在 state 中；syncHistoryWithStore：根据 Store 对象创建一个新的history对象，并在 Store 更新时自动同步 react-router 和 Store 的状态；routerMiddleware：Redux Middleware，能够拦截 action，处理路由信息。
下面是一个 Redux 与 react-router 结合的示例：
------ - ------------ --------------- - ---- --------
------ - -------------------- - ---- ----------
------ - ---------------- ----------------- ------------- - ---- ---------------------
----- ------- - -----------------------
----- ------- - -----------------
------- --------------
---------------- -- --- -------
---
----- ----- - ------------
--------
------------------------------------------
--
-- ----
----- ------------- - ----------------------------- -------
----- --- - -- -- -
--------- --------------
---------------- ------------------------
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
-----
------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------------------
-----------
--在上面的代码中，我们首先创建了一个 history 对象，之后利用 react-router-redux 提供的方法将 history 对象同步到 Store 中，最后使用 ConnectedRouter 包裹应用组件，这样即可在应用中使用 react-router，并让路由信息与 Redux 集成。
总结
Redux 与 react-router 都是 React 生态中非常重要的库，如何巧妙地将它们结合起来使用是非常有必要的，而 react-router-redux 则为我们提供了最佳实践。实际开发中，我们应该根据应用情况和具体需求来选择最合适的方案。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654c2bd27d4982a6eb5ccc15