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

Question

I am new to React but I've been working on Vue for many years. I am now stuck in one area when I need to wait for an action to complete. After the action is complete I have to make another action call or do some operations there. But it is not waiting for the action to complete and start executing the code below that.

Method:

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,
    })
  }
}

Method from where action is dispatched:

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

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

Now, in the above code, the redirection is not waiting for the dispatch to complete. I tried this one but it is not working:

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

Answer 1

Let's assume that when the below

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

happens that your reduxState has some sort of property like isLoggedIn or isAuthenticated . Now you can use the same property to trigger a redirect inside a useEffect like so:-

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

and your submitHandler can be the following:-

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