Как использовать одно свойство состояния Redux для 2 компонентов с разными данными

Question

В моем состоянии Redux у меня есть свойство data.Теперь у меня есть 2 компонента: compA и compB.Когда я инициализирую эти компоненты, каждый из них запускает следующий код:

componentWillMount() {
  this.props.onSectionInit('compA');
}

onSectionInit получает соответствующие данные из БД (в моем случае Firebase) и сохраняет их в свойстве data.В методе render каждого компонента у меня есть следующий код:

const {
  data,
  error,
} = this.props;

let content = error ? <p>Oops, couldn't load data...</p> : <Spinner />;

if ( data.length > 0 ) {
  content = (
    data.map(item=> {
      return (
        <CompAItem
          item={item}
          key={item.id} />
      );
    })
  );
}
return (
  <SectionContainer>
    {content}
  </SectionContainer>
);

Данные, возвращаемые из БД, имеют разные поля и структуру для каждого компонента.Теперь у меня есть такой сценарий:

• Откройте приложение и перейдите на страницу compA - отрисовывает правильно
• Перейдите на страницу compB - отрисовывает правильно
• Снова перейдите к compA -приложение вылетает

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

Теперь я попытался сбросить данные в componentWillUnmount в compB, но, очевидно, этот метод выполняется после componentWillMount в compA.

Возможно ли заставить оба этих компонента работать с одним и тем же свойством data?Или мне нужно использовать разные свойства для каждого компонента (например, compAData, compBData), особенно учитывая, что таких компонентов будет много?Или, может быть, выделенный редуктор для каждого компонента?Какова лучшая практика?