Реагировать Как подписаться на наблюдаемые, которые объявлены в другом компоненте

Question

Я пытаюсь создать окно поиска, которое фильтрует результаты поиска во всплывающем окне, пока пользователь печатает. Пример моего кода выглядит следующим образом.

class Search extends React.Component {
  constructor(props) { ... }

  onInputClick() {
    this.setState({...this.state, openResult: true});
  }

  onInputBlur() {
    this.setState({...this.state, openResult: false});
  }

  render() {
    return {
       <div id='search'>
         <Input onClick = {this.onInputClick} onBlur = {this.onInputBlur} />
         <Results open={this.state.open} />
       </div>
    }
  }
}

В компоненте реакции <Input /> я использую onClick и onBlur для <input />. Следовательно, когда пользователь щелкает вход / выход, весь компонент <Search /> перерисовывается и на основе значения this.state.open графический интерфейс отображает / скрывает результаты.

Теперь моя проблема в том, что я объявляю let input$ = Rx.fromEvent(ref, 'input') в компоненте <Input />. Как я могу отфильтровать результаты в <Result />?

Одно из моих решений - использовать Redux вот так input$.subscribe(data => updateReduxState(data));. Когда состояние изменяется, компонент <Result /> перерисовывается.

Во-первых, это правильно? Во-вторых, это перегиб / переобучение? Слишком сложно использовать Redux + Rxjs таким образом.

Answer 1

В конце концов, я не использовал этот подход input$.subscribe(data => updateReduxState(data)).Вместо этого я просто использую setState () для родительского компонента.Напомним, в компоненте объявлено input$, поэтому мне нужно передать обработчик onChange следующим образом: <Input onChange={Search.onChange()} />

Answer 2

Ваше решение кажется нормальным.Я предложу чистую альтернативу RxJS, используя RxJS Subject .Скажем, у вас есть два компонента: компонент поиска с вашим <input> и компонент результата, который показывает данные, основанные на ключевом слове поиска.

__________        __________
| search |        | result |
|        |   -->  |        |
|________|        |________|

Что вы можете сделать, это создать subject и создать значениячерез него на размытие или ключ в зависимости от ваших требований.Позвольте компоненту результата подписаться на эту тему и прослушать значения.На основе ключевого слова в поле поиска запустите функцию оценки результата и покажите их в компоненте результата.Таким образом вы устраняете избыточность.

Псевдокод может выглядеть примерно так:

searchComponent

searchboxSubject = new Subject<any>();

blurOut(event) {
   this.searchboxSubject.next(event); //event holds your search keyword.
}

resultComponent

searchboxSubject.subscribe((data) => this.evaluateResultAndUpdateUI(data));