View does not update when migrate to observation

[Jimmy-Prime]

Hi, I find view is not updating when trying to migrate features that have this shape.
An ItemFeature that operates on Item and an DetailFeature that operates on Item.Detail

DetailFeature works fine standalone, but when it's embedded in ItemFeature, view is not updating. If I roll both features back before observation, everything works fine

I am on revision 67e9c64f5e62db4d66b359eeb66e0f3d6c564b89

import ComposableArchitecture
import SwiftUI

// a vanilla SwiftUI view that uses binding of optional

struct OptionalFieldView: View {
    @Binding var field: Int?

    var body: some View {
        Button {
            if field == nil {
                field = 0
            } else {
                field = nil
            }
        } label: {
            Image(systemName: field == nil ? "circle" : "checkmark.circle.fill")
        }
    }
}

// models

struct ItemDetail: Equatable {
    var field: Int?
}

struct Item: Equatable {
    // some additional properties
    // ...

    // properties
    var detail: ItemDetail
}

// a feature that operates on Item.Detail

@Reducer
struct DetailFeature {
    @ObservableState
    struct State: Equatable {
        var detail: ItemDetail
    }

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

    var body: some ReducerOf<Self> {
        BindingReducer()
    }
}

struct DetailView: View {
    @State var store: StoreOf<DetailFeature>

    var body: some View {
        OptionalFieldView(field: $store.detail.field)
    }
}

// a feature that operates on Item, and integrates DetailFeature

@Reducer
struct ItemFeature {
    @ObservableState
    struct State: Equatable {
        var item: Item

        var toggle: DetailFeature.State {
            get {
                .init(detail: item.detail)
            }
            set {
                item.detail = newValue.detail
            }
        }
    }

    enum Action {
        case toggle(DetailFeature.Action)
    }

    var body: some ReducerOf<Self> {
        Scope(state: \.toggle, action: \.toggle) {
            DetailFeature()
        }
    }
}

struct ItemView: View {
    @State var store: StoreOf<ItemFeature>

    var body: some View {
        DetailView(store: store.scope(state: \.toggle, action: \.toggle))
    }
}

#Preview {
    ItemView(store: StoreOf<ItemFeature>(initialState: ItemFeature.State(item: Item(detail: ItemDetail(field: nil)))) {
        ItemFeature()
    })

//    DetailView(store: StoreOf<DetailFeature>(initialState: DetailFeature.State(detail: ItemDetail(field: nil))) {
//        DetailFeature()
//    })
}

[mbrandonw]

Hi @Jimmy-Prime, this does not work because you are creating and discarding all new DetailFeature.State's in this computed property:

var toggle: DetailFeature.State {
  get {
    .init(detail: item.detail)
  }
  set {
    item.detail = newValue.detail
  }
}

That means the observation registrar in that state is getting reset every time, and hence observation is not working.

But we do not recommend structuring features like this in general. It is far better to keep things simple and hold onto child state directly in parent state:

@ObservableState
struct State: Equatable {
  var toggle: DetailFeature.State

  init(item: Item) {
    self.toggle = DetailFeature.State(detail: item.detail)
  }
}

That works just fine with observation.

[Jimmy-Prime]

Hi @mbrandonw, but this isn't what I want. With this change, item: Item and toggle: DetailFeature.State becomes separated pieces, changes in DetailFeature is not played back to item. Should I add extra logic in ItemFeature reducer and listen to DetailFeature action and update?

[mbrandonw]

Hi @Jimmy-Prime, sorry that's not what you want, but unfortunately that computed property just does not work with Swift's observation tools. The same would happen in vanilla SwiftUI. It is necessary for the same state that gets access in the view to be the state that is later mutated, but you are creating and discarding state every time the property is accessed.

If this is shared state, then you could consider moving it to a dependency, or you could even hold it in an observable class in your feature state. That's a little more experimental, but because classes can now be properly observed it is more possible to hold reference types in state.