Kukula kwa ntchito pa SwiftUI. Gawo 1: Dataflow ndi Redux

Kukula kwa ntchito pa SwiftUI. Gawo 1: Dataflow ndi Redux

Nditachita nawo gawo la State of the Union ku WWDC 2019, ndidaganiza zolowa mozama mu SwiftUI. Ndakhala ndikugwira nawo nthawi yayitali ndipo tsopano ndayamba kupanga pulogalamu yeniyeni yomwe ingakhale yothandiza kwa ogwiritsa ntchito osiyanasiyana.

Ndinayitcha MovieSwiftUI - iyi ndi pulogalamu yosaka mafilimu atsopano ndi akale, komanso kuwasonkhanitsa pamodzi pogwiritsa ntchito TMDB API. Ndakhala ndimakonda mafilimu ndipo ndinapanga kampani yogwira ntchito imeneyi, ngakhale kalekale. Kampaniyo sakanatchedwa yabwino, koma ntchitoyo inali!

Tikukukumbutsani: kwa owerenga onse a Habr - kuchotsera ma ruble 10 polembetsa maphunziro aliwonse a Skillbox pogwiritsa ntchito nambala yotsatsira ya Habr.

Skillbox imalimbikitsa: Maphunziro aulere pa intaneti "Professional Java developer".

Ndiye MovieSwiftUI ingachite chiyani?

  • Imalumikizana ndi API - pafupifupi pulogalamu iliyonse yamakono imachita izi.
  • Imalowetsa data yofananira pazofunsira ndikuyika JSON kukhala mtundu wa Swift pogwiritsa ntchito Zokwanira.
  • Imawonetsa zithunzi zomwe zidakwezedwa ndikuzisunga.
  • Pulogalamuyi ya iOS, iPadOS, ndi macOS imapereka UX yabwino kwambiri kwa ogwiritsa ntchito ma OS awa.
  • Wogwiritsa akhoza kupanga deta ndikupanga mndandanda wawo wamakanema. Pulogalamuyi imasunga ndikubwezeretsa deta ya ogwiritsa ntchito.
  • Mawonedwe, zigawo ndi zitsanzo zimasiyanitsidwa bwino pogwiritsa ntchito chitsanzo cha Redux. Mayendedwe a data pano ndi amodzi. Ikhoza kusungidwa bwino, kubwezeretsedwa ndi kulembedwa.
  • Pulogalamuyi imagwiritsa ntchito zida zoyambira za SwiftUI, TabbedView, SegmentedControl, NavigationView, Fomu, Modal, ndi zina zambiri. Imaperekanso malingaliro, manja, UI/UX.

Kukula kwa ntchito pa SwiftUI. Gawo 1: Dataflow ndi Redux
M'malo mwake, makanema ojambulawo ndi osalala, GIF idakhala yopumira pang'ono

Kugwira ntchito pa pulogalamuyi kunandipatsa zambiri ndipo zonse zinali zabwino. Ndinatha kulemba ntchito yogwira ntchito bwino, mu Seputembala ndidzayikonza ndikuyifalitsa mu AppStore, nthawi imodzi ndikutulutsidwa kwa iOS 13.

Redux, BindableObject ndi EnvironmentObject

Kukula kwa ntchito pa SwiftUI. Gawo 1: Dataflow ndi Redux

Ndakhala ndikugwira ntchito ndi Redux kwa pafupifupi zaka ziwiri tsopano, kotero ndikuidziwa bwino. Makamaka, ndimagwiritsa ntchito kutsogolo kwa Chitani Webusayiti, komanso kupanga mapulogalamu amtundu wa iOS (Swift) ndi Android (Kotlin).

Sindinachitepo bondo posankha Redux ngati njira yopangira ma data pomanga pulogalamu ya SwiftUI. Magawo ovuta kwambiri mukamagwiritsa ntchito Redux mu pulogalamu ya UIKit akugwira ntchito ndi sitolo ndikupeza ndi kubweza deta ndikuyipanga kumalingaliro / zigawo zanu. Kuti ndichite izi, ndinayenera kupanga mtundu wa laibulale yolumikizira (pogwiritsa ntchito ReSwift ndi ReKotlin). Imagwira ntchito bwino, koma ma code ambiri. Tsoka ilo, si (panobe) gwero lotseguka.

Nkhani yabwino! Zomwe zimadetsa nkhawa ndi SwiftUI - ngati mukufuna kugwiritsa ntchito Redux - ndi masitolo, mayiko, ndi zochepetsera. Kuyanjana ndi sitolo kumasamalidwa kwathunthu ndi SwiftUI chifukwa cha @EnvironmentObject. Chifukwa chake, sitolo imayamba ndi BindableObject.

Ndinapanga phukusi losavuta la Swift, SwiftUIFlux, yomwe imapereka kugwiritsa ntchito koyambirira kwa Redux. Kwa ine ndi gawo la MovieSwiftUI. Inenso analemba phunziro la tsatane-tsatane, zomwe zingakuthandizeni kugwiritsa ntchito gawoli.

Kodi ntchito?

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

Nthawi zonse mukayambitsa kuchitapo kanthu, mumayatsa bokosi la gear. Idzawunika zochita molingana ndi momwe ntchitoyi ikuyendera. Idzabwezeranso dziko latsopano losinthidwa molingana ndi mtundu wa zochita ndi deta.

Chabwino, popeza sitolo ndi BindableObject, idzadziwitsa SwiftUI mtengo wake ukasintha pogwiritsa ntchito willChange katundu woperekedwa ndi PassthroughSubject. Izi zili choncho chifukwa BindableObject iyenera kupereka PublisherType, koma kukhazikitsa ndondomeko ndi udindo woyang'anira. Ponseponse, ichi ndi chida champhamvu kwambiri chochokera ku Apple. Chifukwa chake, mumzere wotsatira womasulira, SwiftUI ithandizira kupereka malingaliro malinga ndi kusintha kwa boma.

Kwenikweni, uwu ndi mtima wonse ndi matsenga a SwiftUI. Tsopano, m'mawonedwe aliwonse omwe amalembetsa ku boma, mawonekedwewo adzaperekedwa molingana ndi zomwe deta ikulandira kuchokera ku boma ndi zomwe zasintha.

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

Sitolo imabayidwa ngati EnvironmentObject ntchito ikayamba ndipo imatha kupezeka mwanjira iliyonse pogwiritsa ntchito @EnvironmentObject. Palibe chilango cha ntchito chifukwa katundu wotengedwa amatengedwa mwamsanga kapena kuwerengedwa kuchokera ku malo ogwiritsira ntchito.

Khodi yomwe ili pamwambapa imasintha chithunzi ngati chithunzi cha kanema chikusintha.

Ndipo izi zimachitikadi ndi mzere umodzi wokha, mothandizidwa ndi malingaliro omwe amalumikizidwa ndi boma. Ngati mwagwira ntchito ndi ReSwift pa iOS kapena ngakhale kugwirizana ndi React, mumvetsetsa zamatsenga a SwiftUI.

Tsopano mutha kuyesa kuyambitsa zomwe zikuchitika ndikufalitsa dziko latsopano. Nachi chitsanzo chovuta kwambiri.

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

Mu code ili pamwamba, ndikugwiritsa ntchito .onDelete zochita kuchokera ku SwiftUI pa IP iliyonse. Izi zimathandiza mzere mndandanda kusonyeza yachibadwa iOS Yendetsani chala kuchotsa. Choncho pamene wosuta akhudza kufufuta batani, izo zimayambitsa lolingana kanthu ndi kuchotsa filimu pa mndandanda.

Chabwino, popeza mndandanda wa katunduyo umachokera ku BindableObject state ndipo umayikidwa ngati EnvironmentObject, SwiftUI imasintha mndandandawo chifukwa ForEach imagwirizana ndi mafilimu owerengetsera katundu.

Nayi gawo la ochepetsa MoviesState:

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
}

Chotsitsacho chimachitidwa mukatumiza chinthu ndikubwezeretsanso dziko latsopano, monga tafotokozera pamwambapa.

Sindifotokozanso mwatsatanetsatane - momwe SwiftUI imadziwira zowonetsera. Kuti mumvetsetse izi mozama, ndikofunikira onani gawo la WWDC pakuyenda kwa data mu SwiftUI. Ikufotokozanso mwatsatanetsatane chifukwa chake komanso nthawi yoyenera kugwiritsa ntchito State, @Binding, ObjectBinding ndi EnvironmentObject.

Skillbox imalimbikitsa:

Source: www.habr.com

Kuwonjezera ndemanga