Redux 没有正确调用动作答案

【问题标题】：Redux does not call actions properlyRedux 没有正确调用动作
【发布时间】：2019-08-05 07:42:35
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs redux redux-thunk

【解决方案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);
     });
}

【讨论】：