SwiftUI Composable Architecture视图不更新问题求助

核心问题分析 #

1. Recipe的Equatable实现不完整：当前仅通过id判断相等，导致即使属性（标题、描述等）变化，TCA仍认为两个Recipe实例相等，无法检测到状态变更。
2. Reducer更新数组元素的方式错误：直接修改数组内struct的属性，没有生成新的实例，结合Equatable的问题，State的recipes数组未被判定为变化。
3. 视图状态订阅方式不当：如果RecipeDetailView直接持有Recipe实例而非从ViewStore实时订阅，即使全局状态更新，视图也无法感知。

具体修复步骤 #

1. 修复Recipe的Equatable实现

移除自定义的==方法，让Swift自动合成完整的Equatable实现（需确保所有关联类型如Ingredient也实现Equatable）：

struct Recipe: Identifiable, Equatable, Hashable {
    var id: UUID = UUID()
    var title: String
    var caption: String
    var ingredients: [Ingredient]
    var directions: [String]
    
    // 移除自定义==，Swift会自动对比所有属性
}

// 确保Ingredient实现Equatable
struct Ingredient: Equatable, Hashable {
    // 你的Ingredient属性定义
}

2. 修改Reducer中更新数组的逻辑

直接用新的Recipe实例替换数组中的旧元素，而非手动修改属性：

case .createOrUpdateRecipe(let recipe):
    if let index = state.recipes.firstIndex(of: recipe) {
        // 直接替换整个元素，触发状态变更检测
        state.recipes[index] = recipe
    } else {
        state.recipes.append(recipe)
    }
    return .none

注：你的viewModel.createUpdatedRecipe()已经返回了更新后的Recipe实例，直接替换即可。

3. 确保视图通过ViewStore订阅状态

所有展示Recipe数据的视图，都应通过ViewStore从全局State中获取最新数据，而非直接持有静态实例。

RecipeDetailView示例：

struct RecipeDetailView: View {
    let store: RecipeStore
    let recipeId: UUID

    var body: some View {
        WithViewStore(store) { viewStore in
            if let recipe = viewStore.state.recipes.first(where: { $0.id == recipeId }) {
                VStack(alignment: .leading) {
                    Text(recipe.title)
                        .font(.largeTitle)
                    Text(recipe.caption)
                        .font(.subheadline)
                    // 其他详情UI
                }
            }
        }
    }
}

RecipeListView示例：

struct RecipeListView: View {
    let store: RecipeStore

    var body: some View {
        WithViewStore(store) { viewStore in
            List(viewStore.state.recipes) { recipe in
                NavigationLink(
                    destination: RecipeDetailView(store: store, recipeId: recipe.id)
                ) {
                    Text(recipe.title)
                }
            }
            .onAppear {
                viewStore.send(.onAppear)
            }
        }
    }
}

验证效果 #

完成上述修改后，编辑食谱并关闭Sheet时，TCA会正确检测到recipes数组的状态变化，所有订阅ViewStore的视图（RecipeListView、RecipeDetailView）都会自动刷新，展示最新的食谱数据。

内容的提问来源于stack exchange，提问作者Infinity_Matrix