Views

Data from stores is displayed in views. Views can use whatever framework you want (In most examples here we will use React). When a view uses data from a store it must also subscribe to change events from that store. Then when the store emits a change the view can get the new data and re-render. If a component ever uses a store and does not subscribe to it then there is likely a subtle bug waiting to be found. Actions are typically dispatched from views as the user interacts with parts of the application’s interface.

Example:

• The main view subscribes to the TodoStore.
• It accesses a list of the Todos and renders them in a readable format for the user to interact with.
• When a user types in the title of a new Todo and hits enter the view tells the Dispatcher to dispatch an action.
• All stores receive the dispatched action.
• The TodoStore handles the action and adds another Todo to its internal data structure, then emits a “change” event.
• The main view is listening for the “change” event. It gets the event, gets new data from the TodoStore, and then re-renders the list of Todos in the user interface.

Controller views are really just React components that listen to change events and retrieve Application state from Stores. They then pass that data down to their child components via props.