Crash when navigating back to view with NavigationStack

[joelsifres]

I tried implementing navigation using NavigationStack and found a crash Swift/ContiguousArrayBuffer.swift:600: Fatal error: Index out of range when going back to the root screen from the screen that was pushed. The repo can be found here.

This is the View holding the NavigationStack as well as its Reducer (omitting some unnecessary code that can be seen in the repo):

@Reducer
struct MediaList {
    
    @Dependency(\.mainQueue) var mainQueue
    
    @ObservableState
    struct State {
        var path: StackState<MediaDetail.State> = .init()
        
        var selectedPage: MediaType = .anime
        var visibleMedia: IdentifiedArrayOf<MediaItemModel> = []
        var currentSortingFilter: any Filter = SortingFilter.state
        var currentSortingFilterOrder: SortingFilterOrder = .descending
        
        var searchWord: String = ""
        
        var userAnimeList: IdentifiedArrayOf<MediaItemModel> = []
        var userMangaList: IdentifiedArrayOf<MediaItemModel> = []
        
        var debounceDuration: DispatchQueue.SchedulerTimeType.Stride = 0.3
    }
    
    enum Action {
        case path(StackAction<MediaDetail.State, MediaDetail.Action>)
        case onSearchWordChanged(String)
        case debounceSearchList(String)
        case setSelectedPage(MediaType)
        case sort(SortingFilter)
        case toggleOrder
        case onIncreaseCurrentEpisode(MediaItemModel)
    }
    
    private enum CancelID {
        case debounceRequest
    }
    
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .path(_):
                return .none
                
            case .onSearchWordChanged(let newWord):
                state.searchWord = newWord
                
                return .send(.debounceSearchList(newWord))
                    .debounce(
                        id: CancelID.debounceRequest,
                        for: state.debounceDuration,
                        scheduler: mainQueue
                    )
                
            case .debounceSearchList(let newWord):
                if newWord.isEmpty {
                    switch state.selectedPage {
                    case .anime:
                        state.visibleMedia = state.userAnimeList
                        
                    case .manga:
                        state.visibleMedia = state.userMangaList
                    }
                } else {
                    switch state.selectedPage {
                    case .anime:
                        state.visibleMedia = state.userAnimeList.filter { $0.name.lowercased().contains(newWord.lowercased()) }
                        
                    case .manga:
                        state.visibleMedia = state.userMangaList.filter { $0.name.lowercased().contains(newWord.lowercased()) }
                    }
                }
                
                return .none
                
            case .setSelectedPage(let newPage):
                state.selectedPage = newPage
                
                switch newPage {
                case .anime:
                    state.visibleMedia = state.userAnimeList
                case .manga:
                    state.visibleMedia = state.userMangaList
                }
                
                return .none
                
            case .sort(let filter):
                var list = state.visibleMedia
                state.currentSortingFilter = filter
                
                switch filter {
                case .state:
                    list.sort { item1, item2 in
                        item1.state.hashValue < item2.state.hashValue
                    }
                    
                case .title:
                    list.sort { item1, item2 in
                        item1.name < item2.name
                    }
                    
                case .score:
                    list.sort { item1, item2 in
                        item1.userScore > item2.userScore
                    }
                    
                case .progress:
                    list.sort { item1, item2 in
                        item1.currentEpisode > item2.currentEpisode
                    }
                    
                case .lastUpdated:
                    list.sort { item1, item2 in
                        item1.lastUpdated > item2.lastUpdated
                    }
                    
                case .lastAdded:
                    list.sort { item1, item2 in
                        item1.lastAdded > item2.lastAdded
                    }
                    
                case .releaseDate:
                    list.sort { item1, item2 in
                        item1.releaseDate > item2.releaseDate
                    }
                }
                
                state.visibleMedia = list
                return .none
                
            case .toggleOrder:
                state.currentSortingFilterOrder = state.currentSortingFilterOrder == .ascending ? .descending : .ascending
                state.visibleMedia.reverse()
                return .none
                
            case .onIncreaseCurrentEpisode(let model):
                guard model.state == .inProgress else { return .none }
                
                var newModel = model
                newModel.currentEpisode += 1
                
                if newModel.currentEpisode == newModel.totalEpisodes {
                    // TODO: Popup asking user if they want to update the state to completed?
                    newModel.state = .completed
                }
                
                state.visibleMedia[id: model.id]?.currentEpisode = newModel.currentEpisode
                state.visibleMedia[id: model.id]?.state = newModel.state
                
                switch state.selectedPage {
                case .anime:
                    state.userAnimeList[id: model.id] = newModel
                    
                case .manga:
                    state.userMangaList[id: model.id] = newModel
                }
                
                return .none
            }
        }
        .forEach(\.path, action: \.path) {
            MediaDetail()
        }
    }
}

struct MediaListView: View {
    
    @Bindable var store: StoreOf<MediaList>
    
    @State var isPresented: Bool = false
    
    var body: some View {
        NavigationStack(path: $store.scope(state: \.path, action: \.path)) {
            VStack {
                List {
                    ForEach(MediaState.allCases) { state in
                        if store.visibleMedia.filter({ $0.state == state }).isEmpty == false {
                            Section {
                                ForEach(store.visibleMedia.filter { $0.state == state }) { entry in
                                    NavigationLink(
                                        state: MediaDetail.State(media: entry)
                                    ) {
                                        ListMediaRowView(model: entry)
                                            .swipeActions(edge: .leading, allowsFullSwipe: true) {
                                                Button {
                                                    store.send(.onIncreaseCurrentEpisode(entry))
                                                } label: {
                                                    Image(systemName: "plus.circle.fill")
                                                }
                                                .tint(.green)
                                                .disabled(entry.state != .inProgress)
                                            }
                                            .swipeActions(edge: .trailing, allowsFullSwipe: true) {
                                                Button {
                                                    self.isPresented.toggle()
                                                } label: {
                                                    Image(systemName: "square.and.pencil.circle.fill")
                                                }
                                                .tint(.orange)
                                            }
                                    }
                                }
                            } header: {
                                Text(state.stringValue(for: store.selectedPage))
                            } footer: {
                                HStack {
                                    Spacer()
                                    
                                    Text("\(store.visibleMedia.filter { $0.state == state }.count) entries")
                                }
                            }
                        }
                    }
                }
                .navigationTitle("Kipik's \(store.selectedPage == .anime ? "Anime" : "Manga") List")
                .navigationBarTitleDisplayMode(.inline)
                .toolbar(.visible, for: .navigationBar)
                .toolbar {
                    ToolbarItem {
                        Menu {
                            Section {
                                ForEach(SortingFilter.allCases) { filter in
                                    Button {
                                        store.send(.sort(filter))
                                    } label: {
                                        Text(filter.stringValue)
                                    }
                                }
                            }
                            
                            Section {
                                Button {
                                    store.send(.toggleOrder)
                                } label: {
                                    Text(store.currentSortingFilterOrder == .ascending ? "Ascending" : "Descending")
                                    Image(systemName: store.currentSortingFilterOrder == .ascending ? "arrow.up" : "arrow.down")
                                }
                            }
                        } label: {
                            Image(systemName: "line.3.horizontal")
                        }
                    }
                }
                .toolbarTitleMenu {
                    Button {
                        store.send(.setSelectedPage(.anime))
                    } label: {
                        Text("Anime")
                        Image(systemName: "play.rectangle")
                    }
                    
                    Button {
                        store.send(.setSelectedPage(.manga))
                    } label: {
                        Text("Manga")
                        Image(systemName: "book")
                    }
                }
                .sheet(isPresented: $isPresented) {
                    ListEntryEditorView(viewModel: ListEntryEditorViewModel())
                }
                .searchable(text: $store.searchWord.sending(\.onSearchWordChanged), prompt: "Search Kipik's List")
            }
        } destination: { store in
            MediaDetailView(store: store)
        }
    }
}

And this is the RootView holding the MediaListView, as well as its Reducer:

@Reducer
struct Root {
    
    @ObservableState
    struct State {
        var selectedTab: Tab = .list
        var userMediaListState = MediaList.State(
            selectedPage: .anime,
            visibleMedia: [
                // items
            ],
            userAnimeList: [
                // more items
            ],
            userMangaList: [
                // more items
            ]
        )
    }
    
    enum Tab {
        case list
        case explore
        case profile
    }
    
    enum Action {
        case tabSelected(Tab)
        case userMediaList(MediaList.Action)
    }
    
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .tabSelected(let tab):
                state.selectedTab = tab
                return .none
                
            case .userMediaList(_):
                return .none
            }
        }
    }
}

struct RootView: View {
    
    @Bindable var store: StoreOf<Root>
    
    var body: some View {
        TabView(selection: $store.selectedTab.sending(\.tabSelected)) {
            MediaListView(
                store: store.scope(
                    state: \.userMediaListState,
                    action: \.userMediaList
                )
            )
            .tabItem {
                Label("Your List", systemImage: "list.bullet")
            }
            .tag(Root.Tab.list)
            
            ExploreView(viewModel: ExploreViewModel())
                .tabItem {
                    Label("Explore", systemImage: "magnifyingglass")
                }
                .tag(Root.Tab.explore)
            
            ProfileView()
                .tabItem {
                    Label("Profile", systemImage: "person.fill")
                }
                .tag(Root.Tab.profile)

        }
    }
}

[joelsifres]

I've noticed that when running the app, the MediaList store is completely broken and not a single action is performed, while in the Preview everything seems to work just fine, so I figured I might be doing something wrong in the container Root and included it in the post as well.

[mbrandonw]

Hi @joelsifres, if you apply the _printChanges to the root reducer, then you will see that when tapping on a row you get the following logs printed to the console:

received action:
  Root.Action.userMediaList(
    .path(
      .push(
        …
      )
    )
  )
  (No state changes)

The "(No state changes)" is the important part here. An action was sent to push something to the stack state, yet nothing changed in the state.

The reason this is happening is because the MediaList reducer is never composed into the system. You need to add it to the Root reducer:

var body: some ReducerOf<Self> {
  Scope(state: \State.userMediaListState, action: \.userMediaList) {
    MediaList()
  }
  …
} 

[joelsifres]

Then should I add a Scope for each possible Path destination?

[mbrandonw]

MediaList isn't in the path. It is the root of the navigation stack, and it needs to be composed into the root feature separately.

If you go the Path reducer route, like you have commented out, then you will scope each of those features into Path.body, and then that will be composed into Root via forEach. But it will not need to be included directly in Root like MediaList is.

[joelsifres]

This was driving me crazy but now I can continue with this information, thanks a lot for the help Brandon! I'm closing the discussion 🙏🏻