How to differentiate and pin-point a deep-embedded reducer's @Dependency and override it?

[ylorn]

The Prerequisite

The dependency in use:

struct Validator {

    var validate: (String) -> Bool

    init(validate: @escaping (String) -> Bool) {
        self.validate = validate
    }

    static let `default` = Validator { !$0.isEmpty }
}

extension DependencyValues {

    var validatorClient: Validator {
        get { self[ValidatorKey.self] }
        set { self[ValidatorKey.self] = newValue }
    }

    private enum ValidatorKey: DependencyKey {
        static var liveValue: Validator = .default
    }
}

Basically, what it does is to validate a String value to see if it is valid. The default implementation is to check its emptiness.

The simple reusable component:

struct ReusableTextField: ReducerProtocol {

    enum Status: Equatable {
        case valid
        case invalid

        var iconName: String {
            switch self {
            case .valid: return "checkmark.circle"
            case .invalid: return "exclamationmark.triangle"
            }
        }
    }

    struct State: Equatable, Identifiable {
        var status: Status = .invalid
        @BindableState var content: String = ""
        let id: UUID = .init()
    }

    enum Action: BindableAction {
        case binding(BindingAction<State>)
    }

    @Dependency(\.validatorClient) var validatorClient

    var body: some ReducerProtocol<State, Action> {

        BindingReducer()

        Reduce { state, action in
            switch action {
            case .binding(\.$content):
                state.status = self.validatorClient.validate(state.content)
                ? .valid
                : .invalid
                return .none
            case .binding:
                return .none
            }
        }
    }
}

struct ReusableTextFieldView: View {
    let store: StoreOf<ReusableTextField>

    var body: some View {
        HStack {
            WithViewStore(self.store) { viewStore in
                TextField("", text: viewStore.binding(\.$content))
                Image(systemName: viewStore.status.iconName)
            }
        }
    }
}

It contains just a text filed and an indicator, and serves a simple function:

• If the text field's input is valid, show the check mark (✅)
  
• Otherwise, show the exclamation mark (❗️)
  

The complex reusable component that is composed of the simple ones from above:

struct ReusableDualTextFields: ReducerProtocol {

    struct State: Equatable, Identifiable {
        var field1: ReusableTextField.State = .init()
        var field2: ReusableTextField.State = .init()
        var id: String {
            // not safe
            self.field1.id.uuidString + self.field2.id.uuidString
        }
    }

    enum Action {
        case field1(ReusableTextField.Action)
        case field2(ReusableTextField.Action)
    }

    var body: some ReducerProtocol<State, Action> {

        Scope(
            state: \.field1,
            action: /Action.field1,
            ReusableTextField.init
        )

        Scope(
            state: \.field2,
            action: /Action.field2,
            ReusableTextField.init
        )

        Reduce { state, action in
            switch action {
            case .field1:
                return .none
            case .field2:
                return .none
            }
        }
    }
}

struct ReusableDualTextFieldsView: View {
    let store: StoreOf<ReusableDualTextFields>

    var body: some View {
        VStack {
            ReusableTextFieldView(
                store: self.store.scope(
                    state: \.field1,
                    action: ReusableDualTextFields.Action.field1
                )
            )

            Divider()

            ReusableTextFieldView(
                store: self.store.scope(
                    state: \.field2,
                    action: ReusableDualTextFields.Action.field2
                )
            )
        }
    }
}

It contains 2 ReusableTextField[View]s, and they are divided vertically.
As I understand it, to override the @Dependency(\.validatorClient) with different implementation for each ReusableTextField of State.field1 and State.field2, I can do something like:

struct ReusableDualTextFields: ReducerProtocol {

    struct State: Equatable, Identifiable { ... }

    enum Action  { ... }

    var body: some ReducerProtocol<State, Action> {

        Scope(
            state: \.field1,
            action: /Action.field1,
            ReusableTextField.init
        )
+        .dependency(
+            \.validatorClient,
+             .init { $0.count > 3 }
+        )

        Scope(
            state: \.field2,
            action: /Action.field2,
            ReusableTextField.init
        )
+        .dependency(
+            \.validatorClient,
+             .init { $0.count < 2 }
+        )

        Reduce { state, action in
            switch action {
            case .field1:
                return .none
            case .field2:
                return .none
            }
        }
    }
}

And with these overridings:

• The field1 becomes valid when its input's count is greater than 3, and the field2 becomes valid when its input's count is less than 2:
  
• The field1 becomes valid when its input's count is less than or equal to 3, and the field2 becomes valid when its input's count is greater than or equal to 2:
  

And these are expected and working correctly.

The Problem

However, since the ReusableDualTextFields is a reusable component, it should NOT be hardcoded with those .dependency overridings. So that if it is used by other feature, the validation logic is not restricted to > 3 and < 2. As result,
these hardcoded overridings have to be removed and restored to the original implementaion:

struct ReusableDualTextFields: ReducerProtocol {

    struct State: Equatable, Identifiable { ... }

    enum Action  { ... }

    var body: some ReducerProtocol<State, Action> {

        Scope(
            state: \.field1,
            action: /Action.field1,
            ReusableTextField.init
        )
-        .dependency(
-            \.validatorClient,
-             .init { $0.count > 3 }
-        )

        Scope(
            state: \.field2,
            action: /Action.field2,
            ReusableTextField.init
        )
-        .dependency(
-            \.validatorClient,
-             .init { $0.count < 2 }
-        )

        Reduce { ... }
    }
}

The Question

Now we have all the pieces, let me get to my questions.

This is a list of multiple ReusableDualTextFields:

struct TextFieldsList: ReducerProtocol {

    struct State: Equatable {
        var items: IdentifiedArrayOf<ReusableDualTextFields.State>
    }

    enum Action {
        case item(id: ReusableDualTextFields.State.ID, action: ReusableDualTextFields.Action)
    }

    var body: some ReducerProtocol<State, Action> {

        Reduce { state, action in
            switch action {
            case .item:
                return .none
            }
        }.forEach(
            \.items,
             action: /Action.item(id:action:),
             ReusableDualTextFields.init
        )
    }
}

struct TextFieldsListView: View {
    let store: StoreOf<TextFieldsList>

    var body: some View {
        ForEachStore(
            self.store.scope(
                state: \.items,
                action: TextFieldsList.Action.item(id:action:)
            )
        ) { dualTextFieldsStore in
            Section {
                ReusableDualTextFieldsView(store: dualTextFieldsStore)
            }
        }
    }
}

And the question is, within this collection of ReusableDualTextFields items, how can I overrides each item's field1's validation to be greater than 5, and each item's field2's validation to be less than 4?
Something like:

Initially, I thought I could do it in the .foreach modifier like:

struct TextFieldsList: ReducerProtocol {

    struct State: Equatable { ... }

    enum Action { ... }

    var body: some ReducerProtocol<State, Action> {

        Reduce { state, action in
            switch action {
            case .item:
                return .none
            }
        }
+        .forEach(
+            \.items,
+             action: /Action.item(id:action:)
+        ) {
+            ReusableDualTextFields()
+                .dependency(
+                    \.validatorClient,
+                     .init { $0.count > 5 }
+                )
+        }
    }
}

But this implementation overrides both field1 and field2's dependency at the same time.

So, what is the best way to differentiate and pin-point a deep-embedded reducer's dependency and override it?

Thanks in advance.

[Alex293]

Each of your fields could contain a list of validation tags then when you call your validator either use different keys to fetch the validator or make a validator which take the tags and the string to produce your validation. That’s could be like optional minLength email etc

[ylorn]

But that would mean the the func validate() functions know all the tags so it can provides the corresponding version of the implementation, right? I was looking for an approach to be able to plug in ad-hoc implementation.

[mbrandonw]

Hi @ylorn, we mention this briefly in our Reducer Protocol in Practice episode (~42:58), but it seems like reusable components don't necessarily need to leverage the @Dependency system. And sometimes probably shouldn't.

Instead, the ReusableDualTextFields should probably take its two validation dependencies explicitly, like in the old days of environment:

struct ReusableDualTextFields: ReducerProtocol {
  let validator1: Validator
  let validator2: Validator

  …
}

And then at the moment of creating ReusableDualTextFields you can specify which validator to use:

ReusableDualTextFields(
  validator1: { $0.count > 5 },
  validator2: { $0.count < 3 }
)

There's a chance that Validator doesn't even need to be put into the dependency system.

[ylorn]

@mbrandonw Thanks for replying.

But doesn't this parameterized approach brings us back to the old days of Environment? I was hoping this new approach brings a one-site solution for the top-down dependency distribution. 😜

[mbrandonw]

But I'm not sure you have a top-down dependency distribution problem here. 🙂

If I understand your original post it seems that ReusableDualTextFields needs to be customizable at the point of creation. You never actually want to use the globally available validator inside DependencyValues. So, why does it need to be global?

[mbrandonw]

If you watch the episode I linked to you will see that our leaderboards reusable component deals with a similar situation. When creating the leaderboard reducer you need to inject a dependency for loading the leaderboard results. That dependency can't be taken from the global store of dependencies because it must be customized at the moment of creating the reader.

We have a similar example in the "reusable favoriting" case study:

swift-composable-architecture/Examples/CaseStudies/SwiftUICaseStudies/04-HigherOrderReducers-ReusableFavoriting.swift

Lines 34 to 35 in 53ddc59

	struct Favoriting<ID: Hashable & Sendable>: ReducerProtocol {
	let favorite: @Sendable (ID, Bool) async throws -> Bool

Notice that this reducer does not use @Dependency. It forces whoever creates the reducer to supply an async function for performing the favoriting.

[ylorn]

it seems that ReusableDualTextFields needs to be customizable at the point of creation. You never actually want to use the globally available validator inside DependencyValues. So, why does it need to be global?

You got me!
I guess I am too excited with the new tools and couldn't help using it everywhere I feel it can be used, but forget about the purpose it is designed for and the result I am trying to target.

Thanks again!