Redux seperti wadah negara di SwiftUI. Rekomendasi

gambar

Minggu lalu kita berbicara tentang kontainer negara seperti Redux di SwiftUI . Redux menyediakan satu sumber nilai kebenaran yang mencegah sejumlah besar potensi kesalahan yang dapat terjadi di berbagai negara aplikasi. Minggu ini kita akan berbicara tentang metode yang telah terbukti untuk membuat aplikasi berbasis Redux yang akan membuat basis kode kita sederhana dan bebas kesalahan.

Normalisasi


Konsep Redux memiliki objek toko yang berisi keadaan seluruh aplikasi dan ini berfungsi sebagai satu sumber nilai kebenaran untuk aplikasi kita. Ini memungkinkan kami untuk menyinkronkan antarmuka pengguna dengan keadaan aplikasi. Tetapi untuk mencapai ini, pertama, perlu untuk menormalkan keadaan. Perhatikan contoh kode berikut.

struct AppState { var allTasks: [Task] var favorited: [Task] } 

Ada struktur AppState yang menyimpan daftar tugas sederhana dan yang dipilih. Ini terlihat sederhana, tetapi memiliki satu kelemahan besar. Misalkan ada layar pengeditan tugas di mana Anda dapat mengubah tugas yang dipilih. Setiap kali pengguna mengklik tombol "Simpan", kita perlu menemukan dan kemudian memperbarui tugas tertentu dalam daftar allTasks (semua tugas), dan dalam daftar tugas yang disukai (dipilih). Ini dapat menyebabkan kesalahan dan masalah kinerja jika daftar tugas terlalu besar.

Mari kita sedikit meningkatkan kinerja aplikasi dengan menormalkan struktur keadaan. Pertama-tama, kita harus menyimpan tugas kita dalam Kamus , di mana pengidentifikasi tugas adalah kuncinya, dan tugas itu sendiri adalah nilainya. Kamus dapat memperoleh nilai kunci untuk waktu yang konstan (O (1)) , tetapi pada saat yang sama, itu tidak mempertahankan ketertiban. Dalam hal ini, Anda dapat membuat array dengan pengidentifikasi untuk mempertahankan pesanan. Sekarang mari kita lihat keadaan yang berubah setelah normalisasi.

 struct AppState { var tasks: [Int: Task] var allTasks: [Int] var favorited: [Int] } 

Seperti ditunjukkan dalam contoh di atas, tugas disimpan dalam Kamus, di mana id pengidentifikasi tugas adalah kuncinya, dan tugas itu sendiri adalah nilainya. Array pengidentifikasi disimpan untuk semua tugas dan tugas yang dipilih. Kami mencapai tingkat stabilitas yang menyinkronkan antarmuka pengguna dan data.

Keadaan Komposisi


Sangat alami untuk menyimpan status aplikasi Anda dalam satu struktur tunggal, tetapi itu bisa meledak begitu Anda menambahkan semakin banyak bidang ke struktur status. Kita dapat menggunakan status komposisi untuk menyelesaikan masalah ini. Mari kita lihat sebuah contoh.

 struct AppState { var calendar: CalendarState var trends: TrendsState var settings: SettingState } 

Dalam contoh kode di atas, kami membagi negara kami menjadi tiga bagian terpisah dan menggabungkannya menjadi AppState.

Peredam Komposisi


Komponen penting lain dari wadah keadaan seperti Redux adalah Reducer itu sendiri. Ini dapat diekstraksi dan digabungkan, seperti halnya dengan struktur keadaan. Ini akan memungkinkan kami untuk mematuhi prinsip Tanggung Jawab Tunggal dan mempertahankan objek seperti pengecil ukuran kecil.

 enum AppAction { case calendar(action: CalendarAction) case trends(action: TrendsAction) } let trendsReducer: Reducer<TrendsState, TrendsAction> = Reducer { state, action in // Implement your state changes here } let calendarReducer: Reducer<CalendarState, CalendarAction> = Reducer { state, action in // Implement your state changes here } let appReducer: Reducer<AppState, AppAction> = Reducer { state, action in switch action { case let .calendar(action): calendarReducer.reduce(&state.calendar, action) case let .trends(action): trendsReducer.reduce(&state.trends, action) } } 

Kesimpulan


Hari ini kita berbicara tentang dua strategi penting yang harus kita gunakan ketika mengembangkan aplikasi menggunakan wadah negara seperti Redux di SwiftUI. Normalisasi dan integrasi membuat aplikasi yang dibuat lebih sederhana dan lebih mudah dipahami. Saya harap Anda menikmati artikel ini.

Terima kasih telah membaca dan melihat Anda minggu depan!

Source: https://habr.com/ru/post/id476924/


All Articles