What is a controller view in the Flux Architecture?

Question

I see the term mentioned often for Flux architectures and React projects.

From what I understand, it is a design pattern but I can't find a good description for it online.

Answer 1

The concept of "controller-view" did offset me to start with.

The best "definition" I could find is there : https://facebook.github.io/flux/docs/todo-list.html#listening-to-changes-with-a-controller-view

We need a React component near the top of our component hierarchy to listen for changes in the store. In a larger app, we would have more of these listening components, perhaps one for every section of the page. In Facebook's Ads Creation Tool, we have many of these controller-like views, each governing a specific section of the UI.

Our interpretation was that as soon as you have a big components hierarchy, you do not want every component to listen to every change that may affect it. Rather you pick a top/parent component which listens to changes and then propagate via the props the changed values to its children. These children will be re-rendered as required on props changes. That top component becomes a "controller" for the hierarchy.

Answer 2

The controller-view got me confused too. No doubt intended to be helpful to explain react design. But it assumes the reader knows about/ is familiar with MVC design pattern (which I wasn't, and therefore got me even more confused).

"controller view" is intended to convey that a React component is actually both "controller" and "view" as defined in the MVC or Model-View-Controller lingo, where:

• Model is where you keep, structure, and manage your data
• View is the tree of visible UI components (HTML and stuff)
• Controller mediates between view and model, by fetching data from model and passing it on to the view, and by listening to user input in the view and passing it on to the model

In react, your component not only acts as a controller, but you also define the structure of your view (the structure of your components inside your render + the structure of your component-tree).

If you also use flux with react: the flux stores are the equivalent of the model in MVC.