Reactjs 等待Redux操作发送第二个操作

您好，提前感谢您阅读我的问题

我正在使用路由器v3和Redux开发React应用程序（版本16）

该应用程序的结构与此类似：

<Route path="/" component={BakeryComponent}>
  <IndexRoute component={LandingComponent}/>
  <Route path="employees" component={EmployeesComponent}/>
  <Route path="clients" component={ClientComponent}/>
</Route>

所以我们有不同的实体。面包店是主要的一家，员工取决于选定的面包店，客户也取决于面包店

当我们访问该应用程序时，我们会在登录页面上登陆，该页面会显示面包店的一般信息（默认情况下会选择一个），如姓名、员工数量等。所有这些信息都来自后端，在Bakery或Landing组件的componentDidMount中检索（在这一点上没有任何区别）

当用户位于登录页时，他可以导航到员工或客户视图。当这种情况发生时，组件被装载，让我们假设它是employees组件，并且在组件的componentDidMount方法中，我们检索所需的信息（在本例中是employees列表）

直到现在一切都很好

现在，如果用户刷新页面，一切都应该正常工作（这是一项要求），但实际情况并非如此。问题是，当这种情况发生时，BakeryComponent和EmployeesComponent（两者）会再次装载，因此会触发新的后端调用（并行）。但是对员工的后端调用取决于首先要解决的面包店，因为我们需要知道我们想要什么面包店的员工，所以我们在这一点上得到一个错误

我试图检查调用的操作（用于检索员工的操作）是否已解析面包店（使用getState），如果未解析，则等待解析。但它不能说服我，它看起来有点像黑客。我觉得React/Redux应该已经有了解决这个问题的工具，但我只是不知道它们。我说得对吗

任何帮助都会很有帮助

---

谢谢

我可以为你想出一个办法，尽管它实际上不是一个很酷的解决方案。在调用LandingComponent中的dispatch之前，可以检查BakeryComponent中的数据是否准备就绪。大概是这样的：

面包成分

componentDidMount() {
  // after this one finish we may have something in the store like: state.bakery.loaded = true   
  dispatch(loadBakery()) 
}

着陆组件

// Landing component should connect to state.bakery.loaded to get updated data
componentDidMount() {
  initData()
}

componentDidUpdate(){
  initData()
}

initData() {
  // check if bakery loaded and landing data is not loaded
  if (state.bakery.loaded && !state.landing.loaded) {
    // this should load data and set the state.landing.loaded to true
    dispatch(loadLanding())
  }
}

---

看看这个-。或者更具体地说，。谢谢，但我已经读过这两个链接了。我的问题不是异步操作，我的问题是我需要以某种方式序列化它们，但我不确定。如果您需要第一个api调用的响应，对于第二个api调用，则异步操作将解决该问题。好的，谢谢您的时间。也许是我没有看到解决办法。我知道我可以通过从thunk操作内部返回一个承诺来实现您所说的，在这种情况下，第一次发送的返回值将是我可以在发送第二次操作之前等待的承诺。但在我的例子中，第一个动作和第二个动作是在不同的组件中进行的，因此第二个动作无法实现第一个动作的承诺。或者我不知道怎么做。为什么不将所选的值放入sessionstorage或Sujit的本地存储评论中。Warrier和Kyle Richardson在我的原始问题中的最后一条评论也很有用，但我会选择这个答案作为“答案”，因为它是有效的，它是纯React（例如，不需要本地存储）并显示了作者的努力。