Redux-like state container in SwiftUI. Container Views.
Tags: swift, ios, mobile, programming
Published: 2023-03-12 12:38:53

Another subject from my previous posts 

- [Basics](https://dev.to/sergeyleschev/redux-like-state-container-in-swiftui-basics-single-source-of-truth-2lpc)
- [Reducer and Actions](https://dev.to/sergeyleschev/redux-like-state-container-in-swiftui-basics-reducer-and-actions-flg)
- [Unidirectional flow](https://dev.to/sergeyleschev/redux-like-state-container-in-swiftui-basics-unidirectional-flow-3f2p)
- [Side effects](https://dev.to/sergeyleschev/redux-like-state-container-in-swiftui-side-effects-3l23)
- [Usage](https://dev.to/sergeyleschev/redux-like-state-container-in-swiftui-usage-k1i)
- [State normalization](https://dev.to/sergeyleschev/redux-like-state-container-in-swiftui-state-normalization-108o)
- [State composition](https://dev.to/sergeyleschev/redux-like-state-container-in-swiftui-state-composition-57e5)
- [Reducer composition](https://dev.to/sergeyleschev/redux-like-state-container-in-swiftui-reducer-composition-3j0m)
- [Derived stores](https://dev.to/sergeyleschev/redux-like-state-container-in-swiftui-derived-stores-2d62)

which plays very nice in conjunction with a _Redux-like_ state `container`, and this is `Container Views`. **Container Views** help us to keep our SwiftUI views simple and responsible for only one job.

The main idea is dividing your views into two types: `Container Views` and `Rendering Views`. The Rendering View is responsible for drawing the content, and that’s all. So basically it should not store the state or handle any lifecycle event. It usually renders the data which you pass via the init method.

**Container View**, on another hand, is responsible for handling data-flow and lifecycle events by providing the functions/closures to a Rendering View. 

Let’s take a look at a simple example.

```swift
import SwiftUI

struct SearchContainerView: View {
    @EnvironmentObject var store: ReposStore
    @State private var query: String = "Swift"

    var body: some View {
        SearchView(query: $query, repos: store.repos, onCommit: fetch)
            .onAppear(perform: fetch)
    }

    private func fetch() {
        store.fetch(matching: query)
    }
}

struct SearchView: View {
    @Binding var query: String

    let repos: [Repo]
    let onCommit: () -> Void

    var body: some View {
        List {
            TextField("Type something", text: $query, onCommit: onCommit)
            ReposView(repos: repos)
        }
    }
}

struct ReposView: View {
    let repos: [Repo]

    var body: some View {
        ForEach(repos) { repo in
            HStack(alignment: .top) {
                VStack(alignment: .leading) {
                    Text(repo.name)
                        .font(.headline)
                    Text(repo.description ?? "")
                        .font(.subheadline)
                }
            }
        }
    }
}
```
You can see how we build a connection between _Container and Rendering views_. **Container View** provides the data to **Rendering Views**. By doing this, we can easily reuse our _ReposView_ anywhere across the app. **ReposView** doesn’t have any dependency on some state or datastore and gets all the needed data via the init method.

---

**Contacts**
I have a clear focus on time-to-market and don't prioritize technical debt. And I took part in the Pre-Sale/RFX activity as a System Architect, assessment efforts for Mobile (iOS-Swift, Android-Kotlin), Frontend (React-TypeScript) and Backend (NodeJS-.NET-PHP-Kafka-SQL-NoSQL). And I also formed the work of Pre-Sale as a CTO from Opportunity to Proposal via knowledge transfer to Successful Delivery.

🛩️ #startups #management #cto #swift #typescript #database
📧 Email: sergey.leschev@gmail.com
👋 LinkedIn: https://linkedin.com/in/sergeyleschev/
👋 LeetCode: https://leetcode.com/sergeyleschev/
👋 Twitter: https://twitter.com/sergeyleschev
👋 Github: https://github.com/sergeyleschev
🌎 Website: https://sergeyleschev.github.io
🌎 Reddit: https://reddit.com/user/sergeyleschev
🌎 Quora: https://quora.com/sergey-leschev
🌎 Medium: https://medium.com/@sergeyleschev