wrapped views in withPerceptionTracking

Author: Coleton Gorecke

ComposableArch-Example/AddContactFeature.swift

@@ -59,20 +59,22 @@ struct AddContactView: View {
     @Perception.Bindable var store: StoreOf<AddContactFeature>
 
     var body: some View {
-        VStack {
-            Form {
-                TextField("Name", text: $store.contact.name.sending(\.setName))
+        WithPerceptionTracking {
+            VStack {
+                Form {
+                    TextField("Name", text: $store.contact.name.sending(\.setName))
+                }
             }
-        }
-        .safeAreaInset(edge: .bottom) {
-            Button("Save") {
-                store.send(.saveButtonTapped)
+            .safeAreaInset(edge: .bottom) {
+                Button("Save") {
+                    store.send(.saveButtonTapped)
+                }
             }
-        }
-        .toolbar {
-            ToolbarItem {
-                Button("Cancel") {
-                    store.send(.cancelButtonTapped)
+            .toolbar {
+                ToolbarItem {
+                    Button("Cancel") {
+                        store.send(.cancelButtonTapped)
+                    }
                 }
             }
         }

ComposableArch-Example/ComposableArch_ExampleApp.swift

@@ -12,7 +12,6 @@ import SwiftUI
 struct ComposableArch_ExampleApp: App {
     static let store = Store(initialState: AppFeature.State()) {
         AppFeature()
-            ._printChanges()
     }
 
     var body: some Scene {

ComposableArch-Example/ContactDetailFeature.swift

@@ -68,13 +68,15 @@ struct ContactDetailView: View {
     @Perception.Bindable var store: StoreOf<ContactDetailFeature>
 
     var body: some View {
-        Form {
-            Button("Delete") {
-                store.send(.deleteButtonTapped)
+        WithPerceptionTracking {
+            Form {
+                Button("Delete") {
+                    store.send(.deleteButtonTapped)
+                }
             }
+            .navigationBarTitle(Text(store.contact.name))
+            .alert($store.scope(state: \.alert, action: \.alert))
         }
-        .navigationBarTitle(Text(store.contact.name))
-        .alert($store.scope(state: \.alert, action: \.alert))
     }
 }
 

ComposableArch-Example/ContactsFeature.swift

@@ -100,47 +100,49 @@ struct ContactsView: View {
     @Perception.Bindable var store: StoreOf<ContactsFeature>
 
     var body: some View {
-        NavigationStack(
-            path: $store.scope(state: \.path, action: \.path)
-        ) {
-            List {
-                ForEach(store.contacts) { contact in
-                    NavigationLink(state: ContactDetailFeature.State(contact: contact)) {
-                        HStack {
-                            Text(contact.name)
-                            Spacer()
-                            Button {
-                                store.send(.deleteButtonTapped(id: contact.id))
-                            } label: {
-                                Image(systemName: "trash")
-                                    .foregroundColor(.red)
+        WithPerceptionTracking {
+            NavigationStack(
+                path: $store.scope(state: \.path, action: \.path)
+            ) {
+                List {
+                    ForEach(store.contacts) { contact in
+                        NavigationLink(state: ContactDetailFeature.State(contact: contact)) {
+                            HStack {
+                                Text(contact.name)
+                                Spacer()
+                                Button {
+                                    store.send(.deleteButtonTapped(id: contact.id))
+                                } label: {
+                                    Image(systemName: "trash")
+                                        .foregroundColor(.red)
+                                }
                             }
                         }
+                        .buttonStyle(.borderless)
                     }
-                    .buttonStyle(.borderless)
                 }
-            }
-            .navigationTitle("Contacts")
-            .toolbar {
-                ToolbarItem {
-                    Button {
-                        store.send(.addButtonTapped)
-                    } label: {
-                        Image(systemName: "plus")
+                .navigationTitle("Contacts")
+                .toolbar {
+                    ToolbarItem {
+                        Button {
+                            store.send(.addButtonTapped)
+                        } label: {
+                            Image(systemName: "plus")
+                        }
                     }
                 }
+            } destination: { store in
+                ContactDetailView(store: store)
             }
-        } destination: { store in
-            ContactDetailView(store: store)
-        }
-        .sheet(
-            item: $store.scope(state: \.destination?.addContact, action: \.destination.addContact)
-        ) { addContactStore in
-            NavigationStack {
-                AddContactView(store: addContactStore)
+            .sheet(
+                item: $store.scope(state: \.destination?.addContact, action: \.destination.addContact)
+            ) { addContactStore in
+                NavigationStack {
+                    AddContactView(store: addContactStore)
+                }
             }
+            .alert($store.scope(state: \.destination?.alert, action: \.destination.alert))
         }
-        .alert($store.scope(state: \.destination?.alert, action: \.destination.alert))
     }
 }