Родительский компонент реагирует на входы нескольких дочерних компонентов

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); 
} 

Кажется приятным, и это работает так. Но ... Если я получаю данные, мне нужно отправить как категорию , так и поисковый запрос! Я не могу полагаться только на параметр обратного вызова. Я могу получить данные только через два конкретных callback-метода 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); 
} 

Но в этом случае, где я действительно вызываю действие выборки? В какое время я знаю, что одно из двух значений изменилось, и мне нужно запустить загрузку данных? Также кажется, что излишняя служебная нагрузка для действий creat только для сохранения значений в общепринятом магазине, где они никогда не используются.

3. Где-то еще? Контекст? ReactLink? Как получить доступ к значениям?

Я не может доступа дочерних элементов через this.refs.*, потому что, по крайней мере выпадающий высший уровень componenent (материал-щ) без рефа, но только обратный вызов (его состоит из див, а не выбрать -field).

Благодарим за помощь.

Роберт

Answer 1

Как я работал с Flux рисунком, я нашел, что это более полезно использовать действия мутировать данных в магазинах и не использовать действия, когда в магазинах не нужно ничего менять, чтобы отреагируйте на мою просьбу.

Если я хочу обновить магазины, я отправляю действие, которое содержит мое updaye. Магазины слушают соответствующие действия и обновляют себя. Затем, когда данные меняются, мои магазины генерируют события изменения, которые я могу прослушивать в компонентах, подключенных к этим магазинам. Но когда настало время получить данные из магазина (либо в ответ на одно из этих событий, сообщивших мне, что данные магазина изменились, или в любое другое время мне нужны свежие данные), я просто использую MyStore.getTheData(category, filterText).

Для вашего случая я бы рекомендовал сохранить категорию и filterText в состоянии StrategyList и реализовать функцию сбора данных в StrategyStore, чтобы вернуть вам данные, отфильтрованные, как вы хотели бы их увидеть.