Tổng quan về State & Data Flow – SwiftUI Notes #32

Tóm tắt

• Vì nó quá cồng kềnh nên nó là vấn đề chính
• Luôn phải đảm bảo cho UI & Model phải đồng bộ với nhau
• Trạng thái dữ liệu không phải lúc nào cũng đồng bộ với UI
• Từ View bạn có thể thay đổi trạng thái dữ liệu & model
• Rất dễ phát sinh lỗi

2. Một giao diện cũng là một chức năng

Ở trên, bạn sẽ đọc qua khái niệm trạng thái của giao diện. Và bạn thử suy nghĩ “sẽ như thế nào khi giao diện của bạn trở thành một chức năng (function).”

Sẽ giảm đi rất nhiều việc tạo thêm các biến để lưu trữ và truyền dữ liệu từ thành phần này sang thành phần khác. Loại bỏ đi các điều kiện kiểm tra. Như là cho phép 1 view được hiển thị hay không, hoặc phụ thuộc vào 1 hay 1 vài điều kiện nhất định.

Ví dụ: nếu đang kết nối API thì cờ là true , thì hiển thị loading view . Kết thúc kết nối thì cờ lại là false, khi đó loadingView sẽ biến mất.

Hay nhất, bạn không cần phải ghi nhớ việc thường xuyên cập nhật lại giao diện khi có sự thay đổi dữ liệu. Ví dụ: có nhiều chỗ trong màn hình có thể tương tác với API, thì phải đảm bảo việc cập nhật giao diện tại tất cả các điểm đó.

Ngoài ra,

• Giảm đi các tham chiếu và các tham chiếu của các closure đi khá nhiều
• View sẽ xuất hiện giống như với dữ liệu ban đầu và cập nhật giống như dữ liệu được cập nhật.

Những điểm trên thì không giúp bạn giỏi lên đâu, nếu bạn quản lý tốt các liên kết và cập nhật đồng bộ giữa các thành phần thì MVC vẫn là bá chủ. Nhưng mà thay đổi một chút để vui vẻ hơn, đơn giản hơn và ít bugs hơn.

Cần gì để thực hiện được điều này?

SwiftUI hội tụ đầy đủ các yếu tố mà bạn cận để làm một cuộc cách mạng

• Declarative : bạn không triển khai (implement) giao diện mà là khai báo chúng (declare)
• Functional : giao diện là một function của trạng thái
• Reactive: khi có thay đổi, giao diện sẽ tự động cập nhật

Ahihi!

3. Tổng quan về State & Data Flow

SwiftUI cung cấp một cách tiếp cận Declarative cho UI design. Bạn sẽ thiết kế nên sự phân cấp trong hệ thống các view và chỉ ra sự phụ thuộc giữa dữ liệu & View. Khi có tác động của người dùng thì SwiftUI sẽ cập nhật lại các phần giao diện bị ảnh hưởng. Framework này sẽ đảm đương hầu hết các công việc như một View Controller (lúc trước)

SwiftUI cung cấp cho bạn nhiều công cụ, như biến trạng thái, binding … để kết nỗi giữa dữ liệu và giao diện. Tất cả công cụ này giúp duy trì một thứ gọi là The single source of truth cho tất cả các dữ liệu trong app. Và giảm đi một phần logic của bạn viết.

Trong đó, các thành phần tạo nên thứ gọi là State & Data Flow thì như sau:

• Quản lý các trạng thái của UI trong chính View của nó bằng các thuộc tính State
• Kết nối với các dữ liệu model tham chiếu bên ngoài thông qua Observable Protocol và các thuộc tính ObserverObject
• Truy cập tới các đối tượng có thể quan sát được từ mô trường thông qua các thuộc tính EnvironmentObject
• Tạo ra một đối tượng có thể quan sát được ở trong View bằng thuộc tính StateObject
• Chia sẽ các tham chiếu tới The single source of truth (tương tự như các đối tượng tham chiếu quan sát được ở trên) thông qua các thuộc tính Binding
• Truyền dữ liệu đi trong toàn bộ app thông qua các biến Environment
• Truyền dữ liệu đi qua hệ thống phân cấp View bằng PreferenceKey
• Sử dụng FetchRequest để tương tác với CoreData

4. Sức mạnh của các Property Wrappers

Như đã nói ở trên, công cụ mà SwiftUI cung cấp cho bạn chính là các Property Wrappers. Giúp bạn quản lý dữ liệu của các biến State hay Binding. Để áp dụng thì khá là đơn giản, bạn chỉ cần thêm tên của Property Wrappers vào trước các thuộc tính của bạn.

Ví dụ, khi muốn biến một thuộc tính Bool thành một kiểu State với Property Wrappers như sau:

@State private var isVisible = true

Các thuộc tính mà được bọc với Property Wrappers thì sẽ mang các đặc tính của Property Wrappers đó. Các State & Data đó sẽ theo dõi các thay đổi dữ liệu. Khi bạn tham chiếu trực tiếp tới thuộc tính trong code, bạn có thể sử dụng trực tiếp được giá trị của nó.

Ví dụ code tham khảo tiếp nha.

if isVisible == true {
    Text("Hello") // Only rendered when isVisible is true.
}

Ngoài ra, khi bạn truy cập giá trị của một Property Wrapper bằng tiền tố $ thì bạn sẽ tạo ra một tham chiếu Binding. Là một kết nối 2 chiều giữa View khác (ở bên ngoài) và The single source of truth.

Ví dụ tiếp nữa nè.

Toggle("Visible", isOn: $isVisible) // The toggle can update the stored value.

Bạn yên tâm là chúng ta sẽ tìm hiểu tất cả Property Wrapper của SwiftUI trong các bài viết sau. Còn nếu bạn muốn tìm hiểu riêng về Wrapper trong Swift, thì có thể tham khảo tại đây.

Tạm kết

• Biết được các vấn đề còn tồn tại trong MVC
• Sự đồng bộ giữa trạng thái dữ liệu và giao diện của ứng dụng
• Tổng qua về State & Data Flow trong SwiftUI
• Sức mạnh về các Property Wrapper mang lại