如何发送承诺 - 并等待 redux 操作完成

时间:2021-04-15 08:59:35

标签: javascript reactjs typescript redux redux-thunk

我对在哪里添加我对 redux axction 的承诺有点困惑。我有大量需要添加到播放列表的剪辑 - 如果播放列表不存在,我需要创建一个播放列表,然后将该剪辑添加到特定的播放列表。

为此,我需要一个承诺,但我不能 100% 确定我把它放在正确的地方。在将所有剪辑添加到 playlistId 之前,我需要等待 AddCLipToPlaylist 解析。是否存在该剪辑的播放列表 ID?

这是我到目前为止所做的,但不起作用?

  const addClipsToPlaylist = (clip: Snippet, playlistIds:string, dispatch: any) =>
    new Promise((resolve: any, reject: any) => {
      try {
        dispatch(doAddClipToPlaylist(clip, playlistIds))
        resolve()
      } catch (err) {
        reject(err)
      }
    })


  const onSubmit = useCallback(() => {
    if (clip) {
      addClipsToPlaylist(clip, dispatch).then(() => {
        playlistIds.forEach((item: string) => {
          dispatch(
            doConfirmEditClip(clipIdFromUrl, item, {
              offset: times.startTime,
              title: clip.title
            })
          )
        })
      })
    }
  }, [dispatch, clip, playlistIds, times, clipIdFromUrl])

行动

const doAddClipToPlaylist = (clip: Snippet, playlistId:id) => {
  return (dispatch: Dispatch<any>) => {
    dispatch(doAddPlaylist([clip], closePlaylistModal))
  }
}

API 调用

const doAddPlaylist = (
  clips?: Snippet[],

) => {
  return async (dispatch: Dispatch<AnyAction>, getState: () => State) => {
    const userId = selectUserId(getState())

    axios
      .post(`${ENDPOINT_PLAYLIST_API}/playlist`, {
        userId,
        clips: clips?.map(clip => ({
          id: clip.id,
    
   
        }))
      })
      .then((response: any) => {
        const { playlist } = response.data.data

        dispatch(
          addPlaylist({
            id: playlist.ID,
    
          })
        )

      })
      .catch((error: Error) => {
        console.error(error)

     
      })
  }
}

我是否需要从 DoPlaylistModalCreatePlaylist 函数返回承诺?

0 个答案:

没有答案