Optional state change doesn't update View

[Paul-Svetlichny]

Hi there. I have a feeling that I'm doing something stupidly wrong, but still here is the question. I have a code for showing optional state based on the example in case studies GettingStarted-OptionalState. The code is this (cut out the rest to have a clear example):

    @ObservableState
    struct State {
        var overview: Overview.State?
        var report: Report
    }
    enum Action {
        case onAppear
        case overview(Overview.Action)
        case updateReport(Report)
    }
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case let .updateReport(report):
                if report.isAvailable {
                    let _ = print("=== Initialize state")
                    state.overview = Overview.State()
                    let _ = print("=== state: \(state.overview)")
                }
                return .none
            case .overview:
                return .none
            case .onAppear:
            // Do some work
                return .run { send in
                    do {
                        let report = try await getReport()
                        await send(.updateReport(report))
                    } catch {
                        await send(.updateReportError(error))
                    }
                }
        }
        .ifLet(\.overview, action: \.overview) {
            Overview()
        }
    }

View:

    let store: StoreOf<Reports>
    var body: some View {
        WithPerceptionTracking {
            let _ = print("=== Update view with scope: \(store.scope(state: \.overview, action: \.overview)), \n=== state: \(store.overview)")
            if let store = store.scope(state: \.overview, action: \.overview) {
                OverviewView(store: store)
            } else {
                Text("UNDER CONSTRUCTION")
            }
    }

Logs:

=== Update view with scope: nil, 
=== state: nil
=== Initialize state
=== state: Optional(Overview.State(... state properties ...))
=== Update view with scope: nil, 
=== state: nil

Initially the view was working fine with non-optional state and now we've added a possibility to show something else when the report is not available. The problem is that when I get the report and I see it is available in debug mode, the view is not being updated, always showing UNDER CONSTRUCTION text. But if I go to the next level of navigation and go back, then the view is updated and I can see the proper view.
What am I missing here? How to force-update the view, or how to implement optional state properly if it is not now?

[mbrandonw]

Hi @Paul-Svetlichny, can you please provide a fully compiling example that demonstrates the problem? It is difficult to diagnose this problem with just a few code snippets.

[Paul-Svetlichny]

Unfortunately, I can't create a separate project and isolate the issue, but I've managed it to work in the following way. Again, not sure if I did it properly. Basically, I've added a separate action call to update the optional views first, and then update the state:

    enum Action {
        case onAppear
        case overview(Overview.Action)
        case updateReport(Report)        
        case createOptionals(Report)       < -    Added this
    }
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case let .createAgingOptionals(report):       < -    This
                if report.isAvailable {
                    state.overview = Overview.State()
                }
                return .none
    ....
                case .onAppear:
            // Do some work
                return .run { send in
                    do {
                        let report = try await getReport()
                        await send(.createOptionals(report))      < -    And this
                        await send(.updateReport(report))
                    } catch {
                        await send(.updateReportError(error))
                    }
                }

And now it works as expected, but I don't understand why.

[mbrandonw]

Hi @Paul-Svetlichny, it's hard to say without a project to look at, but certainly what you have done above should not be necessary. Views should automatically update when state changes, regardless of using optional state or not.

A sample project would be very helpful.

[Paul-Svetlichny]

@mbrandonw Okay, I was able to reproduce the issue in a simple test project. Please take a look at the file attached.
TCATestProject.zip

[mbrandonw]

Hi @Paul-Svetlichny, I believe that problem is your use of withAnimation in the reducer. Unfortunately that does not work with @ObservableState, and in fact it does not even work with vanilla SwiftUI and @Observable. We filed a feedback about this during the beta period of iOS 17 and never heard back.

If you remove those does it work as you expect? And if you do need to perform animation in those actions you can instead send the actions with animation:

await send(.loadReport, animation: .easeIn(duration: 2))
await send(.updateReport, animation: .easeIn(duration: 2))

…or you can use the .animation(_:value:) modifier in the view.

And while I don't think it's the cause of any problems in this particular demo, there is something you are doing in the view that is problematic:

ReportView(store: Store(initialState: Report.State()) { Report() })

You typically should not be constructing stores in views, just as you should not construct observable models in views. If the ContentView ever re-computes its body the previous store will be discarded and a whole new store will be put into its place with state reset.

[Paul-Svetlichny]

Wow! Thanks, @mbrandonw, this was an unexpected turn, but it seems to be working in the demo at least. I will need to check if it works in the real world scenario, but hopefully it will.
To your second points, how should I instantiate those if not in a view? What is the proper way of doing this?

[mbrandonw]

Hi @Paul-Svetlichny, typically you just create one store at the root of the application, which could be held as a static let inside the entry point App, or as a let in the AppDelegate.

[Paul-Svetlichny]

Oh, I see. Sorry for inconvenience, this one was created like this just for testing purposes. In real app we have it as a store created during the feature initialization (outside of the view).

The solution seems to be working in real app too. Thank you!