We have our initial application state, and we have our app() function that's used to produce new state. Now we have to figure out the various ways in which our application state mutates in response to user interactions.
Events and state updaters
Updating the search query
As the user types, we want to render only episodes that match the search text. To do this, we have to use our app() function to update the state. Here's what this looks like:
document
.querySelector('header input[type="search"]')
.addEventListener('input', e => app(state => state.setIn(
['results', 'query'],
e.target.value
)));
The setIn() function is used here to set the query state...