分步填充信息流的应用设计

Question

假设我的应用程序由许多组件组成，用户需要填写他们的信息，如下所示：

-Select city
`-Select library
 `-Select book
  `-... a lot of components like above 

因此，应用程序已经确定了数据流，用户首先需要选择城市，然后是图书馆，然后是图书等等。

数据流如下所示，例如，当用户选择城市时，下一步将有专门针对选定城市的图书馆列表，然后用户选择图书馆，并分别显示所选图书馆中的图书列表。

问题是，当用户选择了城市，图书馆和书籍，他想选择另一个城市，它必须再次加载库，很明显，那么我应该做什么，在应用选择的书，其他选定的组件？我明白了，需要重置它们，将所选的书设置为null，不管重置的效果如何。

但是，我真的需要手动描述所有步骤吗，比如用伪代码：

onCitySelected(selectedCity) {
 currentCity = selectedCity;
 getLibraries(selectedCity);
 resetBooks();
 //reset...
 //a lot of reset functions...
}

？

如何避免这样冗长的代码，我应该使用哪个应用程序设计？

如果有帮助的话，我正在使用React+Redux。

Answer 1

您可以这样做，更通用：

class SelectList {
  constructor(callbackOnChange, items) {
    // we call this method when our selected one changes
    this.callbackOnChange = callbackOnChange;

    // list of items available
    this.items = items;

    // selected item
    this.selectedItem = null;
  }

  select(item) {
    this.selectedItem = item;
    this.callbackOnChange(this, item);
  }

  reset() {
    this.selectedItem = null;
  }

}

class SelectListsWorkflow() {
  constructor() {
    this.lists = [
      new SelectList(this.handleChange, ['city 1', 'city 2']),
      new SelectList(this.handleChange, ['library 1', 'library2']),
      new SelectList(this.handleChange, ['book 1', 'book 2']),
    ];
  }

  handleChange(selectedList, selectedItem) {
    // your logic to unset the selected value in lists after the current list
    // for example:
    let startReset = false;
    this.lists.each((list) => {
      if(list === selectedList) {
        startReset = true;
      }
      if(startReset) {
        list.reset();
      }
    });
  }
}

这样，您可以相对容易地向其添加更多的列表，并保持逻辑的一致性。此外，责任也更多地分开。工作流处理它自己的逻辑，

Answer 2

我会延迟重置组件，直到您需要再次显示该组件。您应该隐藏或禁用不需要的组件。在显示组件之前，测试与该组件关联的数据，如果该数据不再有效，则在显示该组件之前清除该组件。

这也有一个好处，如果有任何非线性数据，那么您可以选择不重置数据。在您的示例中，如果用户想要在多个库中搜索特定的书籍，他们将不需要再次填充该书。