Как в React с Baobab организовать запрос отсутствующей в дереве инфы?

Выводится список нескольких групп ВКонтакте. Компонент ListItem представляет собой одну группу. Её id ВКонтакте передаётся в компонент через props. В дереве я держу ветку под ВКонтактовскую инфу:
vkdata: {
  oid: { screen_name, photo_50}  // ключ целое число, значение объект со свойствами
  // например:
  -29534144: { screen_name:'oldlentach', photo_50:'https://pp.vk.me/c624928/v624928349/3892f/cSOB14IlXgM.jpg'},
}


На момент создания компонента, данные для него в дереве могут уже быть, а могут пока отсутствовать. В компоненте я динамически создаю курсор на данные именно этого вк-объекта:

export default branch( ListItem, {
	cursors( props, context) {
		return {
			vkinfo: [ 'vkdata', props.oid],
		};
	},


План такой: проверять, есть ли там данные, и если ключ даже не определён – то ставить в очередь асинхронный запрос за этими данными к ВК, а в ключ пока записать пустышку, с фото-заглушкой. Так при создании ещё одного компонента для этой же группы – такие дубли могут нередко случаться, в разных компонентах попадаться одна и та же группа – не будет инициирован ещё один запрос к ВК за данными – т.к. в дереве уже будет либо пустышка, либо настоящие данные появятся.

Вопрос: где правильно реализовать проверку данных на пустоту, инициацию запроса и запись пустышки?

Пробовал: в конструкторе ListItem (там ещё не определены props); в componentWillMount() (записанная там пустышка, даже с tree.commit(), не успевает до вызова метода render()). Пробовал в ф-ии, где динамически определяется курсор vkinfo:
Warning: setState(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.


Можно это делать на уровень выше – в компоненте самого списка, перед созданием компонентов-item'ов. Но хочется изолировать озабоченность своими данными внутри самого компонента-item'а.
  • Вопрос задан
  • 803 просмотра
Решения вопроса 1
Staltec
@Staltec
Node.js разработчик
Контроль за данными и их подгрузка не должны происходить в React-компонентах. Вы должны запрашивать данные с помощью baobab-action, и именно там писать в дерево временные данные и заодно инициировать загрузку с сервера реальных данных. В вашем примере как раз не видно чтобы вы использовали baobab-action, а это прямые аналоги редюсеров в Redux. Вот здесь есть пример работы с actions: https://github.com/Yomguithereal/baobab-react/blob...

Если захотите иметь курсоры которые динамически формируют ответ с временными данными в случае их реального отсутствия, то посмотрите в сторону механизма "Monkey Business" (https://github.com/Yomguithereal/baobab#computed-d... Но запрашивать данные с сервера и менять их в дереве по мере поступления вы всё равно должны только из ation.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 янв. 2021, в 12:45
80000 руб./за проект
19 янв. 2021, в 12:20
40 руб./за проект