Асинхронное изучение асинхронности

Узнав о нормализации данных с помощью реакции/редукции, я поместил свои списки в объекты с ключами, являющимися идентификаторами, и значениями, являющимися элементами списка. Это выглядит примерно так:

list = {
  5: {
    name: "Bob",
    id: 5
  },
  3: {
    name: "Natalie",
    id: 3
  },
x`  14: {
    name: "Ian",
    id: 14
  }
}

По сути, это делало мою жизнь намного проще, чем работа с массивами, когда дело доходило до доступа к определенным элементам в моем списке. Позиция не имела значения, только id. Однако у меня возникла проблема с моими реагирующими компонентами и получением правильной информации в нужном месте.

Делаю фотогалерею. У меня есть страницы GalleryContainer (GC) и GalleryShow (GS). GC рендерит GS (реакция 101). В galleryReducer у меня list: {}, activeGallery: 0 . Я планирую использовать list[activeGallery] для доступа к нужной мне галерее.

Вот основная идея (псевдокод):

--galleryReducer.js--
  state = {list: {}, activeGallery: 0}
--GalleryContainer-- // '/galleries'
{
  return(
    <div>
      <Route exact path='/galleries' render={props =>
        <GalleryList //has function that alters url & activeGallery
          galleries={this.props.galleries}
        />
      }/>
      <Route exact path='/galleries/:id' render={props =>
        <GalleryShow
          gallery={this.props.galleries[this.props.activeGallery]}
        />
      }/>
    </div>
  )
  
  componentDidMount = () => {
    this.props.fetchGalleries()
  }
}
--GalleryShow--
{
  return(
    <div>
      {this.props.gallery.name}
    </div>
  )
  componentDidMount = () => {
    this.props.fetchPhotos(gallery.id)
  }
}

Можете ли вы определить проблему? Я имею в виду, что это может быть непросто с псевдокодом, поэтому я просто скажу вам. Нет проблем, если пользователь переходит в контейнер галереи, нажимает на галерею и отправляется на страницу GS. Выполняется вызов извлечения, и фотографии добавляются на страницу. Ура! Однако проблема в том, что если кто-то перейдет прямо по URL-адресу галереи, он нарушит код.

Список галерей не извлекается из серверной части до тех пор, пока componentDidMount не вызовет его из GC. К сожалению, GS уже пытался получить фотографии, используя идентификатор галереи. Которого, как известно, еще нет. Я мог бы просто заставить пользователя перейти по ссылке «/galleries», и мы все были бы счастливы. Однако я не думаю, что U-eX будет очень плавным.

Я обошел проблему, используя магию componentWillReceiveProps и внедрив быструю проверку логики в cDM в компоненте GS. Сначала я проверяю, есть ли галерея, если нет, устанавливаю ее, если есть, загружаю фотографии. И все счастливы. В основном.

componentWillReceiveProps = nextProps => {
    if(!this.props.gallery && nextProps.gallery){
      this.fetchPhotos(nextProps.gallery.name)
    }
  }