如何为 react-router (redux) 中的所有全局状态更改添加默认加载栏?

How to add a default loading bar to all global state changes in react-router (redux)?

因此,在我的 react/redux 应用程序中,我使用 react-router-redux。我想为任何路线(例如 LOCATION_CHANGE)序列添加一个简单的 "top-bar" 加载动画。

我知道 react-redux-loading-bar 之类的东西,但不确定如何将它们绑定到 react-router-redux,因为我只是导入了一个预制的减速器,例如:

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

我怎样才能将加载动画绑定到这个减速器中,是否有现成的解决方案?似乎是一个常见的用例。我宁愿不必创建另一个侦听 react-router-redux 操作的减速器,这似乎有点 hacky...

我查看了 react-router-redux 文档,发现了两种可能的实施方式:

1。只需通过 history.listen

收听增强的历史记录

来自文档:

How do I watch for navigation events, such as for analytics?

Simply listen to the enhanced history via history.listen. This takes in a function that will receive a location any time the store updates. This includes any time travel activity performed on the store.

这里可以跳过新建reducer,直接新建Loader组件。在组件的 componentDidMount 中,您可以为组件订阅路由历史更改,并在组件内部处理所有更改。这是订阅功能:

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

2。创建一个特定的减速器,监听 LOCATION_CHANGE 动作类型并更新其标志

来自文档:

LOCATION_CHANGE: An action type that you can listen for in your reducers to be notified of route updates. Fires after any changes to history.

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