React：将数据从通用“数据提供者”过滤器传递给兄弟姐妹的最佳方法

Question

我正在使用React创建Google Analytics网页（与Google Analytics类似）。

我有一个主要组件，它封装了可用的不同页面（一个概述，然后是特定的下钻）。

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

AnalyticsFilter是一种过滤显示数据的方法 - 它对所有页面都是相同的，因此它包含在这里。这个想法是显示数据的组件（props.children）会从过滤器请求它，然后懒惰地加载数据（并且可能也会缓存它），因为多个组件可能以不同的方式显示相同的数据（图表，表格，top10等）。

我的问题：促进页面上任何组件与AnalyticsFilter组件之间通信的理想方式是什么？

过滤器将有4-6个不同的数据集可用（全部基于相同的过滤器参数），但我不想查询所有不需要的页面（即只有特定的视图）关心特定的数据集。）

因此，组件应该能够

1. 请求特定类型的数据集，
2. 更新过滤器参数时自动更新。

一切都是开放的，因为我刚刚开始（对React来说还是新手）。这里的Analytics组件可以轻松地重写，以包含更多功能，如果这样可以更容易。

Answer 1

我想看一下与反应非常吻合的通量flux结构。该架构的良好实现是redux。

基本概念是用户在视图中输入的所有内容都会触发在调度程序中处理并保存在商店中的操作。然后存储触发视图重新呈现，例如，调度程序将过滤器应用于数据，将过滤后的数据保存到商店，视图呈现过滤后的数据。