Until now, our components have communicated with the backend through method calls. That's OK for tiny applications, but when things start to scale, we will forget to make some of those method calls.
Look at onUpdate, for instance:
onUpdate(id, field, value) {
this.props.backend.update(id, field, value);
this.setState({
"pages": this.props.backend.getAll()
});
}Every time we change the state of a page, we have to fetch an updated list of pages from the backend. What if multiple components send updates to the backend? How will our PageAdmin component know when to fetch a new list of pages?
We can turn to event-based architecture to solve this problem. We've already encountered and used events! Recollect what we did when we created the page edit form. There, we connected to input events so we could update pages when input values changed.
This kind of architecture moves us closer to a unidirectional flow of data. We can imagine our entire application like...