Search code examples
reactjscomposition

React: Best way to pass data from a generic "data provider" filter to siblings

I am creating an Analytics webpage (think Google Analytics-like) with React.

I have a main component that encapsulates the different pages available (one overview, then specific drilldowns).

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

The AnalyticsFilter is a way to filter the data displayed - it is the same for all the pages, hence why it is included here. The idea is that the components (the props.children) displaying the data would request it from the filter, which would then lazily load the data (and potentially cache it too), since multiple components might display the same data in different ways (charts, tables, top10, etc.).

My question: What is the ideal way to facilitate communication between any components on the page and the AnalyticsFilter component?

The filter will have 4-6 different data sets available (all based on the same filter parameters), but I don't want to query all of them for pages where it is not needed (ie. a specific view that only cares about a specific data set).

As such the components should be able to

  1. Request a specific kind of data set, and
  2. Be automatically updated when the filter parameters are updated.

Everything is open, as I am just starting out (and fairly new to React). The Analytics component here can be easily rewritten to include more functionality if that makes it easier.

Solution

  • I would take a look at the flux flux architecture which fits perfectly with react. A good implementation of that architecture is redux.

    The basic concept is that everything the user enters in your views triggers an action which is handled in the dispatchers and saved in the stores. The stores trigger then the view rerender, e.g. the dispatcher applies your filter to the data, saves the filtered data to the store and the view renders that filtered data. flux architecutre