在开发 React 应用中，路由管理是不可避免的重要部分。而在管理路由数据的过程中，我们常常需要使用 Redux 等状态管理工具。react-router-route-reducers 是一个用来管理路由状态数据的 npm 包，它提供了一个简单易用的 API，让我们可以方便地在 React 应用中使用路由状态数据。
安装和初始化
要使用 react-router-route-reducers，首先需要安装它。在项目的根目录中执行以下命令：
npm install react-router-route-reducers
安装完成后，我们需要对其进行初始化。在根目录的 index.js 或 App.js 中添加以下代码：
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ - ------------- - ---- ------------------------------ ----- ----------- - ----------------- ------- -------------- -- ----- -------- --- -- ------ ----- --- ---------- -- ----- ----- - ------------------------ ------------------------
这里我们使用了 redux 的 combineReducers 方法，将 routerReducer 合并到了 root reducer 中。这样，在整个应用中，我们就能够通过 state.router 访问到路由状态数据了。
使用方法
1. 路由 action
使用 react-router-redux，我们可以在应用中进行路由操作。这里提供了一个路由的 action 创建器：
-- -------------------- ---- ------- ------ - ----- -------- --- ------- --------- - ---- ------------------------------ -- ---- - --- ----- ---- --- ------- ----- ------------------------ -- ------- --- ------- ----- ---- - --- --- --------------------------- -- ---- ---------------- -- --- ------- ----- ---------------- ------------------- ----------------------
这些操作都是 Redux 中的 dispatch 操作。通过 dispatch 让路由状态数据发生变化，进而更新应用中路由相关的组件。
2. 路由数据获取
使用 react-router-route-reducers，我们可以方便地获取当前路由状态数据。比如：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ---------- - ---- ---------------
------ - --------------- - ---- ------------------------------
----- --------------- - ------- --------- -- --
------------- ------------------------------
---
----- ---------------- - -- ------------ -- -- -
-----
------------ ---------------------------
---------- -------------------------
-------- -----------------------
------
--
------ ------- -------------------------------------------------------这里我们使用了 getCurrentRoute 方法，得到了当前路由状态数据，从而可以在 mapStateToProps 函数中将它绑定到组件的 props 上。在 ExampleComponent 中，我们展示了 pathname、search 和 hash 等路由数据的信息。
3. 路由监听
使用 react-router-route-reducers，我们可以监听路由状态数据的变化。这样，当路由状态数据发生变化时，我们就可以做出相应的响应。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ---------- - ---- ---------------
------ - ------ - ---- ------------------------------
----- ---------------- ------- --------------- -
----------------- - ------- -- -
-------------------- ------ -- -------
--
------------------- -
----- - ------ - - -----------
---------------- - -------------- ------------------------
-
---------------------- -
-------------------
-
-------- -
------ ------------ ----------------
-
-
----- --------------- - ------- --------- -- --
------- -------------
---
------ ------- -------------------------------------------------------这里我们使用了 listen 方法，对路由状态数据的变化进行监听，并指定了 handleRouteChange 方法作为回调函数。在组件的 componentDidMount 生命周期中，我们通过 listen 方法注册了对路由状态数据的监听。在 handleRouteChange 方法中，我们展示了当前的路由状态数据。注意在组件卸载的时候需要通过调用 unsubscribe 取消监听。
示例代码
为了更好地理解 react-router-route-reducers 的使用，这里提供一个基础的示例代码，供大家参考：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- ---------------
------ - ----- -------- --- ------- ---------- ---------------- ------ - ---- ------------------------------
----- ---------------- ------- --------------- -
----------------- - ------- -- -
-------------------- ------ -- -------
--
--------------- - -- -- -
----- - -------- - - -----------
----------------------------
--
------------------ - -- -- -
----- - -------- - - -----------
-------------------------------
--
------------- - -- -- -
----- - -------- - - -----------
----------------- -- ---- --- ---- --------
--
------------------- -
----- - ------ - - -----------
---------------- - -------------- ------------------------
-
---------------------- -
-------------------
-
-------- -
----- - ------------ - - -----------
------ -
-----
------------ ---------------------------
---------- -------------------------
-------- -----------------------
------- --------------------------------------------
------- --------------------------------------------------
------- ------------------------------- -------------
------
--
-
-
----- --------------- - ------- --------- -- --
------------- ------------------------------
------- -------------
---
------ ------- -------------------------------------------------------在这个示例中，我们展示了如何通过按钮操作来进行路由状态数据的变化。同时也展示了如何获取路由状态数据，和如何对路由状态数据进行监听。当按钮被点击时，路由状态数据就会相应地发生变化，并且通过 mapStateToProps 来绑定到组件的 props 上，最后展示在组件中。
总结
在这篇文章中，我们详细介绍了如何使用 react-router-route-reducers 来管理路由状态数据。通过这个 npm 包提供的 API，我们可以方便地在 React 应用中进行路由操作、获取路由状态数据以及监听路由状态数据的变化。同时，这个 npm 包也提供了一个合适的路由状态数据管理方式，让我们的应用能够更好地管理路由数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671ad30d092702382274d