在前端开发中，我们经常需要使用到路由和状态管理，而 react-router 和 redux 分别是这两个方面的王者组合。然而，在实际使用过程中，我们也会遇到一些问题。比如，当页面进行路由跳转时，redux 状态可能不被保存，导致我们需要重新设置状态。为了解决这个问题，我们可以使用 react-router-redux-provider 这个 npm 包。
什么是 react-router-redux-provider？
react-router-redux-provider 是一个能够帮助我们解决 redux 状态在路由跳转中被重置的问题的 npm 包。它提供了一个 React 组件 <provider>，可以用来包裹应用的根组件，会将所有路由的 location 和 action 信息以及 redux 的 store 传递给下级组件。这样，在路由跳转时，store 中的状态就不会丢失了。
如何使用 react-router-redux-provider？
首先，需要安装 react-router-redux-provider 包。可以通过 npm 安装，命令如下：
npm install react-router-redux-provider
安装成功后，就可以在应用中使用了。使用前，需要先确保已经安装了 react-router 和 redux 这两个包。
1. 在 <provider> 组件中使用路由信息
首先，在根组件中引入 react-router-redux-provider，并将 <provider> 组件包裹在 <router> 中。这里用一个简单的示例来说明：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ----- - ---- -------------------
------ - -------- - ---- ------------------------------
------ - ----------- - ---- --------
------ -------- ---- -------------
------ --- ---- --------
----- ----- - ----------------------
----- ---- - -- -- -
--------- --------------- --------------
--------
------ -------- --------------- --
---------
-----------
--
------ ------- -----这里，我们引入了 react-router-dom 包中的 BrowserRouter，将其作为 router 参数传递给了 <provider> 组件。同时，还传入了 redux 的 store 对象。这样，就可以将路由和状态管理组合在一起了。
2. 使用路由信息和 store
在子组件中，我们可以通过两个 HOC 来获取路由信息和 store，分别是 withFetch 和 withState。我们用一个示例来说明如何使用这两个 HOC。
首先，定义一个 StatefulComponent 组件，用于显示当前路由信息和 store 中的状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- --------- - ---- ------------------------------
----- ----------------- - -- --------- ----- -- -- -
-----
--------------
------------------------------ ----- ---------
-------- ---------
--------------------------- ----- ---------
------
--
------ ------- ----------------------------------------这里，我们通过 withState 获取了 store 中的状态，并通过 withFetch 获取了路由信息。withFetch 是一个特殊的 HOC，它会在组件挂载时请求数据并将数据传递给组件。
现在，在 App 组件中引入这个 StatefulComponent：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------
------ ----------------- ---- ----------------------
----- --- - -- -- -
-----
------------
-----
----
--------- ---------------------
--------- ----------------------------
-----
------
--- --
------------------ --
------
--
------ ------- ----这个组件现在会显示当前路由信息和 store 中的状态。同时，我们在 nav 中添加了两个链接，用于测试路由跳转。
总结
在本文中，我们介绍了 react-router-redux-provider 这个 npm 包，它可以帮助我们解决 redux 状态在路由跳转中被重置的问题。通过使用它，我们可以方便地管理应用的路由和状态。希望通过本文的介绍，读者能更好地掌握 react-router-redux-provider 的使用方法，从而提高自己的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601581e8991b448de2b8