Swift Academy · Lektion

Der Store und die SwiftUI-Integration

Steuern Sie Views aus einem TCA-Store.

Der Store und die SwiftUI-Integration ist eine kostenlose Swift Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Swift Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist ein Store?

Der Store ist das Laufzeitobjekt, das den State Ihres Features enthält und dessen Reducer ausführt. Eine SwiftUI-View beobachtet einen Store, um den State zu lesen, und sendet Actions an ihn, um Änderungen auszulösen.

Der Store bildet die Brücke zwischen Ihrer reinen Reducer-Logik und der laufenden, interaktiven Benutzeroberfläche.

import ComposableArchitecture
import SwiftUI

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

Der StoreOf-Typpseudonym

StoreOf<Feature> ist ein praktisches Typpseudonym für einen Store, der auf die State- und Action-Typen eines Features spezialisiert ist. Eine View enthält normalerweise einen solchen Store als gespeicherte Eigenschaft.

Eine Counter-View speichert also einen StoreOf<CounterFeature>.

import ComposableArchitecture
import SwiftUI

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

Einen Store erstellen

Sie erstellen einen Store mit dem Initializer von Store und übergeben den initialen State sowie den auszuführenden Reducer. Üblicherweise geschieht dies einmal in der Nähe des Einstiegspunkts der App.

Die abschließende Closure gibt eine Instanz Ihres Features zurück.

import ComposableArchitecture
import SwiftUI

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

State direkt lesen

Mit der modernen Beobachtung liest eine View den State direkt aus dem Store, indem sie die Punktnotation verwendet, zum Beispiel store.count. Da der State mit @ObservableState markiert ist, rendert SwiftUI nur die Teile neu, die von geänderten Werten abhängen.

Für einfache Lesezugriffe ist kein zusätzlicher Wrapper erforderlich.

import ComposableArchitecture
import SwiftUI

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

Actions senden

Um den State zu ändern, sendet eine View eine Action mit store.send(.someAction). Der Store übergibt die Action an den Reducer, der den State verändert und möglicherweise Effects startet.

Hier senden Buttons Actions zum Erhöhen und Verringern.

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

Bindings aus dem Store

Für SwiftUI-Steuerelemente, die bidirektionale Bindings benötigen, können Sie in TCA ein Binding aus dem Store ableiten, wenn der State bindbare Actions verwendet. Das Steuerelement aktualisiert den State, indem es eine Binding-Action sendet.

Hier wird ein TextField an ein Namensfeld gebunden.

import ComposableArchitecture
import SwiftUI

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

Das ältere WithViewStore

Vor der Einführung der Beobachtung verpackten Views ihre Benutzeroberfläche in WithViewStore, um den State zu lesen und einen viewStore zum Senden von Actions zu erhalten. In älterem Code werden Sie dies weiterhin sehen.

Die observe-Closure wählt aus, von welchem Teil des States die View abhängt.

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

Auswahl der zu beobachtenden Werte

Im älteren Stil schränkt die observe-Closure den von der View beobachteten State ein. Dadurch wird sie nur neu gerendert, wenn sich diese Werte ändern. Den gesamten State zu beobachten ist am einfachsten; eine Teilmenge zu beobachten optimiert große Views.

Die moderne Verwendung von @ObservableState erledigt dies automatisch. Dennoch ist es hilfreich, observe zu verstehen, wenn Sie älteren Code lesen.

import ComposableArchitecture
import SwiftUI

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

Actions mit Nutzdaten senden

Actions mit zugehörigen Werten werden gesendet, indem Sie den jeweiligen Wert übergeben. So leitet eine View Benutzereingaben weiter, die der Reducer benötigt.

Hier sendet die Auswahl einer Zeile die ausgewählte ID.

import ComposableArchitecture
import SwiftUI

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

Actions animieren

Sie können einer gesendeten Action eine Animation zuweisen, sodass die daraus resultierende State-Änderung animiert wird. Übergeben Sie dazu ein animation-Argument an send.

So bleiben Animationsdetails am Aufrufort, während der State aus einfachen Daten besteht.

import ComposableArchitecture
import SwiftUI

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

Die View zusammensetzen

Eine vollständige TCA-View enthält einen StoreOf, liest den State mit der Punktnotation und sendet Actions über Steuerelemente. Der Reducer erledigt den Rest, sodass die View schlank und deklarativ bleibt.

Durch diese Trennung sind TCA-Views leicht zu lesen und als Vorschau darzustellen.

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

Kurzer Check: Die Benutzeroberfläche steuern

Rufen Sie sich ins Gedächtnis, wie eine SwiftUI-View in TCA eine State-Änderung auslöst.

Zusammenfassung: Der Store und SwiftUI

Sie haben ein Feature mit SwiftUI verbunden:

Ein StoreOf<Feature> enthält den State und führt den Reducer aus.
Sie erstellen einen Store mit einem initialen State und dem Reducer des Features.
Die moderne Beobachtung ermöglicht es Ihnen, den State mit der Punktnotation zu lesen, etwa mit store.count.
Views ändern den State durch den Aufruf von store.send(.action), optional mit einer Nutzlast oder Animation.
Das ältere WithViewStore und seine observe-Closure kommen in älterem Code vor.

Als Nächstes statten Sie Ihren Reducer mit Seiteneffekten und injizierbaren Dependencies aus.

import ComposableArchitecture
import SwiftUI

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

Häufig gestellte Fragen

Ist die Lektion „Der Store und die SwiftUI-Integration“ kostenlos?

Ja — der vollständige Text von „Der Store und die SwiftUI-Integration“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Swift Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Der Store und die SwiftUI-Integration“?

Steuern Sie Views aus einem TCA-Store. Du übst Swift Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Swift Academy zu starten?

Keine Vorkenntnisse erforderlich. Swift Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Der Store und die SwiftUI-Integration“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Swift Academy-Lektion Code schreiben und ausführen?

Ja. Jede Swift Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Swift Academy