Swift Academy · Lezione

Lo Store e l’integrazione con SwiftUI

Alimenti le view da uno store TCA.

Lezione 2 di 413 passaggi

Lo Store e l’integrazione con SwiftUI è una lezione Swift Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Swift Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Swift Academy include 4 lezioni in totale.

Che cos’è uno Store

Lo Store è l’oggetto di runtime che contiene lo stato della feature ed esegue il relativo reducer. Una view SwiftUI osserva uno store per leggere lo stato e gli invia action per attivare le modifiche.

Lo store è il collegamento tra la logica pura del reducer e l’interfaccia utente interattiva.

import ComposableArchitecture
import SwiftUI

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

L’alias di tipo StoreOf

StoreOf<Feature> è un alias pratico per uno store specializzato nei tipi State e Action di una feature. In genere una view ne conserva uno come proprietà memorizzata.

Una view per un contatore conserva quindi un StoreOf<CounterFeature>.

import ComposableArchitecture
import SwiftUI

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

Creazione di uno Store

Si crea uno store con l’inizializzatore Store, fornendo lo stato iniziale e il reducer da eseguire. Di solito questa operazione viene eseguita una sola volta, vicino al punto di ingresso dell’app.

La trailing closure restituisce un’istanza della feature.

import ComposableArchitecture
import SwiftUI

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

Lettura diretta dello stato

Con l’osservazione moderna, una view legge lo stato direttamente dallo store usando la sintassi con il punto, ad esempio store.count. Poiché lo stato è @ObservableState, SwiftUI esegue nuovamente il rendering solo delle parti che dipendono dai valori modificati.

Per le letture semplici non è necessario alcun wrapper aggiuntivo.

import ComposableArchitecture
import SwiftUI

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

Invio delle action

Per modificare lo stato, una view invia un’action con store.send(.someAction). Lo store passa l’action al reducer, che modifica lo stato e può avviare degli effetti.

In questo caso, i pulsanti inviano action di incremento e decremento.

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

Binding dallo Store

Per i controlli SwiftUI che richiedono binding bidirezionali, TCA consente di derivare un Binding dallo store quando lo stato utilizza action associabili. Il controllo aggiorna lo stato inviando un’action di binding.

In questo caso, un TextField è associato a un campo name.

import ComposableArchitecture
import SwiftUI

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

Il legacy WithViewStore

Prima dell’osservazione, le view racchiudevano l’interfaccia in WithViewStore per leggere lo stato e ottenere un viewStore a cui inviare le action. Questo costrutto è ancora presente nel codice meno recente.

La closure observe seleziona lo stato da cui dipende la view.

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

Scelta di cosa osservare

Nello stile legacy, la closure observe restringe lo stato osservato dalla view, che esegue nuovamente il rendering solo quando cambiano quei valori. Osservare l’intero stato è più semplice; osservare un sottoinsieme ottimizza le view di grandi dimensioni.

Il moderno @ObservableState gestisce automaticamente questo aspetto, ma comprendere observe è utile quando si legge codice meno recente.

import ComposableArchitecture
import SwiftUI

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

Invio di action con payload

Le action che contengono valori associati vengono inviate fornendo il valore. Questo consente a una view di inoltrare l’input dell’utente necessario al reducer.

In questo caso, la selezione di una riga invia l’id scelto.

import ComposableArchitecture
import SwiftUI

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

Animazione delle action

È possibile associare un’animazione a un’action inviata, così da animare la modifica dello stato risultante. Passi un argomento animation a send.

In questo modo le responsabilità dell’animazione restano nel punto della chiamata, mentre lo stato rimane costituito da semplici dati.

import ComposableArchitecture
import SwiftUI

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

Composizione della view

Una view TCA completa contiene uno StoreOf, legge lo stato con la sintassi con il punto e invia action dai controlli. Il reducer gestisce tutto il resto, mantenendo la view essenziale e dichiarativa.

È questa separazione a rendere le view TCA facili da leggere e da visualizzare in anteprima.

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

Verifica rapida: controllo dell’interfaccia

Ricordi come una view SwiftUI attiva una modifica dello stato in TCA.

Rispondi nella lezione interattiva

Riepilogo: lo Store e SwiftUI

Ha collegato una feature a SwiftUI:

Un StoreOf<Feature> contiene lo stato ed esegue il reducer.
Si crea uno store con uno stato iniziale e il reducer della feature.
L’osservazione moderna consente di leggere lo stato con la sintassi con il punto, ad esempio store.count.
Le view modificano lo stato chiamando store.send(.action), facoltativamente con un payload o un’animazione.
Il legacy WithViewStore e la relativa closure observe compaiono nel codice meno recente.

Ora fornirà al reducer effetti collaterali e dipendenze iniettabili.

import ComposableArchitecture
import SwiftUI

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

Gratis per iniziare

Impara Swift con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 122
Lezioni: 409

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Lo Store e l’integrazione con SwiftUI» è gratuita?

Sì — il testo completo di «Lo Store e l’integrazione con SwiftUI» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Swift Academy, passa a CoddyKit PRO. Il corso Swift Academy include 4 lezioni in totale.

Cosa imparerò in «Lo Store e l’integrazione con SwiftUI»?

Alimenti le view da uno store TCA. Eserciti Swift Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Swift Academy?

Non è richiesta alcuna esperienza precedente. Swift Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Lo Store e l’integrazione con SwiftUI»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Swift Academy?

Sì. Ogni lezione Swift Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Swift Academy