如何为 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 的标志。
因此,在我的 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 的标志。