The child of IfLetStore doesn't update together with the store.

[IvanMukticcc]

Description

I I have an iPad Split View with a list of items that trigger changes in an IfLetStore, and the state changes as expected. However, the child view inside the IfLetStore does not update accordingly.

Checklist

• I have determined whether this bug is also reproducible in a vanilla SwiftUI project.
• If possible, I've reproduced the issue using the main branch of this package.
• This issue hasn't been addressed in an existing GitHub issue or discussion.

Expected behavior

When selecting a new store, both the store and its children should update.

Actual behavior

1. Selecting the first store updates both the store and the children.
2. Selecting another store updates just the store.
3. When the store is set to nil and selected again, both the store and the children are updated.

Simulator.Screen.Recording.-.iPad.Pro.12.9-inch.6th.generation.16GB.-.2024-07-16.at.10.43.03.mp4

Steps to reproduce

I made simple app to reproduce the bug, here is the code:

import ComposableArchitecture
import SwiftUI

struct MainReducer: Reducer {
struct State: Equatable {
var firstChildState: FirstChildReducer.State?
}

enum Action: Equatable {
    case firstChildAction(FirstChildReducer.Action)
    case selectFirstChildState(FirstChildReducer.State?)
}

var body: some ReducerOf<Self> {
    Reduce { state, action in
        switch action {
        case let .selectFirstChildState(newState):
            state.firstChildState = newState
            return .none

        case .firstChildAction(.secondChildAction(.playButtonTapped)):
            return .send(.selectFirstChildState(nil))

        case .firstChildAction:
            return .none
        }
    }
    .ifLet(\.firstChildState, action: /Action.firstChildAction) {
        FirstChildReducer()
    }
}

}

struct MainView: View {
var store: StoreOf

var body: some View {
    WithViewStore(store, observe: { $0 }) { viewStore in
        HStack {
            List {
                ForEach(1 ..< 5, id: \.self) { num in
                    Button {
                        viewStore.send(.selectFirstChildState(.init(number: num)))
                    } label: {
                        Text("Num: \(num)")
                    }
                }
            }
            if viewStore.firstChildState != nil {
                IfLetStore(
                    store
                        .scope(state: \.firstChildState, action: MainReducer.Action.firstChildAction)
                ) { store in
                    FirstChildView(store: store)
                        .frame(width: UIScreen.main.bounds.width * 0.66)
                }
            } else {
                Text("Select State")
                    .frame(width: UIScreen.main.bounds.width * 0.66)
            }
        }
    }
}

}

struct FirstChildView: View {
var store: StoreOf

var body: some View {
    WithViewStore(store, observe: { $0 }) { viewStore in
        VStack {
            SecondChildView(
                store: store
                    .scope(state: \.secondChildState, action: FirstChildReducer.Action.secondChildAction)
            )
            Spacer()
            Text("Hello, World! \(viewStore.number)")
                .font(.system(size: 30, weight: .bold))
            Spacer()
        }
    }
}

}

struct FirstChildReducer: Reducer {
struct State: Equatable, Identifiable {
var id: UUID = .init()
var number: Int

    var secondChildState = SecondChildReducer.State()
}

enum Action: Equatable {
    case secondChildAction(SecondChildReducer.Action)
}

var body: some ReducerOf<Self> {
    Scope(state: \.secondChildState, action: /Action.secondChildAction) {
        SecondChildReducer()
    }

    Reduce { _, action in
        switch action {
        case .secondChildAction:
            return .none
        }
    }
}

}

struct SecondChildView: View {
var store: StoreOf

var body: some View {
    WithViewStore(store, observe: { $0 }) { viewStore in
        ZStack {
            Rectangle()
                .frame(height: UIScreen.main.bounds.height * 0.33)
            Button {
                viewStore.send(.playButtonTapped)
            } label: {
                Image(systemName: "play")
                    .resizable()
                    .frame(width: 36, height: 40)
                    .foregroundStyle(Color.white)
                    .rotationEffect(.degrees(viewStore.angle))
                    .animation(.easeInOut(duration: 1), value: viewStore.angle)
            }
            Spacer()
        }
        .onAppear {
            viewStore.send(.angleChanged(to: 0))
        }
    }
}

}

struct SecondChildReducer: Reducer {
struct State: Equatable {
var angle = 90.0
}

enum Action: Equatable {
    case playButtonTapped
    case angleChanged(to: Double)
}

var body: some ReducerOf<Self> {
    Reduce { state, action in
        switch action {
        case .playButtonTapped:
            return .none
        case let .angleChanged(newAngle):
            state.angle = newAngle
            return .none
        }
    }
}

}

#Preview {
MainView(store: Store(initialState: MainReducer.State(), reducer: {}))
}

The Composable Architecture version information

from: 1.5.0

Destination operating system

iOS 16.0

Xcode version information

15.2

Swift Compiler version information

swift-driver version: 1.87.3 Apple Swift version 5.9.2 (swiftlang-5.9.2.2.56 clang-1500.1.0.2.5)
Target: arm64-apple-macosx14.0

[mbrandonw]

Hi @IvanMukticcc, can you please provide a project that demonstrates the behavior? The code you provided has formatting problems.

Also it is not clear from your video what exactly is not working correctly. Can you please clearly state the steps to reproduce the problem, and describe precisely what the problem is.

Since it's not clear that this is a problem with the library I am going to convert it to a discussion. Please feel free to continue the conversation over there.

[IvanMukticcc]

Hi,

Unfortunately, I cannot provide the original project as it is for a client. However, I have recreated the issue in the newest version of TCA (1.11.2), so the code should now work if you copy and paste it into an empty Swift file.

Code:

import ComposableArchitecture
import SwiftUI

@Reducer
struct MainReducer {
@ObservableState
struct State: Equatable {
var firstChildState: FirstChildReducer.State?
}

enum Action {
    case firstChildAction(FirstChildReducer.Action)
    case selectFirstChildState(FirstChildReducer.State?)
}

var body: some ReducerOf<Self> {
    Reduce { state, action in
        switch action {
        case let .selectFirstChildState(newState):
            state.firstChildState = newState
            return .none

        case .firstChildAction(.secondChildAction(.playButtonTapped)):
            return .send(.selectFirstChildState(nil))

        case .firstChildAction:
            return .none
        }
    }
    .ifLet(\.firstChildState, action: \.firstChildAction) {
        FirstChildReducer()
    }
}
}

struct MainView: View {
@Perception.Bindable
var store: StoreOf<MainReducer>

var body: some View {
    WithPerceptionTracking {
        HStack {
            List {
                ForEach(1 ..< 5, id: \.self) { num in
                    Button {
                        store.send(.selectFirstChildState(.init(number: num)))
                    } label: {
                        Text("Num: \(num)")
                    }
                }
            }
            if store.firstChildState != nil {
                if let firstChildStore = store.scope(state: \.firstChildState, action: \.firstChildAction) {
                    FirstChildView(store: firstChildStore)
                        .frame(width: UIScreen.main.bounds.width * 0.66)
                }
            } else {
                Text("Select State")
                    .frame(width: UIScreen.main.bounds.width * 0.66)
            }
        }
    }
}
}

struct FirstChildView: View {
@Perception.Bindable
var store: StoreOf<FirstChildReducer>

var body: some View {
    WithPerceptionTracking {
        VStack {
            SecondChildView(
                store: store
                    .scope(state: \.secondChildState, action: \.secondChildAction)
            )
            Spacer()
            Text("Selected store number: \(store.number)")
                .font(.system(size: 30, weight: .bold))
            Spacer()
        }
    }
}
}

@Reducer
struct FirstChildReducer {
@ObservableState
struct State: Equatable, Identifiable {
var id: UUID = .init()
var number: Int

    var secondChildState = SecondChildReducer.State()
}

enum Action {
    case secondChildAction(SecondChildReducer.Action)
}

var body: some ReducerOf<Self> {
    Scope(state: \.secondChildState, action: \.secondChildAction) {
        SecondChildReducer()
    }

    Reduce { _, action in
        switch action {
        case .secondChildAction:
            return .none
        }
    }
}
}

struct SecondChildView: View {
@Perception.Bindable
var store: StoreOf<SecondChildReducer>

var body: some View {
    WithPerceptionTracking {
        ZStack {
            Rectangle()
                .frame(height: UIScreen.main.bounds.height * 0.33)
            Button {
                store.send(.playButtonTapped)
            } label: {
                VStack(spacing: 40) {
                    Text(store.angle == 0 ? "Child of if let store animating..." : "Nothing happens")
                        .foregroundStyle(.white)
                        .font(.title)
                    Image(systemName: "play")
                        .resizable()
                        .frame(width: 36, height: 40)
                        .foregroundStyle(Color.white)
                        .rotationEffect(.degrees(store.angle))
                        .animation(.easeInOut(duration: 1), value: store.angle)
                }
            }
            Spacer()
        }
        .onAppear {
            store.send(.angleChanged(to: 0))
        }
    }
}
}

@Reducer
struct SecondChildReducer {
@ObservableState
struct State: Equatable {
var angle = 90.0
}

enum Action: BindableAction {
    case binding(BindingAction<State>)
    case angleChanged(to: Double)
    case playButtonTapped
}

var body: some ReducerOf<Self> {
    Reduce { state, action in
        switch action {
        case .playButtonTapped:
            return .none
        case let .angleChanged(newAngle):
            state.angle = newAngle
            return .none
        case .binding(_):
            return .none
        }
    }
}
}

#Preview {
MainView(store: Store(initialState: MainReducer.State(), reducer: {}))
}

1. The main view has a list of buttons that trigger an if let store (on the left side of the video) and a child view that appears when an item on the list is selected (on the right side of the video).
2. The child view on the right has another child (a black rectangle with a play button) and text under it that shows which store is selected.

Problem:
When selecting first store ( .onAppear is triggered), and button animates.
When selecting other store (.onAppear is not triggered), and button doesn't animate.

Expected behaviour:
Whenever selecting new store, play button should animate as well as 'Selected store number: '.

Simulator.Screen.Recording.-.iPad.Pro.12.9-inch.6th.generation.16GB.-.2024-07-18.at.11.32.01.mp4

[Alex293]

if store.firstChildState != nil {
    if let firstChildStore = store.scope(state: \.firstChildState, action: \.firstChildAction) {

both stay true when you replace first child with another value without first passing nil so the identity of the view state the same which means the identity of the view is the same. Which means that first view and second view are not removed / replaced when you change the selection so onAppear is not called.

This is expected from SwiftUI and not a bug in TCA.

[IvanMukticcc]

Yess, you are right, sorry for taking your time.

Do you have any idea how this problem can be solved?
I've been struggling with it for about a month and haven't found a solution.

[Alex293]

You could react to the action that changes the selection instead of relying on onAppear. This is what would make the most sense in TCA otherwise you need to use the selection to define the id the of the view. I think just adding .id(store.slection) on the view should do the trick thought this mean giving access to the selection downward

[IvanMukticcc]

Yes, this works, thank you so much!