javascript - Redux 没有正确调用操作

Question

在我的 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 (一个调用另一个)的好方法吗？

Answer 1

这是使用 .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);
     });
}