Mastering Immutable.js

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, 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 the side-effect ...