Неуверенность в семантике реакции

Question

Я совершенно новый, чтобы реагировать и пытаться обернуть голову вокруг семантики.

Я создаю приложение на основе карты, а основными частями сайта являются карта, навигационная панель и меню поиска, которые появляются над картой и позволяют выбрать поиск, который заполняется из запроса ajax.

Вот некоторые вопросы, которые приходят на ум:

Где я должен закончить свои АЯКСЫ запросов, следует, что все должны содержаться в компоненте карты? Если да, то как мне передать параметры для запроса, если ответ передаст его функции на карте, то как мне вызвать функцию из моего компонента меню поиска?

Моего приложение в настоящее время организовано следующим образом:

export default class App extends React.Component { 
    toggleSearchMenu() { 
    this.refs.searchMenu.toggleVisible(); 
    } 
    render() { 
    return (
     <div className="pure-g"> 
     <Nav> 
      <NavButton onClick={() => this.toggleSearchMenu()}>Searches</NavButton> 
     </Nav> 
     <Map lat="53.15" lng="-0.5" zoom="9" /> 
     <SearchMenu ref="searchMenu" /> 
     </div> 
    ); 
    } 
} 

Как вы можете видеть, я привел к показу и скрытия меню из функции в моем приложении компонент, который не чувствует себя хорошо как-то?

Answer 1

Как вы знаете, React отвечает только за визуализацию представлений, но не определяет, как структурировать фактическую логику вашего приложения. Facebook предлагает использовать для этого архитектуру Flux. Этот сайт и видео должны попасть на правильный путь: https://facebook.github.io/react/blog/2014/05/06/flux.html

В принципе, вы хотите, чтобы все действия вводились в один и тот же «конвейер», независимо от того, откуда они происходят. Логика и некоторое состояние хранятся в «магазинах» (вроде гибрида между моделью и контроллером), и, наконец, компоненты прослушивают изменения в этих магазинах, а затем повторно отображают себя.