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

Question

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

我知道类似 react-redux-loading-bar 的事情，但不确定如何将它们绑定(bind)到 react-router-redux 中，因为我只是导入了一个预制的 reducer，例如:

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

我如何将加载动画绑定(bind)到这个 reducer 中，是否有现成可用的解决方案？似乎是一个常见的用例。我宁愿不必创建另一个监听 react-router-redux 操作的 reducer ，这似乎有点 hacky...

Answer 1

我已经查看了 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。创建一个特定的 reducer ，监听 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 的标志。