Question

我从代码中调度一个操作以登录，该操作包含一个API请求以登录并在我的商店中设置currentUser变量。分派之后，我想立即检查是否设置了currentUser，但是由于分派是异步的，因此if条件首先将当前用户读取为“”，并且我必须触发两次该事件，才能以期望的方式读取currentUser变量数据。我尝试使用异步等待，但问题仍然存在。在进入下一行之前，如何使调度完成？

我从哪里派发

async function handleSubmit() {
  const details = {
    "username": userName,
    "password": password
  }
  await props.login( details ) ### This is the dispatch ###
  if ( props.currentUser !== "" ) props.handleAuthentication()
}

这是我在调度中打电话给我的动作：

export function login( details ) {
    const url = 'user/login'
    const requestOptions = {
      method: 'POST',
      credentials: 'include',
      body: JSON.stringify( details )
    };
    return ( dispatch ) => {
    return fetchReq( requestOptions, url ).then( ([response]) => {
        if( response.status === RESPONSE.OK ){
          dispatch( loginSuccess(details.username) )
      }
      else{
        dispatch( loginError() )
      }
    } )
  }
}

上述操作的辅助功能：

export function fetchReq( options, endpoint ) {
  const url = 'api/' + endpoint
  return fetch(url, options)
    .then( response => Promise.all([response, response.json()]));
}

Answer 1

使用react的生命周期来处理redux状态下的更改，该更改应映射到props。 componentDidUpdate可以完成经典的反应。如果您使用的是钩子，则useEffect作为第二个参数[props.currentUser]传递，这是您要跟踪的值。

如何等待Redux分派调用的完成

1 个答案: