A browser event tells you what happened; a command requests what the application should do. In a to-do app, clicking Add and pressing Enter can both mean “add a to-do.” The event listener translates either interaction into the same application-domain command, `add-todo`. Command names describe intended operations, not buttons or keys. section 5.1.1
Table 5.1 Mapping between browser events and application commands in the TODOs application
|
Browser event
|
Command
|
Explanation
|
|---|---|---|
|
Click the Add button.
|
add-todo
|
Clicking the Add button adds a new to-do item to the list.
|
|
Press the Enter key (while the input field is focused).
|
add-todo
|
Pressing the Enter key adds a new to-do item to the list.
|
|
Click the Done button.
|
remove-todo
|
Clicking the Done button marks the to-do item as done, removing it from the list.
|
|
Double-click a to-do item.
|
start-editing-todo
|
Double-clicking a to-do item sets the to-do item in edit mode.
|
The event-to-command table shows how different browser interactions can request the same operation, while other interactions request different operations. section 5.1.1
A command has a name and, when needed, a payload: the data required to handle it. For `remove-todo`, the payload can be the index of the item to remove. A reducer takes the current state and that payload and returns a new state rather than mutating the original. section 5.1.2 section 5.1.3
To carry a command from user input to an updated view:
- Register a handler under its command name with `subscribe(commandName, handler)`. The returned function unregisters it when it is no longer needed. section 5.1.3
- In an event listener, call `dispatch(commandName, payload)`. The dispatcher passes the payload to each handler registered for that name; it warns if none is registered. section 5.1.3 section 5.2.4
- Let the handler update state, commonly by calling a reducer. An after-command handler can then trigger rendering so the view reflects the state. section 5.1.3 section 5.3
Removing a to-do
A Done button’s click listener can call `dispatcher.dispatch('remove-todo', todoIdx)`. A registered handler receives `todoIdx` and can set `state = removeTodo(state, todoIdx)`. The reducer `removeTodo(state, todoIndex)` returns `state.toSpliced(todoIndex, 1)`, leaving the original array unchanged. Components can instead receive an `emit` function that forwards the name and payload to the dispatcher. section 5.2.4 section 5.1.3 section 5.1.2
