Задать вопрос

Как в 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'а.
  • Вопрос задан
  • 874 просмотра
Подписаться 1 Оценить Комментировать
Решения вопроса 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.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы