Accessing the Store on the com.apple.SwiftUI.AsyncRenderer thread

[gerfarfel]

In converting my code to use @ObservableState (TCA 1.7), I ran into the following runtime warning:

    "Store.scope" was called on a non-main thread. …

    The "Store" class is not thread-safe, and so all interactions with an instance of \
    "Store" (including all of its scopes and derived view stores) must be done on the main \
    thread.

Setting a breakpoint in ComposableArchitecture.RootStore.threadCheck reveals that the store is being accessed from the com.apple.SwiftUI.AsyncRenderer thread.

This issue was referenced in the comments for discussion #2694 on this forum, but without a solution. (Sorry if I've missed other references to the problem.)

Here's some code that generates the issue. There are two Reducers and two Views. The "SquareBox" view shows a colored square and recognizes tap gestures. The "Gallery" view shows a grid of SquareBox views. Tapping on any of the boxes deletes that box from the gallery. That's it... The runtime warning is triggered when a box is deleted.

Note that the tap gesture action is sent with animation. If the action is not animated, the runtime warning is not triggered.

import ComposableArchitecture
import SwiftUI

// MARK: - SquareBox

@Reducer
struct SquareBox: Reducer {
  @ObservableState
  struct State: Equatable, Identifiable {
    let id = UUID()
    var color: Color
  }

  enum Action {
    case tapGesture
  }

  var body: some ReducerOf<Self> {
    Reduce { state, action in
      switch action {
      case .tapGesture:
        return .none
      }
    }
  }
}

struct SquareBoxView: View {
  var store: StoreOf<SquareBox>

  var body: some View {
    store.color
      .aspectRatio(1, contentMode: .fit)
      .onTapGesture {
        store.send(.tapGesture, animation: .default) // no runtime warning if this animation is removed!
      }
  }
}

// MARK: - Gallery

@Reducer
struct Gallery: Reducer {
  @ObservableState
  struct State: Equatable {
    var squareBoxes: IdentifiedArrayOf<SquareBox.State> = [
      SquareBox.State(color: .red),
      SquareBox.State(color: .green),
      SquareBox.State(color: .blue),
      SquareBox.State(color: .yellow),
      SquareBox.State(color: .purple),
      SquareBox.State(color: .orange),
      SquareBox.State(color: .cyan),
      SquareBox.State(color: .brown),
      SquareBox.State(color: .gray),
    ]
  }

  enum Action {
    case squareBox(IdentifiedActionOf<SquareBox>)
  }

  var body: some ReducerOf<Self> {
    Reduce { state, action in
      switch action {
      case let .squareBox(.element(id, .tapGesture)):
        state.squareBoxes.remove(id: id)
        return .none
      }
    }
    .forEach(\.squareBoxes, action: \.squareBox) {
      SquareBox()
    }
  }
}

struct GalleryView: View {
  var store: StoreOf<Gallery>

  var body: some View {
    ScrollView {
      LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]) {
        ForEach(
          store.scope(state: \.squareBoxes, action: \.squareBox),
          id: \.state.id
        ) { squareBoxStore in
          SquareBoxView(store: squareBoxStore)
        }
      }
    }
  }
}

// MARK: - The App

@main
struct TheApp: App {
  var body: some Scene {
    WindowGroup {
      GalleryView(
        store: Store(initialState: Gallery.State()) {
          Gallery()
        }
      )
    }
  }
}

[mbrandonw]

This issue was referenced in the comments for discussion #2694 on this forum, but without a solution. (Sorry if I've missed other references to the problem.)

Ah yes, sadly that conversation went over to email and I forgot to update the thread.

We should document this somewhere, but the problem is with any kind of lazy view, such as the LazyVGrid you have in your demo. Such views apparently construct view hierarchy on non-main threads, which cause stores to be created on non-main threads (due the laziness of _StoreCollection).

Someday in the future (once the dust settles on Swift concurrency), stores will be thread safe and this will be fine. But until then you need to eager turn your store.scope(…) into an array:

Array(store.scope(state: \.squareBoxes, action: \.squareBox))

That should fix it.

[mbrandonw]

The warning is different now: "Store state was accessed on a non-main thread. …". It's happening because of this: id: \.state.id. The LazyVGrid will access that key path on the background thread, hence accessing state in the store on a background thread.

If you drop the id argument it will stop warning. Is there a reason you wanted to provide an explicit ID? Stores already have a stable ID and so it can be used implicitly.

[gerfarfel]

Okay, thanks, that does resolve the issue in the example code. Although there's no reason to include the id in the example code, I did have a reason to include it in my real-world code. Now I know what the constraints are, I'll see if I can work around the problem.

[topkim993]

Hi! @gerfarfel

I'm facing the same issue. Have you found a solution?

If so, could you please share it with me?

[gerfarfel]

Hi @topkim993 – I haven't been able to fully reconstruct my original problem because I never committed the broken code, but as best I can remember, I found a way to make the objects that the ForEach iterated over conform to Identifiable. That allowed me to drop the id: \.state.id from the ForEach and resolved the problem.

[topkim993]

@gerfarfel Thank you for your reply 😀