How to use TCA and TCACoordinator with a custom TabBar?

[dsb92]

Hi :)

First of all, I really like this architecture and have been using it for a while in one of my new apps (not yet released). Despite the deep learning curve it has really been worth the ride once I understood it all. (Well, almost)
Now, I've built my own custom TabBar using TCA and it works but my implementation together with TCACoordinator still makes me question whether I've done it right because it's looks a bit naive to me.

I have a MainView which combines the screens on each Tab and then the TabBar itself everything wrapped in a VStack like this:

    var content: some View {
        GeometryReader { geometry in
            ZStack(alignment: .center) {
                VStack(spacing: 0) {
                    Spacer()
                                    
                    MainCoordinatorView(
                        store: self.store.scope(state: \.tabBarContentFeature, action: MainFeature.Action.tabBarContentFeature)
                    )
                    
                    TabBarView(store: self.store.scope(state: \.tabBarFeature, action: MainFeature.Action.tabBarFeature), geometry: geometry)
                }
                
                popUpViews
            }
        }
    }

My MainCoordinatorView looks likes this:

struct MainCoordinatorView: View {
    let store: Store<MainCoordinator.State, MainCoordinator.Action>
    
    var body: some View {
        TCARouter(self.store) { screen in
            SwitchStore(screen) {
                CaseLet(
                    state: /MainScreen.State.home,
                    action: MainScreen.Action.home,
                    then: HomeCoordinatorView.init
                )
                CaseLet(
                    state: /MainScreen.State.forum,
                    action: MainScreen.Action.forum,
                    then: ForumCoordinatorView.init
                )
                CaseLet(
                    state: /MainScreen.State.more,
                    action: MainScreen.Action.more,
                    then: MoreCoordinatorView.init
                )
            }
        }
    }
}

And then I have my MainFeature which keeps track of selected Tabs and corresponding screen:

struct MainFeature {
    struct State: Equatable {
        init(appState: AppState) {
            let homeFeature: HomeFeature.State = .init(appData: appState.appData)
            let moreFeature: MoreFeature.State = .init(appData: appState.appData)
            self.forumFeature = .init()
        }
        
        fileprivate(set) var tabBarContentFeature: MainCoordinator.State
        fileprivate(set) var tabBarFeature: TabBarFeature.State = .init(tabBarItems: [
            .init(tab: .home, isSelected: true),
            .init(tab: .forum, isSelected: false),
            .init(tab: .more, isSelected: false)
        ])
        fileprivate(set) var homeFeature: HomeFeature.State
        fileprivate(set) var forumFeature: ForumFeature.State
        fileprivate(set) var moreFeature: MoreFeature.State
    }
    
    enum Action: Equatable {
        case tabBarContentFeature(MainCoordinator.Action)
        case tabBarFeature(TabBarFeature.Action)
    }
    
    struct Environment {
        @Inject
        private var userUseCase: UserUseCaseSchema
 
        func isLoggedIn() -> Bool {
            userUseCase.isLoggedIn()
        }
    }
    
    static let reducer = Reducer<State, Action, SystemEnvironment<Environment>>
        .combine(
            MainCoordinator.reducer.pullback(
                state: \.tabBarContentFeature,
                action: /Action.tabBarContentFeature,
                environment: { _ in .live(environment: MainCoordinator.Environment()) }
            ),
            TabBarFeature.reducer.pullback(
                state: \.tabBarFeature,
                action: /Action.tabBarFeature,
                environment: { _ in .live(environment: TabBarFeature.Environment()) }
            ),
            .init { state, action, environment in
                switch action {
                case let .tabBarFeature(.tabBarItem(id, .didTapTabItem)):
                    if let tab = state.tabBarFeature.tabBarItems[id: id]?.tab {
                        switch tab {
                        case .home:
                            if environment.environment.isLoggedIn() {
                                state.homeFeature.setIdleState()
                                state.tabBarContentFeature = .initWithScreen(.home(.initWithFeature(state.homeFeature)))
                            } else {
                                state.tabBarContentFeature = .initWithScreen(.home(.initWithNeutral(state.neutralFeatureHome)))
                            }
                        case .forum:
                            if environment.environment.isLoggedIn() {
                                state.forumFeature.setIdleState()
                                state.tabBarContentFeature = .initWithScreen(.forum(.initWithFeature(state.forumFeature)))
                            } else {
                                state.tabBarContentFeature = .initWithScreen(.forum(.initWithNeutral(state.neutralFeatureForum)))
                            }
                        case .more:
                            state.moreFeature.setIdleState()
                            state.tabBarContentFeature = .initWithScreen(.more(.initWithFeature(state.moreFeature)))
                        }
                    }
                    return .none
                case .tabBarContentFeature(.routeAction(let index, let action)):
                    switch action {
                    case .home(let homeAction):                 
                        if case let .home(feature) = state.tabBarContentFeature.routes[index].screen {
                            if case let .home(homeFeature) = feature.routes[index].screen {
                                state.homeFeature = homeFeature
                            }
                        }
                        return .none
                    case .forum(let forumAction):
                        if case let .forum(feature) = state.tabBarContentFeature.routes[index].screen {
                            if case let .forum(forumFeature) = feature.routes[index].screen {
                                state.forumFeature = forumFeature
                            }
                        }
                        return .none
                    case .more(let moreAction):                 
                        if case let .more(feature) = state.tabBarContentFeature.routes[index].screen {
                            if case let .more(moreFeature) = feature.routes[index].screen {
                                state.moreFeature = moreFeature
                            }
                        }
                        return .none
                    }
                case .tabBarContentFeature(.updateRoutes(_)):
                    return .none
                }
            }
        )
        .debug()
}

I have removed some code in MainFeature in this example to not confuse too much with other features that i pulled back in this already

For me it feels weird that I have MainCoordinator.State pulled back in my MainFeature's state. Normally, based on the examples I looked on, you have a Feature pulled into a Coordinator defining all screens and then a CoordinatorView switching screens based on Coordinator's state and then a View.init for each case. But here, I feel like i'm doing a bit of a hack. Another drawback is that I'm trying to update MainFeature state based on state changes on each screen (Home, Forum or More screen) when any of their child state changes but that only works when you select a different tab than the one you're already on.

I hope anyone in this community can help out with a better solution. It would really be helpful to me. Please also comment on this if you have any questions of understanding my problem then I will try to clear it out.

Thanks.

/Dave.