Swift Academy · Leçon

Le Store et l’intégration à SwiftUI

Pilotez les vues depuis un Store TCA.

Le Store et l’intégration à SwiftUI est une leçon Swift Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Swift Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Swift Academy comprend 4 leçons au total.

Qu’est-ce qu’un store ?

Le store est l’objet d’exécution qui contient l’état de votre fonctionnalité et exécute son réducteur. Une vue SwiftUI observe un store pour lire l’état et lui envoie des actions pour déclencher des changements.

Le store fait le lien entre la logique pure de votre réducteur et l’interface utilisateur interactive en fonctionnement.

import ComposableArchitecture
import SwiftUI

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

L’alias de type StoreOf

StoreOf<Feature> est un alias pratique pour un store spécialisé dans les types d’état et d’action d’une fonctionnalité. Une vue en conserve généralement un comme propriété stockée.

Ainsi, une vue de compteur stocke un StoreOf<CounterFeature>.

import ComposableArchitecture
import SwiftUI

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

Créer un store

Vous construisez un store avec l’initialiseur Store, en fournissant l’état initial et le réducteur à exécuter. Cela se fait généralement une seule fois, près du point d’entrée de l’application.

La fermeture finale renvoie une instance de votre fonctionnalité.

import ComposableArchitecture
import SwiftUI

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

Lire directement l’état

Avec l’observation moderne, une vue lit directement l’état du store avec la syntaxe par points, par exemple store.count. Comme l’état est @ObservableState, SwiftUI réaffiche uniquement les parties qui dépendent des valeurs modifiées.

Aucun conteneur supplémentaire n’est nécessaire pour les lectures simples.

import ComposableArchitecture
import SwiftUI

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

Envoyer des actions

Pour modifier l’état, une vue envoie une action avec store.send(.someAction). Le store transmet l’action au réducteur, qui modifie l’état et peut démarrer des effets.

Ici, les boutons envoient des actions d’incrémentation et de décrémentation.

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

Liaisons depuis le store

Pour les contrôles SwiftUI qui nécessitent des liaisons bidirectionnelles, TCA vous permet de dériver un Binding à partir du store lorsque l’état utilise des actions pouvant être liées. Le contrôle met à jour l’état en envoyant une action de liaison.

Ici, un TextField est lié à un champ de nom.

import ComposableArchitecture
import SwiftUI

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

Le WithViewStore historique

Avant l’observation, les vues enveloppaient leur interface dans WithViewStore pour lire l’état et obtenir un viewStore afin d’envoyer des actions. Vous verrez encore cette approche dans du code plus ancien.

La fermeture observe sélectionne l’état dont dépend la vue.

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

Choisir ce qu’il faut observer

Dans le style historique, la fermeture observe restreint l’état surveillé par la vue, qui ne se réaffiche que lorsque ces valeurs changent. Observer tout l’état est l’approche la plus simple ; observer un sous-ensemble optimise les grandes vues.

@ObservableState moderne gère cela automatiquement, mais comprendre observe vous aide à lire du code plus ancien.

import ComposableArchitecture
import SwiftUI

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

Envoyer des actions avec des données

Les actions qui transportent des valeurs associées sont envoyées en fournissant la valeur. C’est ainsi qu’une vue transmet les entrées utilisateur dont le réducteur a besoin.

Ici, la sélection d’une ligne envoie l’identifiant choisi.

import ComposableArchitecture
import SwiftUI

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

Animer les actions

Vous pouvez associer une animation à une action envoyée afin que la modification d’état qui en résulte soit animée. Transmettez un argument animation à send.

Ainsi, les préoccupations liées à l’animation restent au point d’appel tandis que l’état demeure constitué de données simples.

import ComposableArchitecture
import SwiftUI

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

Assembler la vue

Une vue TCA complète contient un StoreOf, lit l’état avec la syntaxe par points et envoie des actions depuis les contrôles. Le réducteur s’occupe du reste, ce qui préserve une vue mince et déclarative.

C’est cette séparation qui rend les vues TCA faciles à lire et à prévisualiser.

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

Vérification rapide : piloter l’interface

Rappelez-vous comment une vue SwiftUI déclenche une modification d’état dans TCA.

Récapitulatif : le store et SwiftUI

Vous avez connecté une fonctionnalité à SwiftUI :

Un StoreOf<Feature> contient l’état et exécute le réducteur.
Vous créez un store avec un état initial et le réducteur de la fonctionnalité.
L’observation moderne permet de lire l’état avec la syntaxe par points, comme store.count.
Les vues modifient l’état en appelant store.send(.action), éventuellement avec des données ou une animation.
Le WithViewStore historique et sa fermeture observe apparaissent dans le code plus ancien.

Vous allez maintenant doter votre réducteur d’effets de bord et de dépendances injectables.

import ComposableArchitecture
import SwiftUI

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

Questions Fréquemment Posées

La leçon « Le Store et l’intégration à SwiftUI » est-elle gratuite ?

Oui — le texte complet de « Le Store et l’intégration à SwiftUI » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Swift Academy, passe à CoddyKit PRO. Le cours Swift Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Le Store et l’intégration à SwiftUI » ?

Pilotez les vues depuis un Store TCA. Tu pratiques Swift Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Swift Academy ?

Aucune expérience préalable n'est requise. Swift Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Le Store et l’intégration à SwiftUI » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Swift Academy ?

Oui. Chaque leçon Swift Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Swift Academy