Swift Academy · Aula

A Store e a Integração com SwiftUI

Controle as views a partir de uma store do TCA.

Aula 2 de 413 etapas

A Store e a Integração com SwiftUI é uma aula grátis de Swift Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Swift Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Swift Academy inclui 4 aulas no total.

O que é um armazenamento?

O armazenamento é o objeto em tempo de execução que mantém o estado da sua funcionalidade e executa seu redutor. Uma interface SwiftUI observa um armazenamento para ler o estado e envia ações a ele para acionar alterações.

O armazenamento é a ponte entre sua lógica pura de redução e a interface interativa em execução.

import ComposableArchitecture
import SwiftUI

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

O apelido de tipo StoreOf

StoreOf<Feature> é um apelido conveniente para um armazenamento especializado nos tipos de estado e ação de uma funcionalidade. Uma interface normalmente o mantém como uma propriedade armazenada.

Assim, uma interface de contador armazena um StoreOf<CounterFeature>.

import ComposableArchitecture
import SwiftUI

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

Criando um armazenamento

Você cria um armazenamento com o inicializador Store, fornecendo o estado inicial e o redutor a executar. Isso geralmente é feito uma vez próximo ao ponto de entrada do aplicativo.

O fechamento final retorna uma instância da sua funcionalidade.

import ComposableArchitecture
import SwiftUI

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

Lendo State diretamente

Com a observação moderna, uma interface lê o estado diretamente do armazenamento usando a sintaxe de ponto, como store.count. Como o estado é @ObservableState, o SwiftUI renderiza novamente apenas as partes que dependem dos valores alterados.

Nenhum encapsulador adicional é necessário para leituras simples.

import ComposableArchitecture
import SwiftUI

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

Enviando ações

Para alterar o estado, uma interface envia uma ação com store.send(.someAction). O armazenamento encaminha a ação ao redutor, que altera o estado e pode iniciar efeitos.

Aqui, os botões enviam ações de 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) }
        }
    }
}

Vínculos do armazenamento

Para controles do SwiftUI que precisam de vínculos bidirecionais, o TCA permite derivar um Binding do armazenamento quando o estado usa ações vinculáveis. O controle atualiza o estado enviando uma ação de vínculo.

Aqui, um TextField é vinculado a um campo de nome.

import ComposableArchitecture
import SwiftUI

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

O WithViewStore legado

Antes da observação, as interfaces encapsulavam sua interface em WithViewStore para ler o estado e obter um viewStore para enviar ações. Você ainda verá isso em código mais antigo.

O fechamento observe seleciona de qual estado a interface depende.

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

Escolhendo o que observar

No estilo legado, o fechamento observe restringe o estado observado pela interface, para que ela renderize novamente apenas quando esses valores mudarem. Observar todo o estado é mais simples; observar um subconjunto otimiza interfaces grandes.

O @ObservableState moderno faz isso automaticamente, mas entender observe ajuda ao ler código mais antigo.

import ComposableArchitecture
import SwiftUI

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

Enviando ações com dados

Você envia ações que transportam valores associados fornecendo o valor. É assim que uma interface encaminha a entrada do usuário de que o redutor precisa.

Aqui, selecionar uma linha envia o identificador escolhido.

import ComposableArchitecture
import SwiftUI

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

Animando ações

Você pode associar uma animação a uma ação enviada para que a alteração de estado resultante seja animada. Passe um argumento animation para send.

Isso mantém as preocupações de animação no local da chamada, enquanto o estado continua sendo dados simples.

import ComposableArchitecture
import SwiftUI

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

Montando a interface

Uma interface completa do TCA mantém um StoreOf, lê o estado usando a sintaxe de ponto e envia ações a partir dos controles. O redutor faz o restante, mantendo a interface enxuta e declarativa.

Essa separação torna as interfaces do TCA fáceis de ler e de gerar em prévias.

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ção rápida: controlando a interface

Relembre como uma interface SwiftUI aciona uma alteração de estado no TCA.

Responda na aula interativa

Recapitulação: o armazenamento e SwiftUI

Você conectou uma funcionalidade ao SwiftUI:

Um StoreOf<Feature> armazena o estado e executa o redutor.
Você cria um armazenamento com um estado inicial e o redutor da funcionalidade.
A observação moderna permite ler o estado com a sintaxe de ponto, como em store.count.
As interfaces alteram o estado chamando store.send(.action), opcionalmente com dados ou animação.
O WithViewStore legado e seu fechamento observe aparecem em código mais antigo.

A seguir, você fornecerá ao redutor efeitos colaterais e dependências injetáveis.

import ComposableArchitecture
import SwiftUI

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

Grátis para começar

Aprenda Swift com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 122
Aulas: 409

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “A Store e a Integração com SwiftUI” é grátis?

Sim — o texto completo de “A Store e a Integração com SwiftUI” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Swift Academy, atualize para CoddyKit PRO. O curso de Swift Academy inclui 4 aulas no total.

O que vou aprender em “A Store e a Integração com SwiftUI”?

Controle as views a partir de uma store do TCA. Você pratica Swift Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Swift Academy?

Nenhuma experiência prévia é necessária. Swift Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “A Store e a Integração com SwiftUI”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Swift Academy?

Sim. Cada aula de Swift Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Swift Academy