React + Alt：使用来自多个商店的数据向 DataSource 发出请求

Posted 2023-02-22

【中文标题】React + Alt：使用来自多个商店的数据向 DataSource 发出请求

【英文标题】：React + Alt: Use data from multiple stores to make a request to DataSource

【发布时间】：2016-08-13 01:24:49

【问题描述】：

我正在开发一个使用 React 和 Alt 通量实现的应用程序。 目前，我正在尝试找出使用来自多个 Alt 存储的数据来向后端发送请求的最佳方式。

比如说，我的DataSource 文件中有一个SheetDataStore、FiltersStore 和一个fetchFilteredData 方法。要从后端获取正确的数据，我需要将一些工作表数据和过滤器都传递给 fetchFilteredData，但是当您从其中一个商店调用 fetchFilteredData 方法时，您可以传递一些参数和确切商店的状态.

所以我看到了两种处理这种情况的方法：

1) 我做了两个动作：prepareFilters 和 fetchData。 prepareFilters 从组件调用并由FilterStore 处理，它准备所有需要的数据，然后调用fetchData 操作，将准备好的数据作为参数传递。 SheetDataStore 处理 fetchData 操作并调用 fetchFilteredData，现在拥有所有必需的数据。

我不喜欢这里，在我看来，商店不应该调用操作，所以这是一种 hacky 解决方案。

2) 我将FilterStore 导入到SheetDataStore 并在SheetDataStore 方法之一中使用FilterStore.getState() 来获取我需要的所有数据。这看起来很容易，但像这样耦合商店可能会遇到一些陷阱。

对于这种情况，有什么最佳做法吗？也许你们中的一些人遇到了类似的问题，并且可以根据您的经验推荐哪些途径？

【参考方案1】：

在组件中进行绑定。假设您有FilterComponent，然后将搜索操作SheetDataAction.search 传递给它： <FilterComponent search=SheetDataAction.search />

在FilterComponent.render() 中执行<button onClick=() => this.props.search(this.props.criteria) /> 之类的操作

【讨论】：

公平点，但在这种情况下，您需要在组件中拥有所有可用的数据，而我没有。简而言之，我决定采用我在问题中提到的第二个选项，它对我有用。