ForEachStore with MapKit's MapView Annotation.

[ratnesh-jain]

Hello,
Thanks for this architecture. I really like the way library encourages the feature development with isolation and composing together to develop the as whole.
I am opening this discussion to discuss the approach working with MapKit's MapView with the MKAnnotations with ForEachStore reducer for navigating to particular annotation details.

Here is the code snippet that I have implemented.

public struct MapReducer: ReducerProtocol {
    public struct State: Equatable {
       @BindableState var locations: [Models.Location]
       ...
      
       public var locationDetails: IdentifiedArrayOf<LocationDetailsReducer.State> {
          get {
              .init(uniqueElements: self.locations.map { LocationDetailsReducer.State(location: $0) })
          }
          set {
              self.locations = newValue.elements.map(\.location)
          }
       }
     }

      public enum Action: BindableAction, Equatable {
          case binding(BindingAction<State>)
          case tap(location: CGPoint, size: CGSize)
          case locationDetailAction(Location.ID, LocationDetailsReducer.Action)
      }

      var body: some ReducerProtocol<State, Action> {
          BindingReducer()
          Reduce { state, action in ... }
             .forEach(\.locationDetails, action: /MapReducer.Action.locationDetailAction) {
                   LocationDetailsReducer()
             }
      }
}

Now when I try to implement the SwiftUI View as below.

public struct MapView: View {
    ...
    var body: some View {
        Map(coordinateRegion: viewStore.binding(\.$coordinateRegion).convertToMapKit(), annotationItems: viewStore.locations) { location in
              MapAnnotation(coordinate: .init(latitude: location.latitude, longitude: location.longitude)) {
                  NavigationLink {
                      ForEachStore(store.scope(state: \.locationDetails, action: MapReducer.Action.locationDetailAction)) { locationDetailStore in
                          LocationDetailsView(store: locationDetailStore)
                      }
                  } label: {
                      PinAnnoationView()
                  }
              }
          }
    }
}

Problem:

1. In the above implementation, this code will compile but will create multiple instances of LocationDetailsView due to multiple items in locationDetails array.
2. If I move the ForEachStore at the level above NavigationLink link, this will cause the PinAnnotationView to render duplicates.
3. If I move the ForEachStore at the level above MapAnnotation, this will refuse to compile since the MapAnnotation does not conforms to SwiftUI.View protocol.

I am not sure what should be the workaround for this or I am missing something or any other techniques I can implement.

EDIT:

• After re-thinking about the problem, I found that it's not good to use the ForEachStore scope here since the MapView's annotation builder closure will take only single view or MKAnnotation. So I am posting the single scope solution I considered in the answer section.

Thanks.
Ratnesh.

[ratnesh-jain]

Here is the single scope solution I considered for this.

Map(coordinateRegion: viewStore.binding(\.$coordinateRegion).convertToMapKit(), annotationItems: viewStore.locations) { location in
  MapAnnotation(coordinate: .init(latitude: location.latitude, longitude: location.longitude)) {
    NavigationLink {
      let detailStore = store.scope { state in
        return state.locationDetails[id: location.id]!
      } action: { detailAction in
        return .locationDetailAction(location.id, detailAction)
      }
      LocationDetailsView(store: detailStore)
    } label: {
      PinAnnoationView()
    }
  }
}