介绍
随着 JavaScript 单页应用程序变得更加复杂，处理应用程序状态和路由变得越来越困难。Redux 和 React-Router 这两个库为开发者提供了一种优雅的方式来管理状态并管理路由。
Redux 是一个流行的状态管理库，它可以使应用程序状态的逻辑更加清晰，易于维护和调试。React-Router 是一个流行的 React 路由库，它允许开发者构建单页应用程序，使得应用程序状态和 URL 保持同步。
在本文中，我们将讨论如何在你的 React 应用程序中结合使用这两个库，以实现强大的路由控制功能。
Redux 基础
Redux 是一个状态管理库，它的目的在于让你的应用程序的状态逻辑变得更加清晰、易于维护和调试。该库的基本原则是将整个应用程序的状态存储在一个单一的对象中，称为“Store”。
下面是一个使用 Redux 的简单例子。
-- -------------------- ---- -------
------ - ----------- - ---- --------
-- -- ------- --
-------- ------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
-
-- -- -----
--- ----- - ---------------------
-- -- ----- ---
------------------ -- -
------------------------------
---
-- ---- ------
---------------- ----- ----------- ---在该示例中，createStore 函数创建了一个 Redux store，并提供了一个 reducer 函数 counter。实际上，reducer 函数就是处理应用程序状态的地方。
在订阅 store 变化之后，我们可以通过一个 action 来修改 store 中的状态，改变应用程序的行为。
React-Router 基础
React-Router 是一个用于构建单页应用程序的流行 React 路由库。它通过关联 URL 和组件，使得应用程序状态和 URL 保持同步。
以下是一个React-Router 的基本例子。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- ------ ----- ---- -------------------
----- ---- - -- -- --------------
----- ----- - -- -- ---------------
----- ----- - --------- -- --------------------------------
----- --- - -- -- -
---------------
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- --------------------------
-----
-----
------
------ ----- -------- ------------------
------ ------------- -------------------
------ ----------------------- -------------------
------
----------------
--
------ ------- ----在该示例中，我们通过 BrowserRouter 包装 App 组件，并在 nav 中提供了链接。使用 Route 组件，我们将 URL 与对应的组件相关联。
结合使用 Redux 和 React-Router
在使用 Redux 和 React-Router 构建应用程序时，我们需要做的最重要的事情之一是确保两个库之间的状态同步。为了保持这种同步，我们需要一个库，它可以把 React-Router 自身的自动路由切换与 Redux 的状态管理清晰地集成在一起。这就是 react-router-redux。
下面是一个使用 react-router-redux 的例子。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- ------ ----- ---- -------------------
------ ---------- ---- --------------
------ ----------------- ----------------- ---- ---------------------
------ ------------- ---------------- -------- ---- --------
------ ------------- ---- -------------------------------
------ ----------- ---- -------------
----- ------- - ----------------
----- ---------- - --------------------------
----- ----- - ------------
------------
--------
----------------------------
----------------------------------- -- -------------------------------------
-
--
----- ---- - -- -- --------------
----- ----- - -- -- ---------------
----- ------ - -- -- ----------------
----- --- - -- -- -
--------- --------------
---------------- ------------------
-----
-----
----
--------- -----------------------
--------- -----------------------------
--------- -------------------------------
-----
------
------ ----- -------- ------------------
------ ------------- -------------------
------ -------------- --------------------
------
------------------
-----------
--
------ ------- ----在该示例中，我们使用 createHistory 创建了一个 history 对象。使用 routerMiddleware 函数将 history 对象与 store 集成。
我们还使用了 Provider 组件将 store 传递给 React 应用程序。在 ConnectedRouter 中，我们使用了传递给 createHistory 的 history 对象和中间件，为我们的 React-Router 提供状态管理。
结论
使用 Redux 和 React-Router 可以大幅提升你的应用程序的状态管理和路由控制能力。使用 react-router-redux 可以保持这两种库之间的同步，并使你的 React 应用程序更具可维护性、可扩展性和可测试性。尝试使用这两个库构建一个复杂的应用程序，你会惊讶于开发中的易用性和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee59aa6fbf960197216ad5