Kuvandudzwa kwekushandisa paSwiftUI. Chikamu 1: Dataflow uye Redux

Mushure mekupinda chikamu cheState of the Union paWWDC 2019, ndakafunga kunyura muSwiftUI. Ndapedza nguva yakawanda ndichishanda nayo uye ndatanga kugadzira application chaiyo inogona kubatsira kune vakasiyana-siyana vashandisi.

Ndakaitumidza kuti MovieSwiftUI - iyi iapp yekutsvaga mafirimu matsva neakare, pamwe nekuaunganidza muunganidzwa uchishandisa. Purogiramu inonzi TMDB. Ndagara ndichida mafirimu uye ndakatogadzira kambani inoshanda mundima iyi, kunyange kare kare. Iyo kambani yaisagona kunzi inotonhorera, asi application yaive!

Tinoyeuchidza: kune vese vaverengi veHabr - a 10 ruble mutengo paunenge uchinyoresa mune chero Skillbox kosi uchishandisa iyo Habr promo kodhi.

Skillbox inokurudzira: Dzidzo yepamhepo kosi "Professional Java developer".

Saka chii chingaite MovieSwiftUI?

• Inodyidzana neiyo API - ingangoita chero yemazuva ano application inoita izvi.
• Inotakura asynchronous data pane zvikumbiro uye inoisa JSON muSwift modhi uchishandisa Codable.
• Inoratidza mifananidzo yakatakurwa pakukumbira uye inoichengeta.
• Ichi chishandiso cheiOS, iPadOS, uye macOS chinopa yakanakisa UX kune vashandisi veaya maOS.
• Mushandisi anogona kugadzira data uye kugadzira avo ega mafirimu zvinyorwa. Iyo application inochengetedza uye inodzoreredza data remushandisi.
• Maonero, zvikamu uye modhi zvakapatsanurwa zvakajeka uchishandisa iyo Redux pateni. Iyo data inoyerera pano ndeye unidirectional. Inogona kuchengetwa zvizere, kudzoreredzwa uye kunyorwa.
• Chishandiso chinoshandisa izvo zvakakosha zveSwiftUI, TabbedView, SegmentedControl, NavigationView, Fomu, Modal, nezvimwe. Inopawo maonero echinyakare, gestures, UI/UX.

Muchokwadi, iwo animation yakapfava, iyo GIF yakashanduka diki diki

Kushanda paapp kwakandipa ruzivo rwakawanda uye zvakazara chaive chiitiko chakanaka. Ini ndakakwanisa kunyora inoshanda zvizere, munaGunyana ndichaivandudza uye nekuiburitsa muAppStore, panguva imwe chete nekuburitswa kweIOS 13.

Redux, BindableObject uye EnvironmentObject

Ndanga ndichishanda neRedux kweanenge makore maviri ikozvino, saka ndinonyatsoziva mairi. Kunyanya, ini ndinoishandisa kumberi kwe Taura webhusaiti, pamwe nekuvandudza iOS (Swift) uye Android (Kotlin) maapplication.

Ini handina kumbozvidemba kusarudza Redux seye data inoyerera yekuvaka yeSwiftUI application. Zvikamu zvinonyanya kunetsa kana uchishandisa Redux muUIKit app iri kushanda nechitoro uye kuwana uye kudzoreredza data nekuigadzira kune ako maonero / zvikamu. Kuti ndiite izvi, ndaifanira kugadzira rudzi rweraibhurari yezvibatanidza (ndichishandisa ReSwift uye ReKotlin). Inoshanda zvakanaka, asi yakawanda kwazvo kodhi. Nehurombo, haisati (ichiri) yakavhurika sosi.

Nhau dzakanaka! Izvo chete zvinhu zvekunetseka nazvo neSwiftUI - kana ukaronga kushandisa Redux - zvitoro, nyika, uye zvinoderedza. Kudyidzana nechitoro kunochengetwa zvachose neSwiftUI kutenda @EnvironmentObject. Saka, chitoro chinotanga neBindableObject.

Ndakagadzira iri nyore Swift package, SwiftUIFlux, iyo inopa kushandiswa kwekutanga kweRedux. Mune yangu chikamu cheMovieSwiftUI. ndoitawo akanyora nhanho-ne-nhanho tutori, izvo zvichakubatsira kushandisa chikamu ichi.

Sei kushanda?

final public class Store<State: FluxState>: BindableObject {
    public let willChange = PassthroughSubject<Void, Never>()
        
    private(set) public var state: State
    
    private func _dispatch(action: Action) {
        willChange.send()
        state = reducer(state, action)
    }
}

Pese paunotanga chiitiko, unomisikidza gearbox. Ichaongorora zviito zvinoenderana nemamiriro azvino ekushandisa. Inobva yadzosa mamiriro matsva akagadziridzwa zvinoenderana nerudzi rwekuita uye data.

Zvakanaka, sezvo chitoro chiri BindableObject, chinozivisa SwiftUI kana kukosha kwayo kuchichinja uchishandisa willChange chivakwa chakapihwa nePassthroughSubject. Izvi zvinodaro nekuti BindableObject inofanirwa kupa PublisherType, asi iyo protocol kuita basa rekuibata. Pakazara, ichi chishandiso chine simba kwazvo kubva kuApple. Saizvozvo, mune inotevera kutenderera kutenderera, SwiftUI ichabatsira kupa muviri wemaonero zvinoenderana nekuchinja kwenyika.

Chaizvoizvo, uyu ndiwo moyo uye mashiripiti eSwiftUI. Iye zvino, mune chero maonero anonyoresa kune imwe nyika, maonero achaitwa maererano neiyo data inogamuchirwa kubva kuhurumende uye chii chachinja.

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
 
    var window: UIWindow?
 
 
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            
            let controller = UIHostingController(rootView: HomeView().environmentObject(store))
            window.rootViewController = controller
            self.window = window
            window.makeKeyAndVisible()
        }
    }
}
 
struct CustomListCoverRow : View {
    @EnvironmentObject var store: Store<AppState>
    
    let movieId: Int
    var movie: Movie! {
        return store.state.moviesState.movies[movieId]
    }
    
    var body: some View {
        HStack(alignment: .center, spacing: 0) {
            Image(movie.poster)
        }.listRowInsets(EdgeInsets())
    }
}

Chitoro chinobaiwa seEnvironmentObject kana application yatanga uye yobva yasvikika mune chero maonero uchishandisa @EnvironmentObject. Iko hakuna chirango chekuita nekuti zvivakwa zvakatorwa zvinokurumidza kudzoserwa kana kuverengerwa kubva kune application state.

Iyo kodhi iri pamusoro inoshandura mufananidzo kana iyo bhaisikopo posita yachinja.

Uye izvi zvinonyatsoitwa nemutsara mumwe chete, nerubatsiro rwemaonero ayo akabatana nehurumende. Kana iwe wakashanda neReSwift pane iOS kana kunyange batanidza neReact, iwe unonzwisisa mashiripiti eSwiftUI.

Iye zvino unogona kuedza kumisa chiito uye kushambadza mamiriro matsva. Heino muenzaniso wakaoma.

struct CustomListDetail : View {
    @EnvironmentObject var store: Store<AppState>
 
    let listId: Int
    
    var list: CustomList {
        store.state.moviesState.customLists[listId]!
    }
    
    var movies: [Int] {
        list.movies.sortedMoviesIds(by: .byReleaseDate, state: store.state)
    }
    
    var body: some View {
        List {
            ForEach(movies) { movie in
                NavigationLink(destination: MovieDetail(movieId: movie).environmentObject(self.store)) {
                    MovieRow(movieId: movie, displayListImage: false)
                }
            }.onDelete { (index) in
               self.store.dispatch(action: MoviesActions.RemoveMovieFromCustomList(list: self.listId, movie: self.movies[index.first!]))
            }
        }
    }
}

Mune kodhi iri pamusoro, ndiri kushandisa .onDelete chiito kubva kuSwiftUI kune yega IP. Izvi zvinobvumira mutsara mune rondedzero kuratidza yakajairwa iOS swipe kudzima. Saka kana mushandisi akabata bhatani rekudzima, rinokonzeresa chiitiko chinoenderana uye rinobvisa iyo bhaisikopo kubva pane rondedzero.

Zvakanaka, sezvo iyo rondedzero yezvivakwa ichitorwa kubva kuBindableObject state uye yakajairwa seEnvironmentObject, SwiftUI inogadziridza rondedzero nekuti ForEach inosanganiswa nemabhaisikopo akaverengerwa chivakwa.

Hechino chikamu cheMovieState reducer:

func moviesStateReducer(state: MoviesState, action: Action) -> MoviesState {
    var state = state
    switch action {
    
    // other actions.
    
    case let action as MoviesActions.AddMovieToCustomList:
        state.customLists[action.list]?.movies.append(action.movie)
        
    case let action as MoviesActions.RemoveMovieFromCustomList:
        state.customLists[action.list]?.movies.removeAll{ $0 == action.movie }
        
    default:
        break
    }
    return state
}

Iyo inoderedza inoitwa kana iwe uchitumira chiito uye kudzosa nyika nyowani, sezvataurwa pamusoro.

Ini handisi kuzoenda mune zvakadzama - sei SwiftUI inonyatsoziva yekuratidza. Kuti unzwisise izvi zvakadzama, zvakakosha tarisa chikamu cheWWDC pakuyerera kwedata muSwiftUI. Inotsanangurawo zvakadzama sei uye nguva yekushandisa mamiriro, @Binding, ObjectBinding uye EnvironmentObject.

Skillbox inokurudzira:

• Nzira inoshanda "Mobile Developer PRO".
• Inoshandiswa online course "Python Data Analyst".
• Makore maviri anoshanda kosi "Ini ndiri PRO webhu developer".

Source: www.habr.com