Swift Academy · Ders

Store ve SwiftUI Entegrasyonu

Görünümleri bir TCA store'undan yönlendirin.

2. ders / 413 adım

Store ve SwiftUI Entegrasyonu, CoddyKit'te ücretsiz bir Swift Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Swift Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Swift Academy kursu toplamda 4 dersten oluşur.

Bir Depo Nedir

Depo, özelliğinizin durumunu tutan ve indirgeyicisini çalıştıran çalışma zamanı nesnesidir. Bir SwiftUI görünümü, durumu okumak için bir depoyu gözlemler ve değişiklikleri tetiklemek için ona eylemler gönderir.

Depo, saf indirgeyici mantığınız ile canlı ve etkileşimli kullanıcı arayüzü arasındaki köprüdür.

import ComposableArchitecture
import SwiftUI

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

StoreOf Tür Takma Adı

StoreOf<Feature>, bir özelliğin durum ve eylem türlerine özelleştirilmiş depo için kullanışlı bir takma addır. Bir görünüm genellikle bunu saklanan bir özellik olarak tutar.

Dolayısıyla bir sayaç görünümü StoreOf<CounterFeature> tutar.

import ComposableArchitecture
import SwiftUI

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

Depo Oluşturma

Başlangıç durumunu ve çalıştırılacak indirgeyiciyi sağlayarak Store başlatıcısıyla bir depo oluşturursunuz. Bu işlem genellikle uygulamanın giriş noktasının yakınında bir kez yapılır.

Sondaki kapanış, özelliğinizin bir örneğini döndürür.

import ComposableArchitecture
import SwiftUI

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

State'i Doğrudan Okuma

Modern gözlemlemeyle görünüm, store.count gibi nokta söz dizimini kullanarak durumu doğrudan depodan okur. Durum @ObservableState olduğu için SwiftUI yalnızca değişen değerlere bağlı bölümleri yeniden oluşturur.

Basit okumalar için ek bir sarmalayıcı gerekmez.

import ComposableArchitecture
import SwiftUI

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

Action Gönderme

Durumu değiştirmek için görünüm, store.send(.someAction) ile bir eylem gönderir. Depo, eylemi indirgeyiciye iletir; indirgeyici de durumu değiştirir ve etkiler başlatabilir.

Burada düğmeler artırma ve azaltma eylemleri gönderir.

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) }
        }
    }
}

Depodan Bağlamalar

İki yönlü bağlamalara ihtiyaç duyan SwiftUI denetimleri için TCA, durum bağlanabilir eylemler kullandığında depodan bir Binding türetmenize olanak tanır. Denetim, bir bağlama eylemi göndererek durumu günceller.

Burada bir TextField, ad alanına bağlanır.

import ComposableArchitecture
import SwiftUI

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

Eski WithViewStore

Gözlemleme özelliğinden önce görünümler, kullanıcı arayüzlerini WithViewStore ile sarar; böylece durumu okumak ve eylem göndermek için bir viewStore elde ederdi. Bunu eski kodlarda hâlâ görebilirsiniz.

observe kapanışı, görünümün bağlı olduğu durumu seçer.

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)")
        }
    }
}

Gözlenecek Öğeleri Seçme

Eski tarzda observe kapanışı, görünümün izlediği durumu daraltır; böylece görünüm yalnızca bu değerler değiştiğinde yeniden oluşturulur. Tüm durumu gözlemlemek en basit seçenektir; bir alt kümeyi gözlemlemek büyük görünümleri iyileştirir.

Modern @ObservableState bunu otomatik olarak yapar, ancak observe kavramını anlamak eski kodları okurken yardımcı olur.

import ComposableArchitecture
import SwiftUI

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

Veri Taşıyan Action'ları Gönderme

İlişkili değer taşıyan eylemler, değer sağlanarak gönderilir. Görünümün, indirgeyicinin ihtiyaç duyduğu kullanıcı girdisini iletme yöntemi budur.

Burada bir satır seçildiğinde seçilen kimlik gönderilir.

import ComposableArchitecture
import SwiftUI

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

Action'ları Canlandırma

Gönderilen bir eyleme animasyon ekleyerek ortaya çıkan durum değişikliğinin canlandırılmasını sağlayabilirsiniz. send çağrısına bir animation bağımsız değişkeni aktarın.

Bu yaklaşım, durum düz veriler olarak kalırken animasyonla ilgili sorumlulukları çağrı noktasında tutar.

import ComposableArchitecture
import SwiftUI

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

Görünümü Bir Araya Getirme

Tam bir TCA görünümü bir StoreOf tutar, durumu nokta söz dizimiyle okur ve denetimlerden eylemler gönderir. Geri kalanını indirgeyici yapar; böylece görünüm yalın ve bildirimsel kalır.

Bu ayrım, TCA görünümlerinin okunmasını ve önizlenmesini kolaylaştırır.

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) }
        }
    }
}

Hızlı Kontrol: Kullanıcı Arayüzünü Yönlendirme

Bir SwiftUI görünümünün TCA'de durum değişikliğini nasıl tetiklediğini hatırlayın.

İnteraktif derste cevapla

Özet: Depo ve SwiftUI

Bir özelliği SwiftUI'ye bağladınız:

Bir StoreOf<Feature>, durumu tutar ve indirgeyiciyi çalıştırır.
Bir depoyu başlangıç durumu ve özellik indirgeyicisiyle oluşturursunuz.
Modern gözlemleme, store.count gibi nokta söz dizimiyle durumu okumanıza olanak tanır.
Görünümler, isteğe bağlı olarak bir veri veya animasyonla birlikte store.send(.action) çağrısını yaparak durumu değiştirir.
Eski WithViewStore ve onun observe kapanışı, eski kodlarda görülür.

Sonraki adımda indirgeyicinize yan etkiler ve enjekte edilebilir bağımlılıklar sağlayacaksınız.

import ComposableArchitecture
import SwiftUI

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

Başlamak ücretsiz

Yapay zeka eğitmeniyle Swift öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 122
Dersler: 409

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Store ve SwiftUI Entegrasyonu” dersi ücretsiz mi?

Evet — “Store ve SwiftUI Entegrasyonu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Swift Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Swift Academy kursu toplamda 4 dersten oluşur.

“Store ve SwiftUI Entegrasyonu” dersinde ne öğreneceğim?

Görünümleri bir TCA store'undan yönlendirin. Swift Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Swift Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Swift Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Store ve SwiftUI Entegrasyonu” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Swift Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Swift Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Swift Academy Sayfasına Dön