父组件响应多个子组件输入

Question

我有点困惑如何以一种很好和可以理解的方式构建我的反应/通量（flummox）应用程序。

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

因为我ListFilter是可重复使用的，我通过两个回调到它：

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

现在，如果任何过滤器的值发生了变化（无论是类别或搜索查询，我想在调用通量行动。我的父母StrategyList组件API获取新的列表项目

在大约每例子在那里，他们有一个回调的子组件，然后家长做这样的事情：

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

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

我现在迷茫，如果我应该：

1.存储&类SEARCHQUERY我StrategyList组件的状态？

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

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

// Same for category... 

• 当我这样做，似乎作用从来没有得到实际的状态数据，但始终是一个落后一步（因为的setState不同步？）

2.商店类别& 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.*子元素，因为至少下拉是更高级别的componenent（材料UI），没有裁判，但只有一个回调（其组成的div，而不是选择-领域）。

谢谢你的帮助。

罗伯特

Answer 1

正如我一直在与焊剂模式工作时，我发现它更有用中使用动作在卖场变异数据，并且不使用动作时，商店不需要进行任何更改，回应我的要求。

如果我想更新商店，我发送一个包含我的updaye的操作。商店倾听相关操作并更新自己。然后，当数据发生变化时，我的商店会发布更改事件，以便在连接到这些商店的组件中侦听。但是当从商店获得数据的时候（或者是为了响应其中一个事件告诉我商店的数据已经改变，或者其他时候我需要新的数据），我只需要使用MyStore.getTheData(category, filterText)。

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