Redux-Router除了react-router还有什么用?

What is the use of Redux-Router in addition to reac-router?

伙计们。当我浏览 redux-router 的文档时,我只是不明白为什么我们需要它?

以下是文档试图解释的内容:

React Router is a fantastic routing library, but one downside is that it abstracts away a very crucial piece of application state — the current route! This abstraction is super useful for route matching and rendering, but the API for interacting with the router to 1) trigger transitions and 2) react to state changes within the component lifecycle leaves something to be desired.

It turns out we already solved these problems with Flux (and Redux): We use action creators to trigger state changes, and we use higher-order components to subscribe to state changes.

This library allows you to keep your router state inside your Redux store. So getting the current pathname, query, and params is as easy as selecting any other part of your application state.

据我了解,它试图说redux router可以将router state保存在redux store中,以便我们可以更方便地获取路由信息。

但是在react-router里面,我也可以轻松做到。 像 path="messages/:id" 一样,我可以使用 this.props.params.id 来获取参数。

谁能解释一下 redux-router 在什么情况下会带来好处?

Redux(通常是通量模式)就是将整个应用程序状态存储在一个中央位置。这样做的好处是更容易调试,并且更容易实现某些功能。

如果您曾经在带有 react-router 的 React 应用程序中使用过 redux-devtools,您会注意到它的用途有限,因为您无法重播应用程序的整个生命周期。当用户更改路由时,不会记录在 redux 存储中。 Redux 路由器将路由状态保存在商店中。

您可以使用它进行调试,您可以序列化整个商店历史并将其记录在别处以重播用户会话。您可以连接到它以实现完全撤消或记录分析事件。

redux-simple-router 是一个可以帮助您了解如何在 redux 应用程序中使用 React 路由器的库。

这是一个非常简单的库,以 redux 状态存储 URL 并使其与任何 react-router 更改保持同步。

redux-simple-routerredux-router 相比:

  • 更小更简单。您无需在其他所有内容之上学习另一个库。
  • 鼓励直接访问 react-router API。需要 server-side 渲染,或其他更高级的东西?只需阅读 react-router 的文档。
  • 仅存储当前 URL 和状态,而 redux-router 存储来自 react-router.
  • 的整个位置对象

按照这两个例子中的一个来起床 运行: