Observation Framework trong 10 phút

extension EnvironmentValues {

    var store: Store {
        get { self[CustomStoreKey.self] }
        set { self[CustomStoreKey.self] = newValue }
    }
    
}

Các View sẽ truy cập tới thông qua KeyPath là store nhóe! Còn cách dùng tại các View thì như sau:

struct ContentView: View {
    @Environment(\.store) private var store
    
    var body: some View {
        Text("Count: \(store.count)")
        Button("Tap +1") {
            store.count += 1
        }
        .buttonStyle(.bordered)
    }
}

Đây là cách bạn sử dụng giá trị mặc định của biến môi trường nhóe. Kết quả tại Preview như sau:

Còn muốn cung cấp một giá trị khác từ một store cho biến môi trường, thì bạn có thể truyền nó từ Root.

@main
struct ObservationDemoApp: App {
    
    @State private var myStore = Store(count: 9999)
    
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environment(\.store, myStore)
        }
    }
}

Bây giờ, ContentView đã sử dụng giá trị mới là myStore. Bạn nhớ build lên để test nha, chứ đừng thắc mắc tại sao Preview của nó vẫn không thay đổi.

Environment Object

Các thứ 2 thì đơn giản hơn nhiều. Bớt tạo thêm file hay thêm các struct. Bạn có thể khai báo một thuộc tính của view là biến môi trường với wrapper properties @Environment. Ví dụ như sau:

struct SecondView: View {
    
    @Environment(Store.self) var store
    
    var body: some View {
        Text("Count: \(store.count)")
        Button("+1") {
            store.count += 1
        }
    }
}

#Preview {
    var testStore = Store(count: 8888)
    
    return SecondView()
        .environment(testStore)
}

Trong đó:

• Thuộc tính store của SecondView là một thuộc tính với kiểu là biến môi trường
• Khi muốn gán giá trị cho thuộc tính, bạn sử dụng modifier là .environment() và truyền giá trị vào

Tuy nhiên, cách này sẽ không an toàn, nếu bạn không gọi modifier & xét giá trị cho nó. Dẫn tới ứng dụng sẽ bị crash. Do đó, bạn cần thận trọng khi sử dụng cách này nha. Đây là giải pháp khi đưa chúng về Optional.

struct SecondView: View {
    
    @Environment(Store.self) var store: Store?
    
    var body: some View {
        if let count = store?.count {
            Text("Count: \(count)")
            Button("+1") {
                store?.count += 1
            }
        } else {
            Text("N/A")
        }
    }
}

#Preview {
    return SecondView()    
}

Ta không cần gọi và truyền giá trị tại Preview, còn SecondView vẫn hiển thị đẹp và mướt lắm.

Passing Observable Object

Nếu bạn vẫn cảm thấy ở trên quá trời phức tạp, thì hãy quay về cách truyền dữ liệu truyền thống. Khi truyền một đối tượng Observable Object thì cũng tương tự như bao đối tượng khác. Xem ví dụ nha!

struct ThirdView: View {
    
    @State var store = Store()
    
    var body: some View {
        SubThirdView(store: store)
    }
}

struct SubThirdView: View {
    let store : Store
    
    var body: some View {
        Text("Count: \(store.count)")
        Button("Tap +1") {
            store.count += 1
        }
        .buttonStyle(.bordered)
    }
}

Trong đó:

• Đối tượng Observable Object được truyền từ ThirdView sang SubThirdView trong hàm khởi tạo
• Với khai báo @State cho store để đảm bảo việc dữ liệu tập trung ở một nguồn duy nhất

Khi bạn tương tác dữ liệu, bạn sẽ thấy chúng ta chỉ cần thay đổi store.count +=1 và không làm gì thêm cả. Kể cả việc hiển thị dữ liệu lên Text cũng không cần truy xuất ngược lại. Một khi giá trị thuộc tính count thay đổi, đối tượng Observable sẽ phát giá trị đi tới các View đang sử dụng. Khi đó, các View sẽ tự động thay đổi lại việc hiển thị.

Đây là cái hay của SwiftUI à. Quá đơn giản!

Bindable

Đây là một wrapper property mà hỗ trợ việc tạo liên kết 2 chiều (Binding two-way) với các thuộc tính có thể thay đổi được của các Observable Object. Bạn sẽ sử dụng cho những thành phần cần có loại liên kết (Binding) trước khi nó có thể thay đổi giá trị, ví dụ: TextField. Khi làm việc với các thành phần đó, bạn cần sử dụng Wrapper Property @Bindable trước var và let.

Ví dụ code:

struct CounterView: View {
    
    @Bindable var store = Store()
    
    var body: some View {
        VStack {
            VStack(alignment: .leading) {
                Text("Name: \(store.name)")
                Text("Count: \(store.count)")
                Button("Tap +1") {
                    store.count += 1
                }
                .buttonStyle(.bordered)
            }
            .padding(10)
            SubCounterView(store: store)
        }
        .padding(10)
    }
}

struct SubCounterView: View {
    
    @Bindable var store: Store
    
    var body: some View {
        TextField("", text: $store.name)
            .padding(10)
            .background(Color.accentColor)
    }
}

Thêm thuộc tính name kiểu String cho Store và tiến hành liên kết với một TextField ở một View con khác. Mọi thức vẫn hoạt động mượt lắm.

Còn ví dụ, bạn chỉ cần Binding ở cục bộ một vài chỗ và không muốn khai báo với @Bindable cho thuộc tính. Thì bạn vẫn có thể sử dụng chúng ở các View cục bộ nhóe. Xem qua ví dụ code tiếp nha:

struct ContentView: View {
    var store: Store
    
    var body: some View {
        @Bindable var bindableStore = store

        TextField("Name", text: $bindableStore.name)

    }
}

Phần cuối này, bạn tự suy nghĩ vào tạo demo code nha. Ahihi!

Tạm kết

• Observation Framework tạo ra chuẩn và cách mạng hóa việc phát triển với các Observable Object cho kiểu tham chiếu
• Đơn giản & giải pháp thay thế cho các cơ chế trước đây như KVO hay Combine
• Kết hợp với SwiftUI để cải thiện hiệu năng & tương tác với người dùng tốt hơn

Tham khảo:

• Migrating from the Observable Object protocol to the Observable macro
• Managing model data in your app

Okay! Tới đây, mình xin kết thúc bài viết giới thiệu về Observation Framework . Nếu có gì thắc mắc hay góp ý cho mình, thì bạn có thể để lại bình luận hoặc gửi email theo trang Contact.

Cảm ơn bạn đã đọc bài viết này!