javascript - ReactJS + 终极版 : How to wait until dispatch has been completed before moving onto next step?

Question

在 ReactJS + Redux 项目中，我有一个方法可以发出 API 请求。如果成功，我想 dispatch 另一个 Action 创建者并等待它完成。然后当它完成时，进入下一步。

目前，以下代码在进行另一个 API 调用时执行调度，但即使在通过调度更新状态之前，它也会立即执行 window.location.href ='http://localhost:3005/#/Home' 然后调度完成。

那么在执行下一行代码 window.location.href ='http://localhost:3005/#/Home'?

这是 Action 创建者:

  loggingIn(userInfo) {

    var userInfoBody = {
        'username': `${userInfo.username}`,
        'password': `${userInfo.password}`
    }

    var configuration = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(userInfoBody)
    }

    return function(dispatch) {
      fetch('https://backendserver.com:8080/creds', configuration)
      .then(response => response.json())
      .then(response => {
        //Would like to finish this dispatch completely before start executing window.location.href ='http://localhost:3005/#/Home'
        dispatch(actions.updateUserInfo(userInfo.username))
        window.location.href ='http://localhost:3005/#/Home'
      })
      .catch((error) => {
        console.log("Error: ", error)
      })
    }

提前致谢

Answer 1

可能最简化的方法是引入另一个 Action ，您将通过执行 window.location.href = '...' 东西来对此使用react。

由于 redux 可以被认为是“单线程”，您可以确保在每次调用之间调度状态树都已完全更新。

dispatch(actions.updateUserInfo(userInfo.username))
// It's guaranteed that at this point your updateUserInfo action is handled and state tree is updated
dispatch(actions.userInfoUpdated(userInfo.username))

然后您将通过执行 window.location.href = '...' 操作在 redux 中间件中处理新操作“userInfoUpdated”。