Fampivoarana fampiharana amin'ny SwiftUI. Fizarana 1: Dataflow sy Redux

Fampivoarana fampiharana amin'ny SwiftUI. Fizarana 1: Dataflow sy Redux

Rehefa avy nanatrika ny fivoriana State of the Union tao amin'ny WWDC 2019 aho dia nanapa-kevitra ny hiditra lalina ao amin'ny SwiftUI. Nandany fotoana betsaka niasa tamin'izany aho ary nanomboka namolavola fampiharana tena izy izay mety ho an'ny mpampiasa marobe.

Nantsoiko hoe MovieSwiftUI - ity dia fampiharana iray hitadiavana sarimihetsika vaovao sy tranainy, ary koa fanangonana azy ireo ao anaty fanangonana mampiasa TMDB API. Tia sarimihetsika foana aho ary namorona orinasa miasa amin'ity sehatra ity mihitsy aza, na dia efa ela be aza. Ny orinasa dia tsy azo antsoina hoe cool, fa ny fampiharana dia!

Mampahatsiahy izahay: ho an'ny mpamaky rehetra ny "Habr" - fihenam-bidy 10 roubles rehefa misoratra anarana amin'ny taranja Skillbox rehetra mampiasa ny code promotional "Habr".

Skillbox dia manoro hevitra: Fampianarana an-tserasera "Profession Java Developer".

Ka inona no azon'ny MovieSwiftUI atao?

  • Mifandray amin'ny API - saika ny fampiharana maoderina rehetra no manao izany.
  • Mametraka angona tsy mifanentana amin'ny fangatahana ary mametaka JSON amin'ny modely Swift ampiasaina Codable.
  • Asehoy ny sary voarakitra ao amin'ny fangatahana ary manangana azy ireo.
  • Ity fampiharana ho an'ny iOS, iPadOS ary macOS ity dia manome ny UX tsara indrindra ho an'ireo mpampiasa ireo OS ireo.
  • Ny mpampiasa dia afaka mamorona angona sy mamorona ny lisitry ny sarimihetsika. Ny fampiharana dia mitahiry sy mamerina ny angona mpampiasa.
  • Ny fijery, ny singa ary ny maodely dia misaraka mazava amin'ny fampiasana ny modely Redux. Unidirectional ny fikorianan'ny angona eto. Azo amboarina tanteraka, averina ary soratana.
  • Ny fampiharana dia mampiasa ny singa fototra amin'ny SwiftUI, TabbedView, SegmentedControl, NavigationView, Form, Modal, sns. Izy io koa dia manome fomba fijery mahazatra, fihetsika, UI/UX.

Fampivoarana fampiharana amin'ny SwiftUI. Fizarana 1: Dataflow sy Redux
Raha ny marina, ny animation dia malama, ny GIF dia nivadika kely

Ny niasa tamin'ny fampiharana dia nanome ahy traikefa be dia be ary amin'ny ankapobeny dia traikefa tsara izany. Afaka nanoratra fampiharana feno aho, amin'ny volana septambra dia hanatsara izany aho ary hamoaka izany ao amin'ny AppStore, miaraka amin'ny famoahana ny iOS 13.

Redux, BindableObject ary EnvironmentObject

Fampivoarana fampiharana amin'ny SwiftUI. Fizarana 1: Dataflow sy Redux

Efa roa taona teo ho eo aho no niara-niasa tamin'i Redux, ka somary zatra an'izany aho. Indrindra indrindra, mampiasa azy io amin'ny frontend aho Maneho Hevitra Momba tranonkala, ary koa amin'ny fampivoarana ny fampiharana iOS (Swift) sy Android (Kotlin) teratany.

Tsy nanenina mihitsy aho nifidy an'i Redux ho maritrano fikorianan'ny angona amin'ny fananganana rindranasa SwiftUI. Ny ampahany sarotra indrindra amin'ny fampiasana Redux amin'ny fampiharana UIKit dia miara-miasa amin'ny fivarotana ary maka sy maka angon-drakitra ary mametraka izany amin'ny fomba fijerinao / singa. Mba hanaovana izany dia tsy maintsy namorona karazana tranomboky mpampitohy aho (mampiasa ReSwift sy ReKotlin). Miasa tsara, fa ny code be dia be. Indrisy fa tsy (mbola) loharano misokatra.

Vaovao tsara! Ny hany zavatra tokony hatahorana amin'ny SwiftUI - raha mikasa ny hampiasa Redux ianao - dia fivarotana, fanjakana ary fampihenana. Ny fifandraisana amin'ny fivarotana dia karakarain'ny SwiftUI tanteraka noho ny @EnvironmentObject. Noho izany, manomboka amin'ny BindableObject ny fivarotana.

Namorona fonosana Swift tsotra aho, SwiftUIFlux, izay manome ny fampiasana fototra ny Redux. Raha ny ahy dia ampahany amin'ny MovieSwiftUI izany. Izaho koa nanoratra fampianarana tsikelikely, izay hanampy anao hampiasa ity singa ity.

Ahoana no miasa?

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

Isaky ny manetsika hetsika ianao dia manetsika ny boaty fiantsonana. Hanombantombana ny hetsika araka ny toetry ny fampiharana amin'izao fotoana izao. Avy eo dia hamerina fanjakana vaovao novaina mifanaraka amin'ny karazana hetsika sy angona.

Eny, satria ny fivarotana dia BindableObject, dia hampahafantatra an'i SwiftUI rehefa miova ny sandany amin'ny fampiasana ny fananana willChange nomen'ny PassthroughSubject. Izany dia satria ny BindableObject dia tsy maintsy manome PublisherType, fa ny fampiharana protocol dia tompon'andraikitra amin'ny fitantanana azy. Amin'ny ankapobeny, ity dia fitaovana mahery vaika avy amin'ny Apple. Noho izany, amin'ny tsingerin'ny famandrihana manaraka, SwiftUI dia hanampy amin'ny famoahana ny vatan'ny fomba fijery araka ny fiovan'ny fanjakana.

Raha ny marina, izany no fo sy majika an'ny SwiftUI. Amin'izao fotoana izao, amin'ny fomba fijery rehetra izay misoratra anarana amin'ny fanjakana iray, ny fomba fijery dia havoaka araka ny angon-drakitra azo avy amin'ny fanjakana sy izay niova.

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

Ny Store dia tsindrona ho EnvironmentObject rehefa manomboka ny fampiharana ary azo idirana amin'ny fomba rehetra mampiasa @EnvironmentObject. Tsy misy sazy fampandehanana satria ny fananana nalaina dia alaina haingana na kajy avy amin'ny fanjakana fampiharana.

Ny kaody etsy ambony dia manova ny sary raha miova ny afisy sarimihetsika.

Ary izany dia atao amin'ny andalana iray ihany, miaraka amin'ny fanampian'ny fomba fijery mifandray amin'ny fanjakana. Raha efa niasa tamin'ny ReSwift tamin'ny iOS ianao na koa mifandray miaraka amin'ny React, ho azonao ny majika amin'ny SwiftUI.

Azonao atao izao ny manandrana manetsika ny hetsika ary mamoaka ny fanjakana vaovao. Ity misy ohatra sarotra kokoa.

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

Ao amin'ny kaody etsy ambony, mampiasa ny hetsika .onDelete avy amin'ny SwiftUI ho an'ny IP tsirairay aho. Izany dia mamela ny laharana ao amin'ny lisitra mampiseho ny iOS swipe mahazatra hamafa. Koa rehefa mikasika ny bokotra famafana ny mpampiasa, dia manetsika ny hetsika mifanaraka amin'izany ary manala ilay sarimihetsika ao anaty lisitra.

Eny, satria ny fananana lisitra dia avy amin'ny fanjakana BindableObject ary natsindrona ho EnvironmentObject, SwiftUI dia manavao ny lisitra satria ny ForEach dia mifandray amin'ny fananana kajy sarimihetsika.

Ity misy ampahany amin'ny fampihenana 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
}

Ny reducer dia tanterahina rehefa mandefa hetsika ianao ary mamerina fanjakana vaovao, araka ny voalaza etsy ambony.

Mbola tsy hodinihintsika amin'ny antsipiriany - ahoana no ahafantaran'i SwiftUI ny zavatra haseho. Mba hahatakarana bebe kokoa izany dia mendrika izany jereo ny fivoriana WWDC momba ny fikorianan'ny angona ao amin'ny SwiftUI. Hazavaina amin’ny antsipiriany koa ny antony sy ny fotoana hampiasana azy State, @Binding, ObjectBinding ary EnvironmentObject.

Skillbox dia manoro hevitra:

Source: www.habr.com

Add a comment