在我的 React Native 应用程序中,我有 redux 操作来加载和播放视频。每当用户播放视频时,将执行以下操作:
this.props.dispatch(loadVideo(true, mediaID))
以及相应的 Action :
export const loadVideo = (isLoading, videoId) => async dispatch => {
dispatch({
type: LOAD_MEDIA,
payload: isLoading
})
if(videoId){
dispatch(playVideo(videoId))
}
}
export const playVideo = (videoId) => async dispatch => {
let p = await obtainMediaSource(videoId);
dispatch({
type: PLAY_MEDIA,
payload: p
})
dispatch(loadVideo(false))
}
问题是不知何故 loadVideo
操作在更新状态之前等待 playVideo
操作完成执行。但是,我希望 loadVideo
立即更新状态以通知应用程序即将加载视频。我在这里做错了什么?这不是调用 Action (一个调用另一个)的好方法吗?
最佳答案
这是使用 .then()
而不是 await
的好方案。
这样,您将拥有一个非阻塞函数,并在完全获取媒体源后利用回调异步调度 PLAY_MEDIA
。
这是一个未经测试的重构代码:
export const setLoading = (isLoading) => dispatch => {
dispatch({
type: LOAD_MEDIA,
payload: isLoading
})
}
export const loadVideo = (videoId) => dispatch => {
if (!videoId) return;
setLoading(true);
// non-blocking
obtainMediaSource(videoId)
.then((p) => {
dispatch({
type: PLAY_MEDIA,
payload: p
})
setLoading(false);
});
}
关于javascript - Redux 没有正确调用操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57354201/