Strange typing of State

[Nerkyator]

Hi all!
I'm developing a hobby macOS app with TCA (prerelease\1.0), right now it's just a sidebar with details on the right but I'm facing something strange (or maybe a misunderstanding on how viewStore works).
This is my code:

FEATURE

enum Screen {
    case home
    case months
}

struct ContentViewFeature: Reducer {
    struct State: Equatable {
        var selectedScreen: Screen = .home
    }
    
    enum Action: Equatable {
        case selectedScreenChanged(Screen)
    }
    
    var body: some ReducerOf<Self> {
        
        Reduce<State, Action> { state, action in  //must specify <State, Action> due a compiler bug
            switch action {
            case .selectedScreenChanged(let screen):
                state.selectedScreen = screen
                return .none
                
            }
        }
    }
}

SWIFTUI VIEW

struct ContentView: View {
    let store: StoreOf<ContentViewFeature>
    @State var visibile: NavigationSplitViewVisibility = .doubleColumn
    
    var body: some View {
        WithViewStore(self.store, observe: \.selectedScreen) { viewStore in
            NavigationSplitView(columnVisibility: self.$visibile) {
                List(selection: viewStore.binding(send: ContentViewFeature.Action.selectedScreenChanged)) {
                    NavigationLink(value: Screen.home, label: { Label("Home", systemImage: "house") })
                    NavigationLink(value: Screen.months, label: { Label("Months", systemImage: "calendar") })
                }
            } detail: {
                switch viewStore.state {
                case .home:
                     Text("HOME")
                case .months:
                     Text("MONTHS")
                }
            }
        }
    }
}

This code works but I cannot understand why viewStore.state (in detail closure) is of type Screen instead of ContentViewFeature.State.
If I change observability from WithViewStore(self.store, observe: \.selectedScreen) to WithViewStore(self.store, observe: { $0 }) it seems to switch to correct type, but of course the code cannot even compile.

Can someone give me an hint on this?
Thanks!

[tgrapperon]

Hey @Nerkyator! The type of the ViewStore's state is the type of the "observed" state. In your case, you're observing \.selectedScreen only, so the value that ViewStore will observe and present will be a Screen.

In some ways, it is functionally similar to scoping to a smaller store that you're observing.
When you replace by { $0 }, you observe the whole state, so the ViewStore presents a ContentViewFeature.State.

You can check the "Performance" article where a dedicated type (ViewState) is also used. In your case, observing Screen only was the optimal choice (even if in this case, it's be similar to observing the whole state!).

Please also note that you can derive a binding by pointing to a specific property of the ViewStore's state. So in the { $0 } case, you could have used:

viewStore.binding(get: \.selectedScreen, send: ContentViewFeature.Action.selectedScreenChanged)

The variant without get: is only useful when you're binding to the whole ViewStore state (like when you observed \.selectedScreen only).

[Nerkyator]

This is a really detailed explanation!
Now it is more clear on how it works and how to use it, many thanks @tgrapperon!