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.
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, nested inside of the results state. The array that's passed to setIn() is a path to follow as the map is traversed. The value is updated to reflect the value of the search input box.
Realizing that all we're doing here is changing the state of the application is important. We're not actually running the filter—this is part of...