I am implementing a React - Reflux architecture based application, which shows a list of rows in a page. Each row in the list allows inline editing of the properties. The save button in the row, calls a reflux-action, which updates data to server.
So, for the forward flow this looks fine
rows/row/savebtn => reflux-action => reflux-store => server
Now, for refreshing the view
server => reflux-store => trigger => where???
I see 2 options:
server => reflux-store => trigger (list of rows) => rows
server => reflux-store => trigger (row changed) => row
The question is, who should be listening for store events? Should it be the rows component or an individual row that got updated.
I am tempted to use "rows" as the action response listener, but my concern is that "rows" should get entire page data so it can render. This means, I need to make an ajax call to get all rows from server, so that my display stays synchronised?
On the other hand, if I make the "row" as action listener, am I breaking the principle of 'single source of truth' coming from rows to row. Moreover, row component doesn't have a state, as it gets its row from its parent/owner like this
/**
* creates a HTML table to show requirements
**/
var ReqTable = React.createClass({
render: function() {
var rows = [];
rows = this.props.data.map(function(row) {
return ( <ReqRow key={row.id} row={row} />);
});
return (<div>{rows}</div>);
}
});
A record row is being created by sending a row data, which is read as this.props.row in the child component.
What is the standard/preferred way to update the affected row in the rows table?
The store event listener should be in the highest parent component for which the children share the data. The store would be the only action listener. The way I organize it is the entry point is app.js which requires app.ctrl, api.store and actions. The app.ctrl for a multi-page app would connect with an app.store which would contain app state (such as which page is active). The app.ctrl would also require all the page.ctrls and would pass app.state as well as show/hide props to the pages. The page.ctrl would normally connect to the stores relevant to the data those pages needed. There are some basic examples at https://github.com/calitek/ReactPatterns.