Swift Academy · Oppitunti

Store ja SwiftUI-integraatio

Ohjaa näkymiä TCA-storen avulla.

Oppitunti 2/413 vaihetta

Store ja SwiftUI-integraatio on ilmainen Swift Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Swift Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Swift Academy-kurssilla on yhteensä 4 oppituntia.

Mikä on Store?

Store on ajonaikainen olio, joka sisältää ominaisuuden tilan ja suorittaa sen reducerin. SwiftUI-näkymä tarkkailee storea lukeakseen tilaa ja lähettää sille toimintoja muutosten käynnistämiseksi.

Store yhdistää puhtaan reducer-logiikan käynnissä olevaan, vuorovaikutteiseen käyttöliittymään.

import ComposableArchitecture
import SwiftUI

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

StoreOf-tyyppialias

StoreOf<Feature> on kätevä alias storelle, joka on erikoistettu ominaisuuden State- ja Action-tyypeille. Näkymä säilyttää yleensä yhden tällaisen olion tallennettuna ominaisuutena.

Counter-näkymä säilyttää siis StoreOf<CounterFeature>-olion.

import ComposableArchitecture
import SwiftUI

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

Storen luominen

Store luodaan Store-alustajalla, jolle annetaan alkutila ja suoritettava reducer. Tämä tehdään yleensä kerran sovelluksen aloituspisteen lähellä.

Jälkimmäinen sulkeuma palauttaa ominaisuutenne instanssin.

import ComposableArchitecture
import SwiftUI

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

Tilan lukeminen suoraan

Modernin tarkkailun avulla näkymä lukee tilaa suoraan storesta piste-merkintää käyttäen, esimerkiksi store.count. Koska tila on merkitty @ObservableState-merkinnällä, SwiftUI piirtää uudelleen vain ne osat, jotka riippuvat muuttuneista arvoista.

Yksinkertaisiin lukutoimintoihin ei tarvita ylimääräistä wrapperia.

import ComposableArchitecture
import SwiftUI

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

Toimintojen lähettäminen

Tilaa muutetaan lähettämällä toiminto näkymästä kutsulla store.send(.someAction). Store välittää toiminnon reducerille, joka muuttaa tilaa ja voi käynnistää efektejä.

Tässä painikkeet lähettävät kasvatus- ja vähennystoiminnot.

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

Sidokset storesta

Kaksisuuntaisia sidoksia tarvitsevia SwiftUI-komponentteja varten TCA:ssa voi muodostaa storesta Binding-sidoksen, kun tila käyttää sidottavia toimintoja. Komponentti päivittää tilaa lähettämällä sidostoiminnon.

Tässä TextField sidotaan nimikenttään.

import ComposableArchitecture
import SwiftUI

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

Vanha WithViewStore

Ennen tarkkailun käyttöönottoa näkymät ympäröivät käyttöliittymänsä WithViewStore-rakenteella lukeakseen tilaa ja saadakseen viewStore-olion toimintojen lähettämistä varten. Näette tätä edelleen vanhemmassa koodissa.

observe-sulkeuma valitsee, mitä tilaa näkymä käyttää.

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

Tarkkailtavien tietojen valitseminen

Vanhassa tyylissä observe-sulkeuma rajaa näkymän tarkkaileman tilan, joten näkymä piirretään uudelleen vain näiden arvojen muuttuessa. Koko tilan tarkkailu on yksinkertaisinta, kun taas osajoukon tarkkailu parantaa suurten näkymien suorituskykyä.

Moderni @ObservableState hoitaa tämän automaattisesti, mutta observe-toiminnon ymmärtäminen auttaa vanhemman koodin lukemisessa.

import ComposableArchitecture
import SwiftUI

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

Toimintojen lähettäminen tietosisällön kanssa

Liitännäisarvoja sisältävät toiminnot lähetetään antamalla arvo niiden mukana. Näin näkymä välittää reducerin tarvitseman käyttäjän syötteen.

Tässä rivin valitseminen lähettää valitun tunnisteen.

import ComposableArchitecture
import SwiftUI

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

Toimintojen animointi

Lähetettyyn toimintoon voi liittää animaation, jolloin sen aiheuttama tilamuutos animoidaan. Välittäkää send-kutsulle animation-argumentti.

Näin animaatioon liittyvät asiat pysyvät kutsukohdassa ja tila tavallisena datana.

import ComposableArchitecture
import SwiftUI

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

Näkymän kokoaminen

Täydellinen TCA-näkymä sisältää StoreOf-olion, lukee tilaa piste-merkinnällä ja lähettää toimintoja käyttöliittymäkomponenteista. Reducer hoitaa loput, joten näkymä pysyy ohuena ja deklaratiivisena.

Tämä erottelu tekee TCA-näkymistä helposti luettavia ja esikatseltavia.

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

Pikatarkistus: käyttöliittymän ohjaaminen

Palauttakaa mieleenne, miten SwiftUI-näkymä käynnistää tilamuutoksen TCA:ssa.

Vastaa interaktiivisessa oppitunnissa

Kertaus: Store ja SwiftUI

Yhdistitte ominaisuuden SwiftUI:hin:

StoreOf<Feature> sisältää tilan ja suorittaa reducerin.
Store luodaan alkutilan ja ominaisuuden reducerin avulla.
Modernin tarkkailun ansiosta tilaa voi lukea piste-merkinnällä, kuten store.count.
Näkymät muuttavat tilaa kutsumalla store.send(.action)-metodia, jolle voi antaa myös tietosisällön tai animaation.
Vanha WithViewStore ja sen observe-sulkeuma esiintyvät vanhemmassa koodissa.

Seuraavaksi annatte reducerille sivuvaikutuksia ja injektoitavia riippuvuuksia.

import ComposableArchitecture
import SwiftUI

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

Aloita maksutta

Opi Swift tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 122
Oppitunnit: 409

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Store ja SwiftUI-integraatio” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Swift Academy-oppimispolun 3 oppituntia, myös oppitunnin “Store ja SwiftUI-integraatio”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Swift Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Store ja SwiftUI-integraatio”?

Ohjaa näkymiä TCA-storen avulla. Harjoittelet Swift Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Swift Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Swift Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Store ja SwiftUI-integraatio”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Swift Academy-oppitunnilla?

Kyllä. Jokainen Swift Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Tila, toiminto ja reducer
Store ja SwiftUI-integraatio
Efektit ja riippuvuudet
Ominaisuuksien koostaminen ja testaaminen

← Takaisin: Swift Academy