Send actions to store within tabView selection

[ivangodfather]

Lets say I have a TabView. Do I really need to send "selectedTab" actions? If not they will get out of sync?

struct AppTab {
        case red
        case green
}

struct AppState {
	var selectedTab = AppTab.red
}

enum AppAction {
	case selectTab(AppTab)
}

struct AppEnvironment {
}

let reducer<AppState, AppAction, AppEnvironment> = { state, action, environment in
	switch action {
	case .selectTab(let tab):
		state.selecedTab = tab
	}
}

public struct AppView: View {
	let store: Store<AppState, AppAction>

	public var body: some View {
		WithViewStore(self.store) { viewStore in
			TabView(selection: viewStore.selectedTab) {
				Color.red
					.onTapGesture { viewStore.send(.selectedTab(.red)) <- ??? }
				Color.green
			}
			.tabViewStyle(.page(indexDisplayMode: .never))

		}
	}
}

[tgrapperon]

In SwiftUI, this is achieved through a Binding, which is a value that you can read and write.
There are several ways to achieve this in TCA, but the closest to what you have there is to replace viewStore.selectedTab by:

viewStore.binding(
  get: { state in 
    state.selectedTab 
  }, 
  send: { tab in 
    AppAction.selectedTab(tab)
  }
}

or equivalently:

viewStore.binding(get: \.selectedTab, send: AppAction.selectedTab)

There are other means to achieve this in the library, like using a binding() higher-order reducer, but they are more involved. You can look at the case studies for more informations about them.

Now, your implementation of TabView with a selection is not complete, even in vanilla SwiftUI. You need to tag each tab content view with its corresponding AppTab value:

TabView(selection: viewStore.binding(get: \.selectedTab, send: AppAction.selectedTab)) {
  Color.red
    .tag(.red)
  Color.green
    .tag(.green)
}

That's how SwiftUI understands what view to display when you tap the corresponding button in the toolbar. These buttons' icons and labels can furthermore be configured using .tabItem(…) for each content view.

When you tap the second button for .green, SwiftUI sets the .green value to selection through the binding. When using TCA and the binding defined from the viewStore, this will correspond to sending a .selectTab(.green). All of this is automatic, but you can also send this action from somewhere else yourself, and the TabView will also spot it from the binding and react by displaying the content view with the .green tag. The binding and SwiftUI guarantee that your model and your UI are kept in sync.

[ivangodfather]

Sorry for missing the .tag(Hasable) , I was simplifying everything and I got removed, very clear thanks!