Hi everyone, I'm new in TCA and have an architecture issue where I do not know how to manage it. I hope someone directs me to the right solution.
The issue is that I have multiple navigation screens. All these screens are connected by one action Synchronize data with the server.
What I'm trying to achieve is to show the Sync loader overlay above all screens wherever the user is navigated.
I've added a public static reducer connected to the Root View and this Root View reacts on the subscription that synchronization started.
I have a couple of disadvantages of this approach:
First: All screens are rebuilt when the Synchronization loading view appears.
Second: All child reducers re-init their states so I have to do like.
// global
let detailsFeature = DetailsScreenFeature()
// re-init current user state if use directly DetailsScreenFeature() on Root Screen // updates to display Sync dialog.
.ifLet(\.$detailsState, action: /Action.showDetails) {
detailsFeature
}
Third: CPU load jumping when this dialog appears.
I know that my approach is wrong but I'm out of idea how to align this in right way.
Thank you in advance.
Code to manage global app state:
struct AppView: View {
let appStore: StoreOf<AppStateFeature>
private let homeView = HomeView(store: homeStore)
private let authView = AuthorizationView()
var body: some View {
WithViewStore(appStore, observe: {$0}) { appState in
VStack {
switch appState.appViewState {
case .home:
homeView
.transition(
.opacity.animation(.easeInOut(duration: 0.25))
)
case .login:
authView
.transition(
.opacity.animation(.easeInOut(duration: 0.25))
)
case .undefined:
LogoAnimationPlaceholder()
.transition(
.opacity.animation(.easeInOut(duration: 0.25))
)
}
if appState.showInfoMessage {
AppInformativeView(
message: appState.state.infoMessage(),
severity: appState.state.infoSeverity(),
systemImage: nil
)
.transition(
.move(edge: .bottom)
.animation(.easeInOut(duration: 0.25)))
}
}
.ignoresSafeArea()
.overlay(
overlayView:
LoadingView(
title: appState.state.activityStepTitle(),
show: .constant(appState.state.inAction())
),
show: .constant(appState.state.inAction()),
blur: true)
.preferredColorScheme(.light)
.onAppear {
appState.send(.checkAuthorization)
}
}
}
}