Question

我有点困惑如何以一种不错且易于理解的方式构建我的react / flux（flummox）应用程序。

我有一个名为StrategyList的父组件，它显示了一个＆＃34;策略＆＃34;的可过滤列表。策略存储在StrategyStore（Flux）中。现在我的StrategyList还有一个可重复使用的子组件ListFilter，它会显示一个下拉菜单以选择一个类别和一个搜索框来过滤列表。

因为我的ListFilter可以重复使用，所以我将两个回调传递给它：

<ListFilter
  onSearchQueryChange={this._handleSearchQueryChanged.bind(this)}
  onCategoryChange={this._handleCategoryFilterChanged.bind(this)}
  ...
/>

现在，如果任何过滤器值已更改（类别或搜索查询，我想在我的父StrategyList组件上调用flux操作，以从API获取新的列表项。

在每个例子中，他们都有一个带回调的子组件，然后父母做了这样的事情：

_handleSearchQueryChanged(searchQuery) {
  this.props.flux.getActions('strategyActions').fetchData(searchQuery);
}

看起来不错，就像那样。但是......如果我获取数据，我需要发送类别和搜索查询！我不能只依赖回调参数。我只能通过两个特定的onChange回调来获取数据，我需要将值存储在我的父组件中，对吗？

我现在很困惑，如果我应该：

1。商店类别＆amp;我的StrategyList组件状态中的searchQuery

_handleSearchQueryChanged(searchQuery) {
  this.setState({
    searchQuery: searchQuery
  };

  this.props.flux.getActions('strategyActions').fetchData(
    this.state.category, 
    this.state.searchQuery);
}

// Same for category...

当我完成此操作时，似乎操作永远不会获得实际状态数据，但总是落后一步（因为setState不同步？）

2。商店类别＆amp;我的商店里有searchQuery吗？

为此，我会在回调中调用Flux动作来保存输入字段中的数据。

_handleSearchQueryChanged(searchQuery) {
  this.props.flux.getActions('strategyActions').setSearchQuery(searchQuery);
}
_handleCategoryFilterChanged(category) {
  this.props.flux.getActions('strategyActions').setCategory(category);
}

但在这种情况下，我在哪里实际调用fetch操作？我什么时候知道这两个值中的任何一个已经改变，我需要触发数据加载？此外，创建操作似乎只是一个不必要的开销，只是为了将值保存到从不使用它们的应用程序范围的商店。

第3。别的地方？语境？ ReactLink？如何访问这些值？

我无法通过this.refs.*访问子元素，因为至少Drop-Down是一个没有引用的更高级别的组件（material-ui），但只有一个回调（它的由div组成，而不是选择字段。）

感谢您的帮助。

罗伯特

Answer 1

由于我一直在使用Flux模式，我发现使用操作来改变商店中的数据更有用，并且当商店不需要更改任何内容以对其做出反应时不使用操作我的请求。

如果我想更新商店，我会发送一个包含我的updaye的动作。商店会监听相关操作并自行更新。然后，当数据发生变化时，我的商店会发出我可以在连接到这些商店的组件中监听的更改事件。但是当它只是时间从商店获取数据时（要么响应其中一个事件告诉我商店的数据已经改变，或者我需要新鲜数据的任何其他时间），我只是使用{ {1}}。

对于您的情况，我建议将类别和filterText存储在StrategyList状态，并在StrategyStore中实现数据获取功能，以便将数据返回给您，按照您希望的方式进行过滤。

父组件对多个子组件输入做出反应

1 个答案: