Swift Academy · Pelajaran

Store dan Integrasi SwiftUI

Kendalikan view dari store TCA.

Pelajaran 2 dari 413 langkah

Store dan Integrasi SwiftUI adalah pelajaran Swift Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Swift Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Swift Academy mencakup 4 pelajaran total.

Apa Itu Store

Store adalah objek saat berjalan yang menyimpan State fitur Anda dan menjalankan Reducer-nya. Tampilan SwiftUI mengamati store untuk membaca keadaan dan mengirimkan tindakan kepadanya guna memicu perubahan.

Store menjadi penghubung antara logika Reducer murni dan antarmuka pengguna yang aktif serta interaktif.

import ComposableArchitecture
import SwiftUI

// A Store holds State, runs the Reducer,
// and is observed by SwiftUI views.

Nama Lain Tipe StoreOf

StoreOf<Feature> adalah nama singkat untuk store yang dikhususkan bagi tipe State dan Action suatu fitur. Sebuah tampilan biasanya menyimpannya sebagai properti tersimpan.

Jadi, tampilan penghitung menyimpan StoreOf<CounterFeature>.

import ComposableArchitecture
import SwiftUI

struct CounterView: View {
    let store: StoreOf<CounterFeature>
    var body: some View {
        Text("Count: \(store.count)")
    }
}

Membuat Store

Anda membuat store dengan penginisialisasi Store, dengan memberikan State awal dan Reducer yang akan dijalankan. Biasanya, hal ini dilakukan sekali di dekat titik masuk aplikasi.

Fungsi penutup di bagian akhir mengembalikan instans fitur Anda.

import ComposableArchitecture
import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            CounterView(
                store: Store(initialState: CounterFeature.State()) {
                    CounterFeature()
                }
            )
        }
    }
}

Membaca State Secara Langsung

Dengan pengamatan modern, tampilan membaca keadaan langsung dari store menggunakan sintaks titik, seperti store.count. Karena State menggunakan @ObservableState, SwiftUI hanya menggambar ulang bagian yang bergantung pada nilai yang berubah.

Pembungkus tambahan tidak diperlukan untuk pembacaan sederhana.

import ComposableArchitecture
import SwiftUI

struct CounterView: View {
    let store: StoreOf<CounterFeature>
    var body: some View {
        VStack {
            Text("Count: \(store.count)")
        }
    }
}

Mengirimkan Action

Untuk mengubah keadaan, tampilan mengirimkan tindakan dengan store.send(.someAction). Store meneruskan tindakan tersebut ke Reducer, yang mengubah keadaan dan mungkin memulai efek.

Di sini, tombol mengirimkan tindakan penambahan dan pengurangan.

import ComposableArchitecture
import SwiftUI

struct CounterView: View {
    let store: StoreOf<CounterFeature>
    var body: some View {
        HStack {
            Button("-") { store.send(.decrementTapped) }
            Text("\(store.count)")
            Button("+") { store.send(.incrementTapped) }
        }
    }
}

Pengikatan dari Store

Untuk kontrol SwiftUI yang memerlukan pengikatan dua arah, TCA memungkinkan Anda membuat Binding dari store ketika State menggunakan tindakan dengan pengikatan. Kontrol tersebut memperbarui keadaan dengan mengirimkan tindakan pengikatan.

Di sini, TextField terikat pada bidang nama.

import ComposableArchitecture
import SwiftUI

struct FormView: View {
    @Bindable var store: StoreOf<FormFeature>
    var body: some View {
        TextField("Name", text: $store.name)
    }
}

WithViewStore Lama

Sebelum pengamatan tersedia, tampilan membungkus antarmuka penggunanya dengan WithViewStore untuk membaca State dan mendapatkan viewStore guna mengirimkan tindakan. Anda masih akan melihat pola ini dalam kode lama.

Fungsi penutup observe memilih keadaan yang menjadi dependensi tampilan.

import ComposableArchitecture
import SwiftUI

struct LegacyCounter: View {
    let store: StoreOf<CounterFeature>
    var body: some View {
        WithViewStore(store, observe: { $0 }) { viewStore in
            Text("Count: \(viewStore.count)")
        }
    }
}

Memilih yang Diamati

Dalam gaya lama, fungsi penutup observe mempersempit keadaan yang diawasi tampilan, sehingga tampilan hanya digambar ulang ketika nilai-nilai tersebut berubah. Mengamati seluruh keadaan adalah cara paling sederhana; mengamati sebagian keadaan mengoptimalkan tampilan yang besar.

@ObservableState modern menangani hal ini secara otomatis, tetapi memahami observe membantu saat membaca kode lama.

import ComposableArchitecture
import SwiftUI

// Observe just the count to limit re-renders:
WithViewStore(store, observe: { $0.count }) { viewStore in
    Text("\(viewStore)")
}

Mengirimkan Action dengan Muatan

Action yang membawa nilai terkait dikirimkan dengan menyertakan nilainya. Dengan cara inilah tampilan meneruskan masukan pengguna yang dibutuhkan Reducer.

Di sini, memilih sebuah baris mengirimkan pengenal yang dipilih.

import ComposableArchitecture
import SwiftUI

struct ListView: View {
    let store: StoreOf<ListFeature>
    var body: some View {
        Button("Pick 42") {
            store.send(.rowSelected(id: 42))
        }
    }
}

Menganimasikan Action

Anda dapat melampirkan animasi pada tindakan yang dikirim agar perubahan keadaan yang dihasilkan berlangsung dengan animasi. Berikan argumen animation kepada send.

Dengan begitu, urusan animasi tetap berada di lokasi pemanggilan, sementara keadaan tetap berupa data biasa.

import ComposableArchitecture
import SwiftUI

Button("Toggle") {
    store.send(.toggleTapped, animation: .default)
}

Menyusun Tampilan

Tampilan TCA yang lengkap menyimpan StoreOf, membaca keadaan dengan sintaks titik, dan mengirimkan tindakan dari berbagai kontrol. Reducer menangani sisanya, sehingga tampilan tetap ringkas dan deklaratif.

Pemisahan inilah yang membuat tampilan TCA mudah dibaca dan dipratinjau.

import ComposableArchitecture
import SwiftUI

struct CounterView: View {
    let store: StoreOf<CounterFeature>
    var body: some View {
        VStack {
            Text("Count: \(store.count)")
            Button("Increment") { store.send(.incrementTapped) }
        }
    }
}

Pemeriksaan Singkat: Mengendalikan Antarmuka Pengguna

Ingat kembali cara tampilan SwiftUI memicu perubahan keadaan dalam TCA.

Jawab di pelajaran interaktif

Ringkasan: Store dan SwiftUI

Anda telah menghubungkan sebuah fitur ke SwiftUI:

StoreOf<Feature> menyimpan State dan menjalankan Reducer.
Anda membuat store dengan State awal dan Reducer fitur.
Pengamatan modern memungkinkan Anda membaca keadaan dengan sintaks titik seperti store.count.
Tampilan mengubah keadaan dengan memanggil store.send(.action), secara opsional dengan muatan atau animasi.
WithViewStore lama beserta fungsi penutup observe-nya muncul dalam kode lama.

Selanjutnya, Anda akan memberikan efek samping dan dependensi yang dapat disuntikkan kepada Reducer.

import ComposableArchitecture
import SwiftUI

// Recap: StoreOf holds state, view reads with dot syntax,
// store.send(.action) drives every change.

Gratis untuk memulai

Belajar Swift dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 122
Pelajaran: 409

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Store dan Integrasi SwiftUI” gratis?

Ya — teks lengkap “Store dan Integrasi SwiftUI” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Swift Academy, upgrade ke CoddyKit PRO. Kursus Swift Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Store dan Integrasi SwiftUI”?

Kendalikan view dari store TCA. Kamu berlatih Swift Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Swift Academy?

Tidak diperlukan pengalaman sebelumnya. Swift Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Store dan Integrasi SwiftUI” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Swift Academy ini?

Ya. Setiap pelajaran Swift Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Swift Academy