reactjs - React+Redux+Asynch：数据加载级联，上一个完成后开始下面

Question

目前在尝试解决组件级联加载的 ReactJS 方面没有太多经验。让我通过一个例子来解释用例。

假设我们有 3 个组合框 - Author、Book、Library。触发加载作者数据 -> 加载数据时，自动选择找到的第一个作者并用作第二个组合框（图书）的搜索条件 -> 加载所选作者的所有图书时，选择找到的第一个图书. 选定的作者和书籍用作第三个组合框（图书馆）的搜索条件 - 找到图书馆后，选择列表中的第一个。

• 使用“ cross-fetch ”加载数据。

• 内部组件由 3 个“选择”（组合框）控件构建而成。最初，使用了“Select” React 控件的内部实现，但也使用react-select库检查了流程。在这两种情况下，组合框的初始化看起来都相似：

  <Select
    options={authors}
    value={selectedAuthor}
    onChange={this._authorChanged}
  />
  

• react-redux#connect 将状态映射到道具

所以问题是：捕获“数据加载完成”事件以便启动下一个计划加载的正确位置和正确位置是什么？

我做了什么/想到了什么：

1. 我可以在render()方法中检测到是时候开始以下数据加载了，但据我所知，这不是一个好的解决方案（我们最好不要在方法内进行渲染所需之外的任何操作）。
2. 从理论上讲，我可以从我的动作中构建加载链，但目前我不喜欢这个想法：
   • 尽管加载方法目前仅用于组合框的初始化，但我想在其他不需要下一次加载的地方重用它；
   • 目前对我来说，当 ui 事件未触发数据加载时，这看起来不一致
3. 我认为 在初始化期间设置默认选定值value={selectedAuthor}会触发onChange事件，但它似乎不是真的（至少在我的情况下）。

标签： reactjsasynchronousreact-reduxfetch-api