Shared State with Presented Children in NavigationStackStore

[wyeth-shamp]

Hi new To TCA and so far it is a lot of fun. I do have one question I have not been able to figure out myself. If I have a parent that has an effect running like a timer that is mutating its own state, how would I propagate those changes to the child? For example I would want to display the running timer in the child and it should be synced with the parent. In the following code I am able to start the timer and show it and push a child on to the stack but the child's time is not updating. There used to be a parameter on path called presented where you could access the presented child state. but that has been removed. So how are we supposed to do something like this now? I am sure I am just missing the proper way as if this were not in a stack the state would be scoped and updated but now the parent view is not redrawn when it is not visible so the child value is not updated. Any help would be appreciated.

import SwiftUI
import ComposableArchitecture

struct ChildFeature: Reducer {

    struct State: Equatable, Hashable {
        var clockTime: TimeInterval = 0
    }
    enum Action {}
    var body: some Reducer<State, Action> {
        Reduce { _, _ in
            return .none
        }
    }
}

struct ParentFeature: Reducer {
    @Dependency(\.continuousClock) var clock
    private enum CancelID { case timer }
    struct State: Equatable {
        var clockTime: TimeInterval = 0
        var path = StackState<ChildFeature.State>()
        var isTimerActive: Bool = false
    }
    enum Action {
        case path(StackAction<ChildFeature.State, ChildFeature.Action>)
        case timerTicked
        case startButtonTapped
    }
    var body: some Reducer<State, Action> {
        Reduce { state, action in
            switch action {
            case .startButtonTapped:
                state.isTimerActive.toggle()
                return .run { [isTimerActive = state.isTimerActive] send in
                    guard isTimerActive else { return }
                    for await _ in self.clock.timer(interval: .seconds(0.01)) {
                        await send(.timerTicked)
                    }
                }
                .cancellable(id: CancelID.timer, cancelInFlight: true)
            case .timerTicked:
                state.clockTime += 0.01
                //state.path.presented?.clockTime += 0.01
                return .none
            case .path:
                return .none
            }
        }
        .forEach(\.path, action: /Action.path) {
            ChildFeature()
        }
    }
}


struct ParentView: View {
    let store: StoreOf<ParentFeature>
    init(store: StoreOf<ParentFeature>) {
        self.store = store
    }
    var body: some View {
        NavigationStackStore(self.store.scope(
            state: \.path,
            action: {.path($0)})) {
                WithViewStore(self.store, observe: {$0}) { viewStore in
                    VStack {
                        NavigationLink(state: ChildFeature.State(clockTime: viewStore.clockTime)) {
                            Text("Go To Child")
                        }
                        Button(viewStore.isTimerActive ? "Stop" : "Start",
                               action: {
                            viewStore.send(.startButtonTapped)
                        })
                        Text("Value: \(viewStore.clockTime)")
                    }
                }
            } destination: { store in
                ChildView(store: store)
            }
    }
}

struct ChildView: View {
    let store: StoreOf<ChildFeature>
    init(store: StoreOf<ChildFeature>) {
        self.store = store
    }
    var body: some View {
        WithViewStore(self.store, observe: {$0}) { viewStore in
            Text("value: \(viewStore.clockTime)")
        }
    }

}

struct TimerExampleView_Previews: PreviewProvider {
    static var previews: some View {
        ParentView(store: Store(initialState: ParentFeature.State(), reducer: ParentFeature()))
    }
}

[mbrandonw]

Hi @wyeth-shamp, there is maybe just more API surface area we need to add to StackState. I remember when we had presented and not sure why we removed it.

With the API as it is right now you would need to get the ID of the last child and then use that to subscript in:

state.path[id: state.path.ids.last!] = …

That's pretty annoying, and really more work should be done to avoid the unwrap.

Stephen and I will discuss this use case more and see if there is something we should be doing, or perhaps another way of thinking about the problem.

[wshamp]

Yes this seems to work for updating the direct child but say I wanted to have this timer running and show it to any child in the app. that could get pretty ugly. I suppose I should to use a dependency for that as that would clean it up and I have seen you suggest that option in other threads, however I would still like the ergonomics of using a Reducer for the timer since it would have actions and state. (i.e. start stop reset). Is there a way to use a reducer as a dependency and only add it to specific features> If there is a video on this that or example or case study I missed please point me in that direction. Thanks Again. Love the framework!

[mbrandonw]

When it comes to shared state like that we just suggest that it be modeled as a dependency. The dependency would hold onto the clockTime state and any feature that wants access would subscribe to an async stream / publisher of those events. And then the root or any child can start/stop the timer.