How to organize a request for missing information in the tree in React with Baobab?

Question

JavaScript

A list of several VKontakte groups is displayed. The ListItem component represents one group. Its VKontakte id is passed to the component via props. In the tree, I keep a branch under VK info:

vkdata: {
  oid: { screen_name, photo_50}  // ключ целое число, значение объект со свойствами
  // например:
  -29534144: { screen_name:'oldlentach', photo_50:'https://pp.vk.me/c624928/v624928349/3892f/cSOB14IlXgM.jpg'},
}

At the time of creating the component, the data for it in the tree may already be, or may not yet be available. In the component, I dynamically create a cursor on the data of this particular vk-object:

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

The plan is this: check if there is data there, and if the key is not even defined, then queue up an asynchronous request for this data to the VC, and for now write a dummy into the key, with a photo stub. So when creating another component for the same group - such duplicates can often happen, the same group can be found in different components - another request to the VC for data will not be initiated - because the tree will already have either a dummy, or real data will appear.
Question: where is it correct to implement data validation for emptiness, request initiation and writing a dummy?
Tried: in the ListItem constructor (props are not defined there yet); in componentWillMount() (the dummy written there, even with tree.commit(), does not have time to call the render() method). I tried it in f-ii, where the vkinfo cursor is dynamically defined:

Warning: setState(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

You can do this one level up - in the list component itself, before creating item components. But I want to isolate the concern with my data inside the item-component itself.

Answer 1

Data control and loading should not happen in React components. You should request data using baobab-action, and it is there that you write temporary data to the tree and at the same time initiate the download from the real data server. In your example, it is just not visible that you are using baobab-action, and these are direct analogues of reducers in Redux. Here is an example of working with actions: https ://github.com/Yomguithereal/baobab-react/blob...
Business" ( https://github.com/Yomguithereal/baobab#computed-d... But you still need to request data from the server and change it in the tree as it arrives only from ation.