在 thunk 中等待调度

Question

我需要等到 thunk 中的调度完成。 之后，我必须将钩子的 state 设置为 true。

这是我的服务：

   export const loadSearchInfoAsync = (product_id: string) => {
      return (dispatch: Dispatch) => {
        SearchService.getSearchInfo(product_id)
          .then((response) => {
            if (response) {

              // Wait until this dispatch is done
              dispatch(searchInfoLoadSuccess(response.data));

            }
          })
          .catch((error) => {
            if (error) {
              dispatch(appErrorState(error.response));
            }
          });
      };
    };

这是 state 必须在调度后更新

  const handleScan = (data: string | null) => {
    if (!proceed && data) {

      // After this dispatch make setProceed true
      dispatch(loadSearchInfoAsync(data));
      setProceed(true);
    }
  };

Answer 1

我认为在这种情况下，您可能只是将您的继续代码移动到效果中并等待对此的响应？

useEffect(() => {
  if (data.length) { // or do whatever check here to see if it's not empty
    setProceed(true);
  }
}, [data])

Answer 2

也许它会帮助你

const loadSearchInfoAsync = (product_id: string, onSuccess, onFailure) => {
return (dispatch: Dispatch) => {
  SearchService.getSearchInfo(product_id)
    .then((response) => {
      if (response) {

        // Wait until this dispatch is done
        dispatch(searchInfoLoadSuccess(response.data));
        onSuccess()
      }
    })
    .catch((error) => {
      if (error) {
        dispatch(appErrorState(error.response));
        onFailure()
      }
    });
};

};

 const loadSearchInfoPromise = (product_id: string) => {
return new Promise((resolve, reject) => {
  dispatch(loadSearchInfoAsync(product_id, resolve, reject))
}

}

 const handleScan = async (data: string | null) => {
if (!proceed && data) {

  // After this dispatch make setProceed true

  await loadSearchInfoPromise(data).then(() => {
    setProceed(true);
  })
}

};