Swift Academy · leksjon

Store og SwiftUI-integrasjon

Styr visninger fra en TCA-store.

Leksjon 2 av 413 trinn

Store og SwiftUI-integrasjon er en gratis leksjon i Swift Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Swift Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Swift Academy inneholder totalt 4 leksjoner.

Hva er en Store?

Store er kjøretidsobjektet som inneholder funksjonens state og kjører reduceren. Et SwiftUI-view observerer en store for å lese state og sender actions til den for å utløse endringer.

Store er bindeleddet mellom den rene reducer-logikken og det levende, interaktive brukergrensesnittet.

import ComposableArchitecture
import SwiftUI

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

Typaliaset StoreOf

StoreOf<Feature> er et praktisk alias for en store som er spesialisert på state- og action-typene til en funksjon. Et view har vanligvis en slik store som en lagret egenskap.

Et counter-view lagrer dermed en StoreOf<CounterFeature>.

import ComposableArchitecture
import SwiftUI

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

Opprette en Store

Du oppretter en store med Store-initialisereren ved å oppgi initial state og reduceren som skal kjøres. Dette gjøres vanligvis én gang nær appens inngangspunkt.

Den avsluttende closure-en returnerer en instans av funksjonen din.

import ComposableArchitecture
import SwiftUI

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

Lese State direkte

Med moderne observasjon leser et view state direkte fra store-en ved hjelp av punktnotasjon, for eksempel store.count. Fordi state er @ObservableState, bygger SwiftUI bare på nytt de delene som avhenger av verdier som er endret.

Det kreves ingen ekstra wrapper for enkle lesinger.

import ComposableArchitecture
import SwiftUI

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

Sende Actions

For å endre state sender et view en action med store.send(.someAction). Store-en sender actionen videre til reduceren, som endrer state og eventuelt starter effekter.

Her sender knapper actions for å øke og redusere verdien.

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

Bindinger fra Store

For SwiftUI-kontroller som trenger toveisbindinger lar TCA deg utlede en Binding fra store-en når state bruker bindbare actions. Kontrollen oppdaterer state ved å sende en binding-action.

Her bindes et TextField til et navnefelt.

import ComposableArchitecture
import SwiftUI

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

Den eldre WithViewStore-varianten

Før observasjon pakket views brukergrensesnittet inn i WithViewStore for å lese state og få en viewStore til å sende actions. Du vil fortsatt se dette i eldre kode.

observe-closure-en velger hvilken state view-et er avhengig av.

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

Velge hva som skal observeres

I den eldre stilen avgrenser observe-closure-en hvilken state view-et følger, slik at det bare bygges på nytt når disse verdiene endres. Det er enklest å observere hele state; å observere et delsett gir bedre ytelse i store views.

Moderne @ObservableState håndterer dette automatisk, men det er nyttig å forstå observe når du leser eldre kode.

import ComposableArchitecture
import SwiftUI

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

Sende Actions med data

Actions med tilknyttede verdier sendes ved at du oppgir verdien. Slik videresender et view brukerinput som reduceren trenger.

Her sender valg av en rad den valgte id-en.

import ComposableArchitecture
import SwiftUI

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

Animere Actions

Du kan knytte en animasjon til en sendt action slik at den resulterende state-endringen animeres. Send et animation-argument til send.

Da holdes animasjonsansvaret ved kallstedet, mens state forblir vanlige data.

import ComposableArchitecture
import SwiftUI

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

Sette sammen View-et

Et komplett TCA-view inneholder en StoreOf, leser state med punktnotasjon og sender actions fra kontroller. Reduceren gjør resten, slik at view-et forblir tynt og deklarativt.

Denne separasjonen gjør TCA-views enkle å lese og forhåndsvise.

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

Kort kontroll: Styre brukergrensesnittet

Husk hvordan et SwiftUI-view utløser en state-endring i TCA.

Besvar den i den interaktive leksjonen

Oppsummering: Store og SwiftUI

Du har koblet en funksjon til SwiftUI:

En StoreOf<Feature> inneholder state og kjører reduceren.
Du oppretter en store med initial state og funksjonens reducer.
Moderne observasjon lar deg lese state med punktnotasjon, for eksempel store.count.
Views endrer state ved å kalle store.send(.action), eventuelt med payload eller animasjon.
Den eldre WithViewStore-varianten og dens observe-closure finnes i eldre kode.

Deretter gir du reduceren sideeffekter og injiserbare dependencies.

import ComposableArchitecture
import SwiftUI

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

Gratis å komme i gang

Lær deg Swift med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 122
Leksjoner: 409

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Store og SwiftUI-integrasjon» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Swift Academy, inkludert «Store og SwiftUI-integrasjon», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Swift Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Store og SwiftUI-integrasjon»?

Styr visninger fra en TCA-store. Du øver på Swift Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Swift Academy?

Ingen tidligere erfaring er nødvendig. Swift Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Store og SwiftUI-integrasjon»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Swift Academy-leksjonen?

Ja. Alle Swift Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Swift Academy