What is the right way to fire an action with siblings state in React/Flux?

Question

I have a Hub component which I am consuming which supports some components as options which show up in a bar For eg. Save button (denoted as component B).

I am rendering my UI component 'A' inside this hub. On click of the Save button(i.e. Component B ) of the Hub, I want to send component A's (my UI ) state to server.

My constraint:- I cannot save the state at the Hub level because its too high up in hierarchy and many other components are also getting rendered in other tabs depending upon the url.

Approaches I have considered:

1. Use refs to get the state of Component A when the Save button is clicked.
2. Pass on an object from Hub to Component A. Component A will save its state in this object so that whenever the parent needs the state, it is available to it.
3. Cascading of actions. In this case A component will listen to an action ( feasible but highly discourgaged since it violates flux)

Answer 1

After reading a lot, reading a child's state using refs is the solution for this problem.

You should not be modifying child's state or calling methods using refs.

It's Ok to read the state using refs.