How to bootstrap child state with refreshable modifier

[satoshin21]

I'm currently implement a screen that displays a list of favorites as follows. within the refreshable list, child state retrieve favorite state with onAppear action.

There are no issues first appear, but when refresh action is triggered, child view's onAppear is not called. so child state's bootstrap is not completed with refreshable.
If I wish to perform the child State's bootstrap in child reducer, what would be the best approach to implement this?

I am considering the following two solution, but are there any other options available?

1. Executing the bootstrap within the initializer of the child state.
2. Maintaining a var isBootstrapped: Bool within the child State and performing the bootstrap even when it becomes false using the onChange method.

import Foundation
import SwiftUI
import ComposableArchitecture

var favoritedIds: [Int] = []

public struct FavoriteList: Reducer {

  public struct State: Equatable {
    var items: IdentifiedArrayOf<ListItem.State> = .init(uniqueElements: [
      .init(id: 0),
      .init(id: 1),
      .init(id: 2),
    ])
  }

  public enum Action: Equatable {
    case refreshTriggered
    case refresh
    case item(ListItem.State.ID, ListItem.Action)
  }

  public var body: some Reducer<State, Action> {
    Reduce { state, action in
      switch action {
        case .item:
          return .none
        case .refreshTriggered:
          return .run { send in
            try await Task.sleep(nanoseconds: 500_000_000)
            await send(.refresh)
          }
        case .refresh:
          state.items = .init(uniqueElements: [
            .init(id: 0),
            .init(id: 1),
            .init(id: 2)
          ])
          return .none
      }
    }
    .forEach(\.items, action: /Action.item) {
      ListItem()
    }
  }
}

public struct FavoriteListView: View {

  public typealias Store = StoreOf<FavoriteList>
  let store: Store

  public init(store: Store) {
    self.store = store
  }

  public var body: some View {
    List {
      ForEachStore(store.scope(state: \.items, action: { .item($0, $1) })) { store in
        ListItemView(store: store)
      }
    }
    .refreshable {
      store.send(.refreshTriggered)
    }
  }
}

public struct ListItem: Reducer {

  public struct State: Equatable, Identifiable {
    public var id: Int
    var isFavorited: Bool? = nil
  }

  public enum Action: Equatable {
    case onAppear
    case loaded(TaskResult<Bool>)
    case tap
    case update(isFavorited: Bool)
  }

  public var body: some Reducer<State, Action> {
    Reduce { state, action in
      switch action {
        case .onAppear:

          return .run { [id = state.id] send in
            await send(.loaded(.init(catching: {
              try await Task.sleep(seconds: 1)
              return favoritedIds.contains(id)
            })))
          }
        case .loaded(.success(let isFavorited)):
          state.isFavorited = isFavorited
          return .none
        case .loaded(.failure):
          return .none
        case .tap:
          if let isFavorited = state.isFavorited {
            state.isFavorited = !isFavorited
          } else {
            state.isFavorited = true
          }

          return .none
        case .update(let isFavorited):
          state.isFavorited = isFavorited
          return .none
      }
    }
  }
}

public struct ListItemView: View {

  public typealias Store = StoreOf<ListItem>
  public typealias ViewStore = ViewStoreOf<ListItem>
  let store: Store
  @ObservedObject var viewStore: ViewStore

  public init(store: Store) {
    self.store = store
    self.viewStore = .init(store, observe: { $0 })
  }

  public var body: some View {
    Button {
      store.send(.tap)
    } label: {
      HStack {
        Text("\(viewStore.id)")
        Spacer()
        switch viewStore.isFavorited {
          case .none:
            ProgressView()
          case .some(let isFavorited):
            Image(systemName: isFavorited ? "heart.fill" : "heart")
        }
      }
    }.onAppear {
      store.send(.onAppear)
    }
  }
}

#Preview {
  FavoriteListView(store: .init(initialState: .init(), reducer: { FavoriteList() }))
}

[satoshin21]

I solved this myself. I decided to use task modifier for bootstrap. thank you