react: Правильная организация хранения глобальных данных, используемых несколькими компонентами

Подскажите как правильно построить архитектуру сайта на react с использованием mobx для следующей задачи:

есть несколько моих компонент (выпадающие списки и т.п.), которые заполняются на основании данных, полученных по запросу от сервера

поэтому несколько вопросов:

1. где и как лучше хранить эти данные, чтобы к ним мог получить доступ любой мой компонент в любое время и из любого места сайта

как вариант можно создать переменную в document или window, но это больше подходит для голого javascript 20 века :) и может сейчас есть какие-то нормальные варианты

2. как сделать так, чтобы мои компоненты обновлялись с изменением этих глобальных данных

п 2) я могу сделать в лоб -

1. получать и хранить данные в главном родительском компоненте App,
2. данные сделать наблюдаемыми (@observable)
3. каждый мой компонент сделать наблюдателем (@observer)
4. протащить "указатель" на данные из родителя до моих компонент

п. 4) очень смущает, потому что очень не хотелось бы устраивать такое "протаскивание", хочется чтобы компонент просто знал о данных, которые есть в главном родителе, но элементы между ними во всем этот не участвовали

подскажите где я что-то не так учитываю или двигаюсь в неправильном направлении