Scoping a store into pairs

[fruitcoder]

I have a project which shows pairs of views (in an HStack) and I have some difficulty finding a general solution on how to scope the store containing an identified array of state that each view needs. A simple version of this could be this:

struct ChildReducer: ReducerProtocol {
  struct State: Equatable, Identifiable, Hashable {
    var id: String
    var title: String     
  }
  
  enum Action: Equatable {
    case onAppear
  }
}

struct ChildView: View {
  let store: StoreOf<ChildReducer>

  var body: some View {
    WithViewStore(store) { viewStore in 
      Text(viewStore.title)
    }
  }
}

struct ParentReducer: ReducerProtocol {
  struct State: Equatable, Identifiable, Hashable {
    var children: IdentifiedArrayOf<ChildReducer.State>
  }
  
  enum Action: Equatable {
    case child(ChildReducer.Action)
    case specialAction
  }

  // reduce just does a forEach
}

struct ParentView: View {
  let store: StoreOf<ParentReducer>

  var body: some View {
    LazyVStack {
      HStack {
        // how to scope the store so I can use chunks of 2 to render 2 ChildView tuples here?
        ForEachStore(self.store.scope(state: \.children, action: ParentReducer.Action.child)) { scopedStore in
          ChildView(store: scopedStore)
        }
      }
    }
  }
}

I tried implementing something similar to the ForEachStore but without access to some internal state I cannot cache the state to guard against access while the state is removed from the identified array (NB of @stephencelis):

public struct ForEachPairStore<
  EachState, EachAction, Data: Collection, ID: Hashable, Content: View
>: View {
  let content: Content

  public init<EachContent>(
    _ store: Store<IdentifiedArray<ID, EachState>, (ID, EachAction)>,
    @ViewBuilder content: @escaping (Store<EachState, EachAction>) -> EachContent
  )
  where
    EachContent: View,
    Data == IdentifiedArray<ID, EachState>,
    Content == WithViewStore<
      OrderedSet<ID>, (ID, EachAction), ForEach<[[ID]], [ID], TupleView<(EachContent, EachContent?)>>
    >
  {
    self.content = WithViewStore(
      store,
      observe: { $0.ids },
      removeDuplicates: areOrderedSetsDuplicates
    ) { viewStore in
      ForEach(viewStore.state.elements.chunked(into: 2), id: \.self) { idChunks -> TupleView<(EachContent, EachContent?)> in
        let leftId = idChunks[0]
        let optionalRightId = idChunks.get(index: 1)

        TupleView((
          content(
            store.scope(
              state: {
                $0[id: leftId]!
              },
              action: { (leftId, $0) }
            )
          ),
          optionalRightId.map({ rightId in
            content(
              store.scope(
                state: {
                  $0[id: rightId]!
                },
                action: { (rightId, $0) }
              )
            )
          })
        ))
      }
    }
  }

  public var body: some View {
    self.content
  }
}

private func areOrderedSetsDuplicates<ID: Hashable>(lhs: OrderedSet<ID>, rhs: OrderedSet<ID>)
-> Bool
{
  var lhs = lhs
  var rhs = rhs
  if memcmp(&lhs, &rhs, MemoryLayout<OrderedSet<ID>>.size) == 0 {
    return true
  }
  return lhs == rhs
}