如何处理 HandleSubmit 上的两个调度操作答案

【问题标题】：How to handle two dispatch Actions on HandleSubmit如何处理 HandleSubmit 上的两个调度操作
【发布时间】：2021-04-05 03:48:45
【问题描述】：

我需要在 SubmitForm 上分派两个不同的动作，逻辑是如果第一个动作成功我分派第二个动作

我喜欢这个

const handleClick = () =>{
setLoading(true)
const authorizationCode = refInput.current.state.tan
const email = emailValues?.email;
const UserId = phoneValues?.data?.d;
const phone_number = phoneValues?.value?.phone_number
const language = phoneValues?.value?.language

dispatch(verifyUserNumber({
  email,
  authorizationCode ,
  language,
  UserId,
  phone_number,
}))

setTimeout(() => {
  if(isDoneVerifyingUser){
      dispatch(getKycToken(UserId, phone_number, authorizationCode)) 
      setTimeout(() => {
        setOpenModel(false)
        setOpenKYC(true)
        setLoading(false)
        
      }, 2000); 
    }else{
      setError(true)
      setLoading(false)
    }
}, 2000);

}

但我有一个问题是我必须点击按钮两次才能发送第二个动作

【问题讨论】：

一般来说，在触发另一个事件之前硬编码一个时间（例如 2 秒等待）是一个坏主意。是否可以结合redux状态？可能有更好的方法来做到这一点，但很难知道你在这里要做什么。
我认为在我的情况下不可能这样做，因为我必须等到我得到第一个操作的响应我的意思是我必须等到 isDoneVerifyingUser === true ，然后派出第二个行动，请让我知道在这里处理超时的更好主意是什么？ - DCTID

标签： javascript reactjs forms redux react-redux

【解决方案1】：

在状态中获取变量isDoneVerifying。

派发第一个动作后，根据结果将状态更新为真或假。

在您的组件中使用依赖于isDoneVerifying 的钩子useEffect 并调用第二个调度。确保在执行 reducer 部分后将 flag 更改为 false。

【讨论】：