Должен ли я хранить данные Firestore в качестве состояния в компоненте App () верхнего уровня для сохранения при чтениях API?

Question

Я разрабатываю простое TodoApp (одностраничное приложение) в качестве стартового набора для моих проектов React + Firebase + Firestore.

В настоящее время я решаю, куда поместить мой массив (состояния) Todos.

Вот текущая структура компонентов моего приложения:

<App>
  <Layout>
     <Header>
     <Main> // <--- The routes are rendered here
        <TodosContainer>  // <--- This handles data and logic for my TodosPage
        <TodosPage>   // <--- This is presentation for the TodoList

Примечание:

<TodosContainer> и <TodosPage> - это только один из маршрутов. Вы можете перемещаться между другими страницами, такими как About, Contact и т. Д. Таким образом, <TodosContainer> отключается и монтируется каждый раз, когда вы включаете и выключаете эти маршруты.

Это код (ниже), где я слушаю Todos из Firestore:

• Когда мой компонент монтируется, я начинаю прослушивать задачи с помощью метода onSnapshot().
• Когда он отключается, я отменяю слушателя

Методы получения данных Firestore:

listenTodos(){
    this.props.firebase.db.collection('todos')
    .onSnapshot((QuerySnapshot)=>{
      let loadedTodos = [];
      console.log('Todos were retrieved from Firestore');
      QuerySnapshot.docs.forEach((item)=> {
        loadedTodos.push({
          id: item.id,
          message: item.get('message')
        });
      });
      this.setState({
          todos: loadedTodos
        });
    });
  }

  componentDidMount(){
    this.listenTodos();
  }

  forgetTodos(){
    this.props.firebase.db.collection('todos')
    .onSnapshot(()=>{});
  }

До сих пор я думал о двух вариантах (и я открыт для лучшего третьего)

Вариант № 1

• Поскольку <TodosContainer> отвечает за сохранение логики для <TodosPage>, я поместил слушателя в код Firestore выше.
• Но проблема с этой опцией заключается в том, что каждый раз, когда я переключаю маршруты, <TodosContainer> отключается и монтируется.
• Он продолжает выходить из системы: «Тодо были извлечены из Firestore»
• Значит, каждый раз я получаю очередные данные из магазина пожаров, верно?
• В простом TodoApp это не так много, но в большом приложении это, вероятно, не будет хорошо.

Вот как я его интуитивно построил, так что это моя текущая сборка.

Вариант № 2

• Я думаю о переносе функции прослушивания todo на мой <App> компонент, который, вероятно, просто монтируется один раз, и это избавит меня от чтения одних и тех же данных снова и снова из Firestore, верно?
• Я сохраню массив задач в состоянии компонента App, передав его по цепочке.
• Я буду получать новые задачи в слушателе только после их добавления.

Это лучший вариант?

UPDATE

https://www.youtube.com/watch?v=6NegFl9p_sE

Только что вернулся из этого видео (ссылка выше) о «Ценообразовании Firestore», и в нем поясняется, что Firestore достаточно умен, чтобы знать, что если вы прослушиваете коллекцию из 300 документов и 1 добавляется в эту коллекцию, вы получите 301 документов, но вы будете платить только за 1 дополнительное чтение, потому что Firestore кэширует данные, которые он уже отправил вам. Это отличные новости.

Но мой вопрос по-прежнему применим, потому что в варианте 1 мой слушатель много подключается и отключается. Ребята, вы думаете, что Firestore не будет заряжать меня снова, даже в недавно смонтированном слушателе? Я думаю, что это зарядит меня много раз, и, вероятно, лучше всего перенести слушателя на компонент приложения. Что вы, ребята, думаете?