0

For my first React app I need to display a menu hiearchy with group-items, read-items and write-items (there are more, but that's enough for this example).

Each read-item and write-item are connected to a data point in a JSON API: each item has a resource (for example /api/1.0/fruits) and a json-path (for example data.color).

When the menu is displayed all values should be fetched from the web service. But I don't want each item to fetch its value independently because then the same resource would be read multiple times in the typical case.

I have a static, stateless menu structure as well that the views are built from. I can call a method, getRequiredResources(), on the root menu item in this menu structure which will return a set of resources.

But then I've introduced dynamic menu items, so that depending on the state of the menu items different resources are required. I can no longer use the static menu structure to collect all required resources, since it has no knowledge about the state of each item.

Any hints on how to handle this? If I could access the child menu item components they hold enough state to return a list of required resources, but I don't think that's a recommended pattern...?

I use a Flux architecture for data flow.

Jonatan
  • 3,752
  • 4
  • 36
  • 47
  • I'm considering letting each component queue fetch of a resource when needed. When mounted they will put such a fetch request in the queue immediately. Is this a sane way to handle it? How would you implement it? As a Flux action? Where should the queue be kept? When should the queue be processed? – Jonatan Oct 20 '15 at 13:58

1 Answers1

0

It is good practice to maintain state as high as possible in the component tree. Best solution in your case depends on the source of the dynamic conditions of the menu structure:

  • If these dynamic conditions originate from the outside world (e.g. whether or not user is logged in):
    • Put state inside the top menu component, including all the information about the condition of its child components.
    • Then the top component could still fetch all data, and render the dynamic menu.
    • This maintains your requirement to fetch menu data only once.
    • For this you to maintain info about the condition of menu somewhere in a store, to pass on to top component.
  • If the dynamic conditions originate from within the menu item (e.g. a checkbox or filter for subitems inside the menu)
    • Give the child components state, and have each child fetch their own stuff based on that state. (Start with loading state, fetch items, and re-render).
    • In that case, you may be fetching same data twice (since children do not communicate with each other.
  • If the dynamic conditions originate from within the menu components and your dataset is not overly large or complex (sounds like this doesn't fit your needs):
    • you could still fetch everything at the top, and use state inside the children only for filtering purposes.
  • If dynamic conditions originate from within the menu, but you want to save the state somewhere (e.g. for when user revisits page):
    • then keep state in top component, as well as all dynamic children conditions.
    • Children are all stateless, everthing is passed as props.
    • Whenever inside a child a filter or similar is set, that child fires an action to the dispatcher. You then need to save your filter conditions also somewhere in a store.
wintvelt
  • 13,855
  • 3
  • 38
  • 43