Question

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

我正在使用路由器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中检索（此时它没有任何区别）。

当用户在目标网页中时，他可以导航到员工或客户视图。当组件被安装时，假设它是员工组件，并且在组件的componentDidMount方法中，我们检索所需的信息（在这种情况下是员工列表）。

到目前为止一切正常。

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

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

任何帮助都会非常有用。

谢谢！

Answer 1

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

BakeryComponent

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

LandingComponent

// 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())
  }
}

等待Redux操作发送第二个

1 个答案: