父組件響應多個子組件輸入

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中實現數據獲取器功能以將數據返回給您，並按您希望的方式進行過濾。