TCACoordinators

Version 0.9 introduced breaking changes to align the library with The Composable Architecture (TCA), specifically regarding the use of case paths. You can choose between a Full migration to adopt the new API patterns or an Easy migration for a faster, short-term transition.

Full Migration Steps

1. Remove Protocol Conformances: Remove conformances to IndexedRouterState, IndexedRouterAction, IdentifiedRouterState, and IdentifiedRouterAction.
2. Add @Reducer Macro: Add the @Reducer macro to your coordinator reducer to enable case path access on your action type.
3. Simplify Actions: Replace routeAction and updateRoutes cases with a single case: case router(IndexedRouterActionOf<Screen>) or case router(IdentifiedRouterActionOf<Screen>), where Screen is your screen reducer. Update pattern matching to nest under the .router case (e.g., case .router(.routeAction(_, let action)):).
4. Update forEachRoute: Pass the keypath and case path: forEachRoute(\.routes, action: \.router) { ... }.
5. Scope TCARouter in Views: Instead of passing the entire store, scope it: TCARouter(store.scope(state: \.routes, action: \.router)) { ... }.
6. Update routeWithDelaysIfUnsupported: Pass the action case path: Effect.routeWithDelaysIfUnsupported(state.routes, action: \.router) { ... }.

To implement navigation using TCACoordinators, follow these three steps:

1. Create a Screen Reducer: Define an enum reducer using the @Reducer macro that encapsulates all possible screens in a navigation flow. Each case represents a different screen's reducer.
2. Create a Coordinator Reducer: Define a coordinator that manages an array of Route<Screen.State>. The coordinator's action must include a case for the router (e.g., case router(IndexedRouterActionOf<Screen>)). Use .forEachRoute in the reducer body to apply the screen reducer to the routes array.
3. Create a Coordinator View: Use TCARouter in your SwiftUI view. It takes a scoped store and a closure that maps each screen case to its corresponding view.

This approach decouples individual screens from the navigation logic, allowing screens to be reused in different contexts without knowing their position in the stack.

// 1. Screen Reducer
@Reducer(state: .hashable)
enum Screen {
  case home(Home)
  case numbersList(NumbersList)
  case numberDetail(NumberDetail)
}

// 2. Coordinator Reducer
@Reducer
struct Coordinator {
  @ObservableState
  struct State: Equatable {
    var routes: [Route<Screen.State>]
  } 

  enum Action {
    case router(IndexedRouterActionOf<Screen>)
  }

  var body: some ReducerOf<Self> {
    Reduce { state, action in
      switch action {
      case .router(.routeAction(_, .home(.startTapped))):
        state.routes.presentSheet(.numbersList(.init(numbers: [0,1,2,3])), embedInNavigationView: true)
        return .none
      // ... other cases
      default: return .none
      }
    }
    .forEachRoute(\.routes, action: \.router)
  }
}

// 3. Coordinator View
struct CoordinatorView: View {
  let store: StoreOf<Coordinator>

  var body: some View {
    TCARouter(store.scope(state: \.routes, action: \.router)) { screen in
      switch screen.case {
      case let .home(store): HomeView(store: store)
      case let .numbersList(store): NumbersListView(store: store)
      case let .numberDetail(store): NumberDetailView(store: store)
      }
    }
  }
}

If you want to migrate quickly without adopting the full new API immediately, you can skip the protocol removals and action simplification. Instead, manually add a case path to your coordinator's action type using CasePathable to bridge the old structure to the new requirements.

// Quick update for an action that formerly conformed to `IdentifiedRouterAction`.
enum Action: CasePathable {
  case updateRoutes(IdentifiedArrayOf<Route<Screen.State>>)
  case routeAction(Screen.State.ID, action: Screen.Action)

  static var allCasePaths = AllCasePaths()

  struct AllCasePaths {
    var router: AnyCasePath<Action, IdentifiedRouterAction<Screen.State, Screen.Action>> {
      AnyCasePath { routerAction in
        switch routerAction {
        case let .routeAction(id, action):
          return .routeAction(id, action: action)
        case let .updateRoutes(newRoutes):
          return .updateRoutes(IdentifiedArray(uniqueElements: newRoutes))
        }
      } extract: { action in
        switch action {
        case let .routeAction(id, action: action):
          return .routeAction(id: id, action: action)
        case let .updateRoutes(newRoutes):
          return .updateRoutes(newRoutes.elements)
        }
      }
    }
  }
}

This diff demonstrates the complete transformation of a coordinator and its view from the 0.8 pattern to the 0.9+ pattern, including state/action changes, reducer logic updates, and view scoping.

struct IndexedCoordinatorView: View {
  let store: StoreOf<IndexedCoordinator>

  var body: some View {
-    TCARouter(store) { screen in
+    TCARouter(store.scope(state: \.routes, action: \.router)) { screen in
      SwitchStore(screen) { screen in
        switch screen {
        case .home:
          CaseLet(
            \Screen.State.home,
            action: Screen.Action.home,
            then: HomeView.init
          )
        case .numbersList:
          CaseLet(
            \Screen.State.numbersList,
            action: Screen.Action.numbersList,
            then: NumbersListView.init
          )
        case .numberDetail:
          CaseLet(
            \Screen.State.numberDetail,
            action: Screen.Action.numberDetail,
            then: NumberDetailView.init
          )
        }
      }
    }
  }
}

+@Reducer
struct IndexedCoordinator {
-  struct State: Equatable, IndexedRouterState {
+  struct State: Equatable {
    var routes: [Route<Screen.State>]
  }

-  enum Action: IndexedRouterAction {
+  enum Action {
-    case routeAction(Int, action: Screen.Action)
-    case updateRoutes([Route<Screen.State>])
+    case router(IndexedRouterActionOf<Screen>)
  }

  var body: some ReducerOf<Self> {
    Reduce<State, Action> {
      switch action {
-      case .routeAction(_, .home(.startTapped)):
+      case .router(.routeAction(_, .home(.startTapped))):
        state.routes.presentSheet(.numbersList(.init(numbers: Array(0 ..< 4))), embedInNavigationView: true)

-      case let .routeAction(_, .numbersList(.numberSelected(number))):
+      case let .router(.routeAction(_, .numbersList(.numberSelected(number)))):
        state.routes.push(.numberDetail(.init(number: number)))

-      case .routeAction(_, .numberDetail(.goBackTapped)):
+      case .router(.routeAction(_, .numberDetail(.goBackTapped))):
        state.routes.goBack()

-      case .routeAction(_, .numberDetail(.goBackToRootTapped)):
-        return .routeWithDelaysIfUnsupported(state.routes) {
+      case .router(.routeAction(_, .numberDetail(.goBackToRootTapped))):
+        return .routeWithDelaysIfUnsupported(state.routes, action: \.router) {
          $0.goBackToRoot()
        }

      default:
        break
      }
      return .none
    }
-    .forEachRoute {
+    .forEachRoute(\.routes, action: \.router) {
      Screen()
    }
  }
}