Separate `action` to concise SwiftUI View

Takahiro Suzuki — Mon, 23 Jan 2023 15:01:41 +0000

When I implement apps with SwiftUI, the View code gets bigger. Especially, UI definitions and model logic are mixed so the view code gets harder to read. I tried to move model logic to other classes. Then the view code got simpler.

Before

I created an app to examine. In this app, the app receives a text from the user and checks whether its counts within 140. If the count is over 140, the post button is disabled.

Here is the code.

import SwiftUI

struct ContentView: View {
    @State private var content = ""
    @State private var canPost = false

    private let session = MySession()

    var body: some View {
        TextField(
            "Content", text: $content
        )
        .onChange(of: content) { newValue in
            canPost = (1...140).contains(newValue.count)
        }

        Button("Post") {
            Task {
                await session.upload(content)
            }
        }
        .disabled(!canPost)
    }
}

When I implement this code, there are some codes to improve.

View has a model property
- In some cases, the view might have properties such as ViewModel or Interactor.
Validation logic is in the View definition
- Because SwiftUI is a declarative UI framework, it is natural but may cause complex code.

If the view code is big, it is hard to tell apart view definitions and logic.

After

I tried to move logic to other classes. For example, the codes of the action argument in Button and the perform argument in the .onChange modifier.

action in Button(action: @escaping () -> Void, label: () -> Label)
perform in .onChange<V>(of value: V, perform action: @escaping (V) -> Void)

Here is the code.

import SwiftUI

struct ContentView: View {
    @State private var content = ""
    @State private var canPost = false

    var body: some View {
        TextField(
            "Content", text: $content
        )
        .onChange(
            of: content,
            perform: ContentValidator($canPost).validate(_:)
        )

        Button(
            "Post", action: PostAction($content).action
        )
        .disabled(!canPost)
    }
}

struct ContentValidator {
    @Binding private var canPost: Bool

    init(_ canPost: Binding<Bool>) { _canPost = canPost }

    func validate(_ newValue: String) {
        canPost = (1...140).contains(newValue.count)
    }
}

struct PostAction {
    @Binding private var content: String

    // better to DI
    private let session = MySession()

    init(_ content: Binding<String>) { _content = content }

    func action() {
        Task {
            await session.upload(content)
        }
    }
}

Although I need to code import SwiftUI for all classes, the view code gets small. ~~In addition, the codes of action have testability.~~

Conclusion

I tried to move the action logic in the view to other classes. Although I don't know the best practice for implementing the SwiftUI app, this way is easy to improve my code.
The amount of code increased, but I got some profits by using this method.

Readable view code
- No action codes
- No model property
~~Testable action~~
- ~~Action class has testability~~

If you too are having trouble with complex View code, please try this method.

Implement AppStorage for Dictionary by using Property Wrappers

Takahiro Suzuki — Thu, 29 Dec 2022 14:14:39 +0000

In SwiftUI, we can access to the UserDefaults by using AppStorage. However, it is restricted for available types. Especially, Dictionary type is not supported. In this post, I introduce how to implement the property wrapper for storing Dictionary type values like AppStorage.

Implementation

First, I'll show whole of implementation.
Since this is a "it just happened to work" implementation, I cannot guarantee that it will be optimal in your environment as well.

import SwiftUI

@propertyWrapper
struct DictionaryDefaults: DynamicProperty {
    private let key: String
    private let userDefaults: UserDefaults

    @State private var dictionary: [String: Any] {
        didSet {
            userDefaults.set(dictionary, forKey: key)
        }
    }

    var wrappedValue: [String: Any] {
        get {
            dictionary
        }

        nonmutating set {
            dictionary = newValue
        }
    }

    var projectedValue: Binding<[String: Any]> {
        Binding {
            wrappedValue
        } set: { newValue in
            wrappedValue = newValue
        }
    }

    init(wrappedValue defaultValue: [String: Any], key: String, suiteName: String? = nil) {
        self.key = key

        userDefaults = UserDefaults(suiteName: suiteName)!

        let dict = userDefaults.dictionary(forKey: key)
        if let dict {
            dictionary = dict
        } else {
            userDefaults.set(defaultValue, forKey: key)
            dictionary = defaultValue
        }
    }
}

How to use

For example, I implemented codes below.

struct FirstView: View {
    // DictionaryDefaults, introduced in this post
    @DictionaryDefaults(key: "my_dict")
    private var myDictionary = [String: Any]()

    // Second screen flag
    @State private var isPresentSecondView = false

    // convert Dictionary to Array for display...
    private var keys: [String] {
        get {
            myDictionary.keys.map { $0 }
        }
    }

    var body: some View {
        NavigationStack {
            List {
                ForEach(keys, id: \.self) { key in
                    Text(myDictionary[key] as! String)
                }
            }
            .toolbar {
                // All clear button
                Button {
                    myDictionary.removeAll()
                } label: {
                    Text("Clear")
                }
                // Add Button
                Button {
                    myDictionary.updateValue(
                        "FirstView", 
                        forKey: UUID().uuidString
                    )
                } label: {
                    Text("Add")
                }
                // Show SecondView Button
                Button {
                    isPresentSecondView.toggle()
                } label: {
                    Text("Show SecondView")
                }
            }
            .sheet(isPresented: $isPresentSecondView) {
                // pass the Binding of myDictionary to SecondView
                SecondView(dict: $myDictionary)
            }
        }
    }
}

struct SecondView: View {
    // Bind the Dictionary
    @Binding var dict: [String: Any]

    var body: some View {
        // Add Button
        Button {
            dict.updateValue(
                "SecondView",
                forKey: UUID().uuidString
            )
        } label: {
            Text("Add")
        }
        // All clear Button
        Button {
            dict.removeAll()
        } label: {
            Text("Clear")
        }
    }
}

Screen Capture

Although ordering is shuffled because the value is the type of Dictionary, as you can see, State and Binding works fine, saving UserDefaults also works.

Now we can use Dictionary type of UserDefaults more easily in SwiftUI!

References

This post was translated from Original Post (Japanese)

Forem: Takahiro Suzuki