React+Redux：如何等待操作完成然后重定向

Question

我是一个新的反应，但我已经工作了很多年的Vue。当我需要等待一个动作完成时，我现在被困在一个区域。在操作完成后，我必须进行另一个操作调用或在那里执行一些操作。但它不会等待操作完成并开始执行下面的代码。

方法：

export const login = (email, password) => async (dispatch) => {
  try {
    dispatch({
      type: USER_LOGIN_REQUEST,
    })

    const config = {
      headers: {
        'Content-Type': 'application/json',
      },
    }

    const { data } = await axios.post(
      '/users/login',
      { email, password },
      config
    )

    dispatch({
      type: USER_LOGIN_SUCCESS,
      payload: data,
    })

    localStorage.setItem('userInfo', JSON.stringify(data))
  } catch (error) {
    dispatch({
      type: USER_LOGIN_FAIL,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    })
  }
}

从其中调度操作的方法：

const redirect = location.search ? location.search.split('=')[1] : '/'

const submitHandler = (e) => {
  e.preventDefault()
  dispatch(login(email, password))
  history.push(redirect)
}

现在，在上面的代码中，重定向并不是在等待调度完成。我试过这个,但它不起作用：

const submitHandler = async (e) => {
  e.preventDefault()
  await dispatch(login(email, password))
  history.push(redirect)
}

Answer 1

让我们假设当下面的

dispatch({
      type: USER_LOGIN_SUCCESS,
      payload: data,
    })

您的ReduxState具有某种属性，如IsLoggedIn或IsAuthenticated。现在，您可以使用相同的属性触发UseEffect内部的Redirection，如下所示：-

const {isAuthenticated} = reduxState;
useEffect(()=>{
if(isAuthenticated) history.push(redirect);
},[isAuthenticated])

您的submithandler可以是以下内容：-

const submitHandler = (e) => {
  e.preventDefault()
  dispatch(login(email, password))
}