We'll start refactoring our application by thinking about the initial state of it. This will help us figure out how to break the whole state down into parts that can be mutated individually. We'll also add a new feature to this version of the app that allows the user to add new episodes. Here's what this part of the UI looks like:
Another new feature that we'll add to this version of the app is displaying the number of results beside the header:
As the filter controls change, and as new episodes are added, this number will change. Apart from these two changes, the functionality stays the same.
The first piece of state that we'll look at is the episode search results. This is the focal point of the application, so this is where we'll see the most action. For example, it would make sense to store the list of all episodes here. Also, we'll want to keep track of the states of the various filter controls here:
const app = App(
Map.of(
'results', Map.of...