Redux 是一个流行的 JavaScript 应用程序状态管理库。Redux 可以使你的 JavaScript 应用程序更加可预测和易于理解，但是使用 React 进行状态管理时，仍然需要一种方法来管理应用程序中的路由，这通常意味着使用一个路由库，如 React Router。
但是，如果你还希望使用 Redux 来管理你的应用程序状态，那么如何将 Redux 和 React Router 结合在一起呢？这里介绍一个 npm 包，它可以帮助你实现这个目标：redux-first-routing。
安装
使用以下命令安装 redux-first-routing：
npm install redux-first-routing
如何使用
让我们从一个简单的 React 组件开始。假设我们有一个名为 Home 的组件，我们希望在用户访问该组件时，Redux 中的状态会随之发生变化。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ---- - -- --------- --------- ------- ----- -- -- -
-----
----------- ----------
------- ----------- -- ---------- ----- ----------- ----
--------- -------
---------
------------ ----------------
------
--
------ ------- --------------- -- --
-------- --------------
----------在 Redux 中，我们可以使用一个 reducer 来管理应用程序的状态。我们可以使用以下代码创建一个含有一个 counter 字段的简单 reducer：
-- -------------------- ---- -------
----- ------------------- - -
-------- --
--
----- -------------- - ------ - -------------------- ------- -- -
------ ------------- -
---- ------------
------ - --------- -------- ------------- - - --
--------
------ ------
-
--现在，我们可以将这个 reducer 绑定到 Redux store 上面：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------- - ---- ---------------------- ------ -------------- ---- --------------------- ----- ----------- - ----------------- -------- --------------- ------- -------------- --- ----- ----- - -------------------------
redux-first-routing 包提供了一个 routerReducer，它允许我们通过 Redux store 部分来跟踪应用程序的路由状态。
在组件中使用路由状态
现在，我们可以很容易地在我们的组件中使用路由状态了。redux-first-routing 包提供了一些不同的方法来读取路由状态，下面展示一些例子。
this.props.location
const Home = ({ location }) => <div>{location.pathname}</div>;
export default connect((state) => ({
location: state.router.location,
}))(Home);this.props.params
const Home = ({ params }) => <div>{params.id}</div>;
export default connect((state) => ({
params: state.router.params,
}))(Home);this.props.query
const Home = ({ query }) => <div>{query.page}</div>;
export default connect((state) => ({
query: state.router.query,
}))(Home);触发路由变化
另一个重要的问题是，如何触发路由变化来更改应用程序的状态。redux-first-routing 包提供了一些方法，例如 push 和 replace。
push
import { push } from "redux-first-routing";
dispatch(push({ pathname: "/new-route", query: { foo: "bar" } }));replace
import { replace } from "redux-first-routing";
dispatch(replace({ pathname: "/new-route", query: { foo: "bar" } }));总结
redux-first-routing 包提供了一种将 Redux 与 React Router 结合使用的优雅方法。它允许你使用同一个状态管理库来管理你的应用程序状态和路由状态，从而使你的代码更加可维护和易于理解。虽然 redux-first-routing 包是一个相对较新的包，但它已经得到了一些比较大的开源项目的应用，是一个值得一试的工具。
希望这篇文章对你有所帮助，并为你将 Redux 和 React Router 结合使用提供一些指导意义。如果你感兴趣，可以试试 redux-first-routing 包，看看它能否满足你的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005619381e8991b448df528