Model-View-Update is a unidirectional architecture for functional user interfaces. The model holds application data, the view represents displayed controls and emits user actions, and the update function transforms the current model in response to commands. section 13.5.3
MVU keeps business logic in one update function and sends data in one direction. This makes UI changes easier to reason about while supporting asynchronous messages and queued concurrent actions through Elmish. section 13.5.3
The three components divide responsibility clearly:
- Model: a record representing application state, such as a shopping basket, logged-in user, or account balance. section 13.5.3
- View: a data structure representing displayed controls and converting activities such as button clicks into commands. section 13.5.3
- Update: a function that receives the current model and a command, then returns revised application state. section 13.5.3
- Commands: discriminated-union cases describing actions such as EmptyBasket or AddItemToBasket. section 13.5.3
Updating an e-commerce basket
An EmptyBasket command replaces the basket's items with an empty list. An AddItemToBasket command carries a product SKU, allowing update to add that item to the current basket. section 13.5.3
Figure 13.14 The MVU pattern is a pattern that allows you to manage UI changes to a data model in a pure functional style.
Use the diagram to trace how MVU manages UI changes to a data model in a pure functional style. section 13.5.3
