Patterns for Shared State with Destination reducer/enum?

[matt-dewitt]

Are there any patterns or established best practices for handling shared state with child features presented through a destination reducer? I've got a pretty big app the makes use of a lot of shared state and we are starting on the path to update to the newer PresentationState/Action for navigating to destinations and I'm trying to figure out the best way to handle this with the new paradigm.

I've got a demo app attached where there's a parent feature that starts a timer and the hope is that when I present a child sheet, it continues to get updated as the timer ticks. This is a pretty basic example, but imagine features where there are multiple destinations and multiple pieces of shared state. What is the best practice for keeping these things in sync, especially when a feature that is presenting a child is itself a child and receiving shared state from further up? Thanks in advance!

import ComposableArchitecture
import SwiftUI

@Reducer
struct DestinationWithSharedState {
  struct State: Equatable {
    @PresentationState
    public var destination: Destinations.State?
    public var count: Int = 0
  }
  
  enum Action {
    case destination(PresentationAction<Destinations.Action>)
    case sheetButtonTapped
    case startTimerButtonTapped
    case stopTimerButtonTapped
    case timerTicked
  }
  
  public var body: some Reducer<State, Action> {
    Reduce(core)
      .ifLet(\.$destination, action: /Action.destination) {
        Destinations()
      }
  }
  
  struct TimerId: Hashable {}
  
  @Dependency(\.continuousClock)
  public var continuousClock
  
  private func core(into state: inout State, action: Action) -> Effect<Action> {
    switch action {
    case .sheetButtonTapped:
      state.destination = .count(.init(
        message: "This is a sheet presentation",
        count: state.count
      ))
      return .none
      
    case .startTimerButtonTapped:
      return .run { send in
        for await _ in self.continuousClock.timer(interval: .seconds(1)) {
          await send(.timerTicked)
        }
      }
      .cancellable(id: TimerId(), cancelInFlight: true)
      
    case .stopTimerButtonTapped:
      return .cancel(id: TimerId())
      
    case .timerTicked:
      state.count += 1
      return .none
      
    case .destination:
      return .none
    }
  }
}

extension DestinationWithSharedState {
  @Reducer
  public struct Destinations {
    public enum State: Equatable {
      case count(CountFeature.State)
    }
    
    public enum Action: Equatable {
      case count(CountFeature.Action)
    }
    
    public var body: some ReducerOf<Self> {
      Scope(state: /State.count, action: /Action.count) {
        CountFeature()
      }
    }
  }
}

public struct DestinationWithSharedStateView: View {
  let store: StoreOf<DestinationWithSharedState>
  
  public var body: some View {
    NavigationStack {
      List {
        Section {
          Button("Show Sheet") {
            store.send(.sheetButtonTapped)
          }
        }
        Section {
          WithViewStore(store, observe: \.count) { viewStore in
            Text(viewStore.state as NSNumber, formatter: NumberFormatter())
          }
          Button("Start Timer") {
            store.send(.startTimerButtonTapped)
          }
          Button("Stop Timer") {
            store.send(.stopTimerButtonTapped)
          }
        }
      }
      .navigationTitle("DestinationWithSharedState")
      .sheet(store: store.scope(
        state: \.$destination.count,
        action: \.destination.count
      )) { store in
        CountFeatureView(store: store)
      }
    }
  }
}

public struct CountFeature: Reducer {
  public struct State: Equatable {
    public var message: String
    public var count: Int
    
    public init(
      message: String = "",
      count: Int = 0
    ) {
      self.message = message
      self.count = count
    }
  }
  
  public enum Action: Equatable {
    case dismissButtonTapped
  }
  
  @Dependency(\.dismiss)
  public var dismiss
  
  public var body: some Reducer<State, Action> {
    Reduce(core)
  }
  
  private func core(into state: inout State, action: Action) -> Effect<Action> {
    switch action {
    case .dismissButtonTapped:
      return .run { _ in
        await self.dismiss(animation: .default)
      }
    }
  }
}

public struct CountFeatureView: View {
  let store: StoreOf<CountFeature>
  
  public var body: some View {
    WithViewStore(self.store, observe: { $0 }) { viewStore in
      VStack {
        Text(viewStore.state.message)
        
        Text(viewStore.state.count as NSNumber, formatter: NumberFormatter())
        
        Button(action: {
          viewStore.send(.dismissButtonTapped)
        }) {
          Text("Dismiss")
        }
      }
      .navigationTitle("Count")
    }
  }
}

For shared state, we currently use this pattern:

struct Parent.State {
  private var _child: Child.State?
}

extension Parent.State {
  public var child: Child.State? {
    get {
      var state = _child
      state.property = self.property
      return state
    }
    set {
      _child = newValue
      if let newValue {
        self.property = newValue.property
      }
    }
}

And with existing pullbacks and scoping this works fine with sheets and destinations, but I'm not seeing a way to make this play nicely with the new navigation APIs and the Destinations reducer.

[fonkadelic]

I've recently faced a similar issue and came up with the following:

import ComposableArchitecture
import SwiftUI 

struct RecursiveSharedState: Reducer {
  struct State: Equatable {
    var count: Int {
      didSet { self.bind() }
    }
    var child: Child.State?

    init(count: Int = 0, child: Child.State? = nil) {
      defer { self.bind() }
      self.count = count
      self.child = child
    }

    private mutating func bind() {
      let count = self.count
      self.child?.count = count
    }
  }

  enum Action: Equatable {
    case child(Child.Action)
    case startButtonTapped
    case updateButtonTapped
  }

  var body: some ReducerOf<Self> {
    Reduce { state, action in
      switch action {
      case .startButtonTapped:
        state.child = Child.State(count: state.count)
        return .none

      case .updateButtonTapped:
        state.count = Int.random(in: 0..<10_000)
        return .none

      case .child:
        return .none
      }
    }
    .ifLet(\.child, action: /Action.child) {
      Child()
    }
    .onChange(of: \.child?.count) { _, count in
      if let count {
        Reduce { state, _ in
          state.count = count
          return .none
        }
      }
    }
  }
}

struct Child: Reducer {
  struct State: Equatable {
    var count: Int {
      didSet { self.bind() }
    }
    @PresentationState var route: Route.State?

    init(count: Int, route: Route.State? = nil) {
      self.count = count
      self.route = route
    }

    private mutating func bind() {
      try? (/Route.State.child).modify(&self.route) { [count] in
        $0.count = count
      }
    }
  }

  enum Action: Equatable {
    case nextButtonTapped
    case route(PresentationAction<Route.Action>)
    case updateButtonTapped
  }

  struct Route: Reducer {
    enum State: Equatable {
      case child(Child.State)
    }

    indirect enum Action: Equatable {
      case child(Child.Action)
    }

    var body: some ReducerOf<Self> {
      Scope(state: /State.child, action: /Action.child) {
        Child()
      }
    }
  }

  var body: some ReducerOf<Self> {
    Reduce { state, action in
      switch action {
      case .nextButtonTapped:
        state.route = .child(Child.State(count: state.count))
        return .none

      case .updateButtonTapped:
        state.count = Int.random(in: 0..<10_000)
        return .none

      case .route:
        return .none
      }
    }
    .ifLet(\.$route, action: /Action.route) {
      Route()
    }
    .onChange(of: { (/Route.State.child).extract(from: $0.route)?.count }) { _, count in
      if let count {
        Reduce { state, _ in
          state.count = count
          return .none
        }
      }
    }
  }
}

struct RecursiveSharedStateView: View {
  let store: StoreOf<RecursiveSharedState>

  var body: some View {
    NavigationStack {
      IfLetStore(self.store.scope(state: \.child, action: { .child($0) })) { store in
        ChildView(store: store)
      } else: {
        Button("Start") { store.send(.startButtonTapped) }
      }
    }
    .overlay(alignment: .bottom) {
      WithViewStore(self.store, observe: { $0 }) { viewStore in
        VStack {
          Text("Root Count")
          Text("\(viewStore.count)")
          Button("Update") { viewStore.send(.updateButtonTapped) }
        }
        .padding()
        .background(Color.white)
        .transition(.opacity.animation(.default))
        .clipped()
        .shadow(color: .black.opacity(0.2), radius: 5, y: 5)
      }
    }
  }
}

struct ChildView: View {
  let store: StoreOf<Child>

  var body: some View {
    WithViewStore(self.store, observe: { $0 }) { viewStore in
      VStack {
        Text("Child Count")
        Text("\(viewStore.count)")
        Button("Next") { viewStore.send(.nextButtonTapped) }
        Button("Update") { viewStore.send(.updateButtonTapped) }
      }
    }
    .navigationDestination(
      store: self.store.scope(state: \.$route, action: { .route($0) }),
      state: /Child.Route.State.child,
      action: Child.Route.Action.child
    ) { store in
      ChildView(store: store)
    }
  }
}

#Preview {
  RecursiveSharedStateView(
    store: Store(initialState: RecursiveSharedState.State()) {
      RecursiveSharedState()
        ._printChanges()
    }
  )
}

This is pretty much an extended version of the shared state case study with navigation in mind.

Dealing with shared state this way, one is probably well prepared with whats coming in the future.