How to best mix mutable parent state with local detail state.

[rosskimes]

I am building an app with TCA and I keep coming across a pattern and I’m not sure I am handling it in the best way.

The pattern is that I have a RootView with some state, and I want to display another view (lets call it DetailView) to edit a subset of the RootView state. DetailView will depend on some mutable state from RootView plus some local state that it can use when editing.

What I have been doing in this case is separating the mutable state from RootView from the (optional) DetailView.LocalState. The presentation of DetailView is dependent on the DetailView.LocalState.

I have used this pattern so much that I defined a generic struct that I could use as the DetailView’s state for its Store.

public struct DetailState<Root: Equatable, Detail: Equatable>: Equatable {
	public var root: Root
	public var detail: Detail`
}

This solution works, but there is a lot of overhead (enough that makes me think I am missing some easier way to handle it).

Here is a simple example of a RootView that passes a String to a DetailView, which can update that String based on the state of some local Bools.

struct RootViewState: Equatable {
	var text: String
	var detailViewLocalState: DetailViewLocalState?
	
	var detailViewState: DetailViewState? {
		get {
			detailViewLocalState.flatMap { localState in
				DetailViewState(root: text, detail: localState)
			}
		}
		
		set {
			if let root = newValue?.root {
				text = root
			}
			
			detailViewLocalState = newValue?.detail
		}
	}
}

enum RootViewAction {
	case setEditingState(Bool)
	case detailViewAction(DetailViewAction)
}

let rootReducer = Reducer<RootViewState, RootViewAction, Void>.combine(
	
	detailViewReducer.optional().pullback(
		state: \.detailViewState,
		action: /RootViewAction.detailViewAction,
		environment: { _ in }
	),
	
	Reducer<RootViewState, RootViewAction, Void> { state, action, _ in
		switch action {
			case let .setEditingState(isEditing):
				if isEditing, state.detailViewLocalState == nil {
					state.detailViewLocalState = DetailViewLocalState()
				} else if !isEditing {
					state.detailViewLocalState = nil
				}
				return .none
				
			case .detailViewAction:
				return .none
		}
	}
)


struct RootView: View {
	
	let store: Store<RootViewState, RootViewAction>
	
	var body: some View {
		WithViewStore(store) { viewStore in
			VStack {
				Text(viewStore.text)
			}
			
			Button {
				viewStore.send(.setEditingState(true))
			} label: {
				Text("Edit")
			}
			.sheet(isPresented:
					viewStore.binding(
						get: { $0.detailViewState != nil },
						send: { isActive in RootViewAction.setEditingState(isActive) }
					)
			) {
				IfLetStore(store.scope(state: \.detailViewState, action: RootViewAction.detailViewAction)) { store in
					DetailView(store: store)
				}
			}
		}
	}
}

typealias DetailViewState = DetailState<String, DetailViewLocalState>

struct DetailViewLocalState: Equatable {
	var doStuff: Bool = false
	var doOtherStuff: Bool = false
}

enum DetailViewAction {
	case save
	case binding(BindingAction<DetailViewState>)
}

let detailViewReducer = Reducer<DetailViewState, DetailViewAction, Void> { state, action, _ in
	
	switch action {
		case .binding:
			return .none
		case .save:
			state.root = "stuff = \(state.detail.doStuff), otherStuff = \(state.detail.doOtherStuff)"
			return .none
	}
}.binding(action: /DetailViewAction.binding)

struct DetailView: View {
	
	let store: Store<DetailViewState, DetailViewAction>
	
	var body: some View {
		
		WithViewStore(store) { viewStore in
			VStack {
				Toggle(isOn: viewStore.binding(keyPath: \.detail.doStuff, send: DetailViewAction.binding)) {
					Text("Stuff")
				}
				
				Toggle(isOn: viewStore.binding(keyPath: \.detail.doOtherStuff, send: DetailViewAction.binding)) {
					Text("Other Stuff")
				}
				
				Button {
					viewStore.send(.save)
				} label: {
					Text("Save")
				}
			}
		}
	}
}

Is there a more concise way of doing this that I am missing?

[boudavid]

Since the parent usually has knowledge of its children actions and state, you can handle the children actions from the parent reducer and update the parent state accordingly.

struct RootState: Equatable {
  var text = ""
  var detailState: DetailState?
}

enum RootAction: Equatable {
  case showDetail
  case hideDetail
  case detailAction(DetailAction)
}

let rootReducer = Reducer<RootState, RootAction, Void>.combine(
  detailReducer.optional().pullback(
    state: \.detailState,
    action: /RootAction.detailAction,
    environment: { _ in }
  ),
  Reducer<RootState, RootAction, Void> { state, action, _ in
    switch action {
    case .showDetail:
      state.detailState = .init()
      return .none
    case .hideDetail:
      state.detailState = nil
      return .none
    case .detailAction(.someChildAction):
      // Mutate the parent state or even the child state
      // state.text = "Hello"
      // state.detailState?.doStuff = true
      return .none
    }
  }
)

struct DetailState: Equatable {
  var doStuff = false
}

enum DetailAction: Equatable {
  case someChildAction
}

let detailReducer = Reducer<DetailState, DetailAction, Void> { state, action, _ in
  switch action {
    case .someChildAction:
      // Do nothing or mutate some local state
      // state.doStuff = true
      return .none
  }
}

I believe since the detailReducer comes first in the Reducer.combine, in the case of a someChildAction triggered, it will be first handled in the detailReducer and then in the rootReducer.

Hope that helps.

[rosskimes]

Thanks David!

This is the route that I started with. The main motivation to moving that logic from the rootReducer to the detailReducer was because I have a few detail views that can be used in different contexts, so I ended up having multiple parent reducers implementing the same logic. I liked the idea of trying to get that consolidated to just the detailReducer so that logic could be shared regardless who was presenting.

[maximkrouk]

I believe, that parent module should be responsible for showing and dismissing child ones
There are no examples, but here is the code I use for navigation ReactiveSwiftTCA & UIKit
https://gist.github.com/maximkrouk/bcbe8d08a7a57928d5fdf75176ebe97e

A little demo:

public enum ProfileEditingRoute: String, Equatable {
    case usernameEditing
    case bioEditing
}

public struct ProfileEditingState: Routable {
    public var usernameEditing: UsernameEditingState
    public var bioEditing: BioEditingState
    public var currentRoute: ProfileEditingRoute?
}

public enum ProfileEditingAction: Equatable {
    case router(RoutingAction<ProfileEditingRoute>)
    case usernameEditing(UsernameEditingAction)
    case bioEditing(BioEditingAction)
}

public extension ProfileEditingAction {
    static func route(to route: ProfileEditingRoute) -> Self { .router(.route(to: route)) }
}

private let _routingReducer = Reducer<
    ProfileEditingState,
    ProfileEditingAction,
    ProfileEditingEnvironment
> = Reducer.router()
    .pullback(
        state: \.self,
        action: /ProfileEditingAction.router
    )

public let profileEditingReducer = Reducer<ProfileEditingState, ProfileEditingAction, ProfileEditingEnvironment>.combine(
    _routingReducer,
    ...
)

View routing in SwiftUI is much different from UIKit, so I have another very custom stuff with NavigationViewControllers and more, so I'm not adding that part. But probably in SwiftUI it should be much easier

Dismiss is handled by the NavigationVC, in SwiftUI child module may probably have .dismiss action which may be handled in parent, you may introduce Dismissable protocol to your ChildAction to generalize it a bit, afaik

protocol DismissActionProvider {
    static var dismiss: Self
}

should work on enum cases

[fabstu]

I'm kinda new here with the concept of TCA, but could you create a generic parent AppAction which takes a KeyPath<AppState, String> and the new value and returns that action when the detailReducer is finished?

I do not know how exactly the detailAction is lifted to the parent appReducer though. And I may have missed the point. :-)

[hibernat]

This is very inspiring thread! Thanks a lot!