Реакт: лучший способ передать данные от общего фильтра «поставщик данных» для родных братьев

Question

Я создаю веб-страницу Google Analytics (думаю, как Google Analytics) с React.

У меня есть основной компонент, который инкапсулирует различные доступные страницы (один обзор, а затем конкретные развертки).

function Analytics(props) { 
    return (
    <div id="main" className="analytics"> 
     <AnalyticsFilter /> 
     <div id="content"> 
     <div id="contentsub"> 
      {props.children} 
     </div> 
     </div> 
    </div> 
); 
} 

The AnalyticsFilter способ фильтрации данных, отображаемых - это то же самое для всех страниц, следовательно, почему он включен здесь. Идея состоит в том, что компоненты (props.children), отображающие данные, будут запрашивать у него фильтр, который затем лениво загружает данные (и, возможно, кэширует их), поскольку несколько компонентов могут отображать одни и те же данные по-разному (диаграммы, таблицы , top10 и т. д.).

Мой вопрос: что является идеальным способом для облегчения связи между любыми компонентами на странице и компонентом AnalyticsFilter?

Фильтр будет иметь 4-6 различных наборов данных, доступных (все они основаны на тех же параметрах фильтра), но я не хочу запрашивать их все на тех страницах, где он не нужен (то есть конкретное представление, которое только заботится о конкретном наборе данных).

Поскольку такие компоненты должны быть в состоянии

1. Заявка на конкретный вид набора данных, и
2. автоматически обновляется, когда параметры фильтра обновляются.

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

Answer 1

Я бы взглянул на флюс flux Архитектура, которая идеально вписывается в реакцию. Хорошей реализацией этой архитектуры является redux.

Основная концепция заключается в том, что все, что пользователь вводит в ваши представления, запускает действие, которое обрабатывается диспетчерами и сохраняется в магазинах. Хранилища запускают затем просмотр рецензента, например. диспетчер применяет ваш фильтр к данным, сохраняет отфильтрованные данные в хранилище, а представление отображает отфильтрованные данные.