Swift Academy · Lección

El Store e integración con SwiftUI

Controle las vistas desde un Store de TCA.

El Store e integración con SwiftUI es una lección gratuita de Swift Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Swift Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Swift Academy incluye 4 lecciones en total.

¿Qué es un Store?

El Store es el objeto en tiempo de ejecución que contiene el estado de su funcionalidad y ejecuta su reducer. Una vista de SwiftUI observa un store para leer el estado y le envía acciones para desencadenar cambios.

El store es el puente entre la lógica pura del reducer y la interfaz de usuario activa e interactiva.

import ComposableArchitecture
import SwiftUI

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

El alias de tipo StoreOf

StoreOf<Feature> es un alias práctico para un store especializado en los tipos de estado y acción de una funcionalidad. Normalmente, una vista lo conserva como propiedad almacenada.

Por tanto, una vista de contador almacena un StoreOf<CounterFeature>.

import ComposableArchitecture
import SwiftUI

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

Crear un Store

Construya un store con el inicializador de Store, proporcionando el estado inicial y el reducer que se ejecutará. Normalmente, esto se hace una sola vez cerca del punto de entrada de la aplicación.

El cierre final devuelve una instancia de su funcionalidad.

import ComposableArchitecture
import SwiftUI

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

Leer el estado directamente

Con la observación moderna, una vista lee el estado directamente del store mediante la sintaxis de punto, como store.count. Como el estado es @ObservableState, SwiftUI vuelve a renderizar solo las partes que dependen de los valores modificados.

No se necesita ningún contenedor adicional para las lecturas sencillas.

import ComposableArchitecture
import SwiftUI

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

Enviar acciones

Para cambiar el estado, una vista envía una acción con store.send(.someAction). El store pasa la acción al reducer, que modifica el estado y puede iniciar efectos.

Aquí, los botones envían acciones para incrementar y decrementar.

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 desde el Store

Para los controles de SwiftUI que necesitan bindings bidireccionales, TCA permite derivar un Binding del store cuando el estado usa acciones enlazables. El control actualiza el estado enviando una acción de binding.

Aquí, un TextField se enlaza a un campo de nombre.

import ComposableArchitecture
import SwiftUI

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

El WithViewStore heredado

Antes de la observación, las vistas envolvían su interfaz de usuario en WithViewStore para leer el estado y obtener un viewStore con el que enviar acciones. Todavía verá este patrón en código antiguo.

El cierre observe selecciona el estado del que depende la vista.

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

Elegir qué observar

En el estilo heredado, el cierre observe reduce el estado que observa la vista, de modo que esta solo se vuelve a renderizar cuando cambian esos valores. Observar todo el estado es más sencillo; observar un subconjunto optimiza las vistas grandes.

La opción moderna @ObservableState gestiona esto automáticamente, pero comprender observe resulta útil al leer código antiguo.

import ComposableArchitecture
import SwiftUI

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

Enviar acciones con datos

Las acciones que llevan valores asociados se envían proporcionando el valor. Así es como una vista reenvía la entrada del usuario que necesita el reducer.

Aquí, al seleccionar una fila se envía el id elegido.

import ComposableArchitecture
import SwiftUI

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

Animar acciones

Puede asociar una animación a una acción enviada para que se anime el cambio de estado resultante. Pase un argumento animation a send.

Así, las cuestiones relacionadas con la animación se mantienen en el lugar de la llamada, mientras el estado sigue siendo datos simples.

import ComposableArchitecture
import SwiftUI

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

Construir la vista

Una vista completa de TCA contiene un StoreOf, lee el estado mediante la sintaxis de punto y envía acciones desde los controles. El reducer se ocupa del resto, manteniendo la vista ligera y declarativa.

Esta separación hace que las vistas de TCA sean fáciles de leer y de previsualizar.

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

Comprobación rápida: controlar la interfaz

Recuerde cómo una vista de SwiftUI desencadena un cambio de estado en TCA.

Resumen: el Store y SwiftUI

Ha conectado una funcionalidad con SwiftUI:

Un StoreOf<Feature> contiene el estado y ejecuta el reducer.
Se crea un store con un estado inicial y el reducer de la funcionalidad.
La observación moderna permite leer el estado mediante la sintaxis de punto, como store.count.
Las vistas cambian el estado llamando a store.send(.action), opcionalmente con datos o una animación.
El WithViewStore heredado y su cierre observe aparecen en código antiguo.

A continuación, añadirá efectos secundarios y dependencias inyectables a su reducer.

import ComposableArchitecture
import SwiftUI

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

Preguntas frecuentes

¿La lección «El Store e integración con SwiftUI» es gratis?

Sí — el texto completo de «El Store e integración con SwiftUI» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Swift Academy, actualiza a CoddyKit PRO. El curso de Swift Academy incluye 4 lecciones en total.

¿Qué aprenderé en «El Store e integración con SwiftUI»?

Controle las vistas desde un Store de TCA. Practicas Swift Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Swift Academy?

No se requiere experiencia previa. Swift Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «El Store e integración con SwiftUI»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Swift Academy?

Sí. Cada lección de Swift Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Estado, acción y reductor
El Store e integración con SwiftUI
Efectos y dependencias
Composición y pruebas de funcionalidades

← Volver a Swift Academy