Flow Actions for UI Events
I am using react and flow in my application. In my application, I have two components, TreeView and TableView, and they are retrieved from two different repositories.
I want to add a parameter - when I click on a row in my TableView, it will open the corresponding node in my TreeView.
My question is, how are these two components supposed to talk to each other? In AngularJS / Backbone, I will use the Aggreator Event template and broadcast an event such as "objectSelected" with its ID.
How should I do this, reacting with the flow architecture - I thought using the flow method - and create an action, but then my store will save the UI state (which nodes are open) and I think the component (in this case the TreeView) should save it is a state (not a store).
How do I react correctly between the two components?
source to share
If you don't want to use flux, you will pass actions as props through the parent component.
The only stream implementation I have used is Fluxxor. Using fluxxor (and probably most stream implementations), you can have both component state and store state. If your table and tree will always be linked (open or closed at the same time), I think it would be good to keep them in the store.
You can do something like ..
TableComponent = React.createClass({
getInitialState: function() {
return {
//component specific state
};
},
getStateFromFlux: function() {
// flux store state
return {
appStore: this.getFlux().store('AppStore').state
}
},
handleClick: function(tree) {
this.getFlux().actions.appActions.toggleTree(tree);
}
});
source to share