1。只需通过`history.listen`

Question

因此，在我的react / redux应用程序中，我使用react-router-redux。我想为任何路线（例如LOCATION_CHANGE）序列添加一个简单的“顶栏”加载动画。

我知道react-redux-loading-bar之类的内容，但我不确定如何将它们绑定到react-router-redux，因为我只是导入预先制作的减速机，例如：

import { routerReducer } from 'react-router-redux'

如何将加载动画绑定到此缩减器中，是否已准备好开箱即用？似乎是一个常见的用例。我宁愿不必创建另一个侦听react-router-redux动作的减速器，这看起来有点像hacky ......

Answer 1

我查看了react-router-redux文档，我看到了两种可能的实现：

收听增强型历史记录即可

来自文档：

How do I watch for navigation events，例如分析？

只需通过history.listen聆听增强的历史记录。这需要   在一个函数中，只要商店更新，它就会收到一个位置。   这包括在商店进行的任何时间旅行活动。

在这里，您可以跳过创建新的reducer并只创建一个Loader组件。在组件的componentDidMount中，您可以将组件订阅到路由器历史记录更改，并在组件内部处理所有更改。这是订阅功能：

const history = syncHistoryWithStore(browserHistory, store);
history.listen(location => { // handle showing/hiding loader here });

2。创建一个特定的reducer，侦听LOCATION_CHANGE操作类型并更新其标志

来自文档：

LOCATION_CHANGE ：您可以在缩减器中侦听的操作类型，以通知路由更新。在历史记录发生任何变化后触发。

在这种情况下，您必须创建一个订阅了reducer标志的Loader组件。在那里你可以显示加载指示器。您可以在几毫秒后隐藏它，并调度一个新动作，重置减速器的标志。