Question

在我的React Native应用程序中，我有redux操作来加载和播放视频。每当用户播放视频时，将执行以下操作：

this.props.dispatch(loadVideo(true, mediaID))

以及相应的动作：

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立即更新状态，以通知应用程序即将加载视频。我在这里做错了什么？这不是调用操作（一个调用另一个）的好方法吗？

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);
     });
}

Redux无法正确调用操作

1 个答案: