From the Idea to the App — Episode 3
In episode 3 of our series we implement our first real screen. We created in episode 2 the search request. And today we will call it using UI and display the results in a list.
In Composable Architecture, each screen has its own store that contains the state, the actions and a reducer. The reducer is responsible for modifying the current state based on the given action and thus creating a new state.
State
Our state includes the search term entered by the user of our app and the actual movies we get back from our using API.
Action
We currently have three actions:
1. displaying the movies
2. an action when the content of the search field changes
3. the actual search
Environment
As you can see, the environment already has two entries: “mainQueue” and “search”.
Search is a closure that allows us to inject the search logic from the outside. This is important to make it easier to test the code later.
Reducer
However, the actual work is done by the reducer. It knows the current state and accepts the executed actions.
In the code you can see how, by means of a switch statement, the executed action is determined and then either another action is executed or the state is simply changed if no further action is necessary.
UI
Last but not least, let’s take a look at the UI.
Our movie list consists of a simple search bar (basically a text field with an image in a HStack) at the top with a list below that displays the search results.
The complete project can be found on Github.
You can find all episodes of this series on our Youtube channel in the following playlist
