Adaptation of ViewStore Binding in SwiftUI 1.7 Migration

[topkim993]

I've reviewed the documentation

I've been using the following code snippet, but it seems that viewStore.binding has been removed with the update to SwiftUI 1.7. How can I replace it?

Additionally, considering the necessity to keep child views pure SwiftUI (eg. XXSection, XXCheckBox)

state {
    public var items: IdentifiedArrayOf<Item>
}

view body {
...
    XXSection(
        ...
        data: viewStore.items
    ) { item in
        XXCheckBox(
            text: item.text,
            isSelected: viewStore.binding(
                get: { _ in viewStore.items[id: item.id]?.isSelected ?? false },
                send: .toggleItemSelection(item.id)
            )
        )
    }
...
}

[Matejkob]

Have you migrated to @ObservableState?

[topkim993]

Yes!

[Matejkob]

And do you still use viewStore or have you migrated to using just store?

[topkim993]

I'm in the process of migrating to only use the store, but I'm stuck because there's no suitable alternative for my case!

[topkim993]

viewStore.binding(
get: { _ in viewStore.items[id: item.id]?.isSelected ?? false },
send: .toggleItemSelection(item.id)
)

[stephencelis]

Looks like that information is missing from the guide. Opened #3087 to address, but here's an example:

Note that if you want test coverage on the logic in custom bindings, you can refactor this logic into the reducer.

[topkim993]

Thank you for your help.

There are a few issues:

issue 1

When using subscript's get without state in the 'subscript' section, Cannot find 'featureFlags' in scope error occurs.

extension StoreOf<Feature> {
    subscript(hasFeatureFlag flag: Flag) -> Bool {
        ❌ get { featureFlags.contains(flag) } //  ✅ get { state.featureFlags.contains(flag) }
        set {
            send(.flagToggled(flag, isOn: newValue))
        }
    }
}

issue 2

After creating a StoreOf extension, there's an issue with circular reference expanding extension macros in the @Reducer macro.

I checked apple/swift#66450 and resolved it by separating the files.

I'm working with Xcode 15.2.

[Alex1478]

Hey there!
I'm having some trouble getting the Binding to work when using @ViewAction and the ViewState pattern when using @ObservableState. I cannot find a way to leverage both the Binding functionality and the @ViewAction together.

I created a quick example:

// MARK: - Feature

@Reducer
struct Feature {
    @ObservableState
    struct State {
        var isToggleOn: Bool = false
    }

    enum Action: ViewAction {
        case view(View)

        // MARK: Internal

        enum View {
            case didAppear
            case didToggle(Bool)
        }
    }

    var body: some Reducer<State, Action> {
        Reduce { state, action in
            switch action {
            case .view(.didAppear):
                return .none
            case let .view(.didToggle(isOn)):
                state.isToggleOn = isOn
                return .none
            }
        }
    }
}

// MARK: - FeatureViewState

struct FeatureViewState {
    // MARK: Lifecycle

    init(state: Feature.State) {
        toggleTitleText = state.isToggleOn ? "Switch is on" : "Switch is off"
        isToggleOn = state.isToggleOn
    }

    // MARK: Internal

    let isToggleOn: Bool
    let toggleTitleText: String
}

// MARK: - FeatureView

@ViewAction(for: Feature.self)
struct FeatureView: View {
    @Bindable var store: StoreOf<Feature>

    var body: some View {
        let viewState = FeatureViewState(state: store.state)
        List {
            // ❌ doesn't compile... cannot use .didToggle directly from the view actions
            Toggle(
                isOn: $store.isToggleOn.sending(\.didToggle),
                label: {
                    Text(viewState.toggleTitleText)
                }
            )
        }
        .task {
            // I can directly access to the ViewAction here without issue
            await send(.didAppear).finish()
        }
    }
}

Does anyone know if I'm doing something wrong?

Finally, I wonder if there is a way to use ViewState pattern instead of going through the store directly.
Here is another example:

let viewState = FeatureViewState(state: store.state)
List {
     // ❌ doesn't work, but looking for something similar
    Toggle(
        isOn: $store.binding(
            get: { viewState.isToggleOn },
            set: { status in send(.didToggle(status)) }
        ),
        label: {
            Text(viewState.toggleTitleText)
        }
    )
}

In the meantime, I think I could use the proposed StoreOf<Feature> extension solution, but it's not my favorite approach (in comparison to the deprecated ViewStore way of doing things)!

extension StoreOf<Feature> {
    var isToggleOn: Bool {
        get {
            let viewState = FeatureViewState(state: state)
            return viewState.isToggleOn
        }
        set {
            send(.view(.didToggle(newValue)))
        }
    }
}

Thank you in advance :)

[Alex1478]

Ok, I ended up finding an approach that I like; although, this is not using the full set of ergonomics (e.g. keypaths).
Let me know if you have any other recommendations!

let viewState = FeatureViewState(state: store.state)
List {
    // ✅ ok this works the way I want! yay
    Toggle(
        isOn: .init(
            get: { viewState.isToggleOn },
            set: { status in send(.didToggle(status)) }
        ),
        label: {
            Text(viewState.toggleTitleText)
        }
    )
}