აპლიკაციის შემუშავება SwiftUI-ზე. ნაწილი 1: Dataflow და Redux

WWDC 2019-ზე კავშირის მდგომარეობის სესიაზე დასწრების შემდეგ, გადავწყვიტე ღრმად ჩამევლო SwiftUI. მე დიდი დრო გავატარე მასთან მუშაობაში და ახლა დავიწყე რეალური აპლიკაციის შემუშავება, რომელიც შეიძლება სასარგებლო იყოს მომხმარებელთა ფართო სპექტრისთვის.

მე მას ვუწოდე MovieSwiftUI - ეს არის აპლიკაცია ახალი და ძველი ფილმების მოსაძებნად, ასევე კოლექციაში მათი შეგროვებისთვის. TMDB API. ყოველთვის მიყვარდა ფილმები და ამ სფეროში მომუშავე კომპანიაც კი შევქმენი, თუმცა დიდი ხნის წინ. კომპანიას ძნელად შეიძლება ეწოდოს მაგარი, მაგრამ აპლიკაცია იყო!

შეგახსენებთ: "Habr"-ის ყველა მკითხველისთვის - ფასდაკლება 10 რუბლიდან Skillbox-ის ნებისმიერ კურსზე ჩარიცხვისას "Habr" სარეკლამო კოდის გამოყენებით.

Skillbox გირჩევთ: საგანმანათლებლო ონლაინ კურსი "პროფესია Java Developer".

მაშ, რა შეუძლია MovieSwiftUI-ს?

• ურთიერთქმედებს API-სთან - ამას აკეთებს თითქმის ნებისმიერი თანამედროვე აპლიკაცია.
• იტვირთება ასინქრონული მონაცემები მოთხოვნებზე და აანალიზებს JSON-ს Swift მოდელში გამოყენებით კოდირებადი.
• აჩვენებს მოთხოვნით ჩატვირთულ სურათებს და ქეშირებს მათ.
• ეს აპლიკაცია iOS-ისთვის, iPadOS-ისთვის და macOS-ისთვის უზრუნველყოფს საუკეთესო UX-ს ამ OS-ების მომხმარებლებისთვის.
• მომხმარებელს შეუძლია მონაცემთა გენერირება და საკუთარი ფილმების სიების შექმნა. აპლიკაცია ინახავს და აღადგენს მომხმარებლის მონაცემებს.
• ხედები, კომპონენტები და მოდელები აშკარად გამოყოფილია Redux-ის ნიმუშის გამოყენებით. მონაცემთა ნაკადი აქ ცალმხრივია. მისი სრულად ქეშირება, აღდგენა და გადაწერა შესაძლებელია.
• აპლიკაცია იყენებს SwiftUI, TabbedView, SegmentedControl, NavigationView, Form, Modal და ა.შ. ძირითად კომპონენტებს. ის ასევე უზრუნველყოფს მორგებულ ხედებს, ჟესტებს, UI/UX.

ფაქტობრივად, ანიმაცია გლუვია, GIF-ი ცოტა უხეში აღმოჩნდა

აპლიკაციაზე მუშაობამ დიდი გამოცდილება მომცა და მთლიანობაში ეს იყო პოზიტიური გამოცდილება. სრულად ფუნქციონალური აპლიკაციის დაწერა მოვახერხე, სექტემბერში გავაუმჯობესებ და გამოვაქვეყნებ AppStore-ში, iOS 13-ის გამოშვების პარალელურად.

Redux, BindableObject და EnvironmentObject

მე უკვე დაახლოებით ორი წელია ვმუშაობ Redux-თან, ამიტომ შედარებით კარგად ვეცნობი მას. კერძოდ, მე ვიყენებ მას წინა მხარეს რეაგირებას ვებსაიტზე, ასევე iOS (Swift) და Android (Kotlin) აპლიკაციების შემუშავებისთვის.

არასდროს მინანია Redux-ის არჩევა, როგორც მონაცემთა ნაკადის არქიტექტურა SwiftUI აპლიკაციის შესაქმნელად. UIKit აპში Redux-ის გამოყენებისას ყველაზე რთული ნაწილია მაღაზიასთან მუშაობა, მონაცემების მიღება და მოძიება და მათი დახატვა თქვენს ხედებთან/კომპონენტებთან. ამისათვის მე უნდა შემექმნა კონექტორების ერთგვარი ბიბლიოთეკა (ReSwift-ისა და ReKotlin-ის გამოყენებით). კარგად მუშაობს, მაგრამ საკმაოდ ბევრი კოდი. სამწუხაროდ, ეს არ არის (ჯერ) ღია წყარო.

Კარგი ამბავი! ერთადერთი, რაზეც უნდა ინერვიულოთ SwiftUI-ით - თუ თქვენ აპირებთ Redux-ის გამოყენებას - არის მაღაზიები, შტატები და რედუქტორები. მაღაზიასთან ურთიერთქმედება მთლიანად ზრუნავს SwiftUI-ის მიერ @EnvironmentObject-ის წყალობით. ასე რომ, მაღაზია იწყება BindableObject-ით.

მე შევქმენი მარტივი Swift პაკეტი, SwiftUIFlux, რომელიც უზრუნველყოფს Redux-ის ძირითად გამოყენებას. ჩემს შემთხვევაში ეს MovieSwiftUI-ის ნაწილია. მე ასევე დაწერა ნაბიჯ-ნაბიჯ გაკვეთილი, რომელიც დაგეხმარებათ ამ კომპონენტის გამოყენებაში.

როგორ მუშაობს იგი?

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

ყოველ ჯერზე, როცა მოქმედებთ, თქვენ ააქტიურებთ გადაცემათა კოლოფს. ის შეაფასებს მოქმედებებს აპლიკაციის ამჟამინდელი მდგომარეობის მიხედვით. შემდეგ ის დააბრუნებს ახალ შეცვლილ მდგომარეობას მოქმედების ტიპისა და მონაცემების შესაბამისად.

ისე, რადგან მაღაზია არის BindableObject, ის აცნობებს SwiftUI-ს, როდესაც მისი მნიშვნელობა შეიცვლება PassthroughSubject-ის მიერ მოწოდებული willChange თვისების გამოყენებით. ეს იმიტომ ხდება, რომ BindableObject-მა უნდა უზრუნველყოს PublisherType, მაგრამ პროტოკოლის იმპლემენტაცია პასუხისმგებელია მის მართვაზე. ზოგადად, ეს არის ძალიან ძლიერი ინსტრუმენტი Apple-ისგან. შესაბამისად, რენდერის შემდეგ ციკლში, SwiftUI დაგეხმარებათ ხედების კორპუსის გადმოცემაში მდგომარეობის ცვლილების მიხედვით.

სინამდვილეში, ეს არის SwiftUI-ის მთელი გული და მაგია. ახლა, ნებისმიერ ხედში, რომელიც ხელმოწერილია სახელმწიფოს, ხედი გადაიცემა იმის მიხედვით, თუ რა მონაცემები მიიღება სახელმწიფოსგან და რა შეიცვალა.

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

მაღაზია ინექცია ხდება როგორც EnvironmentObject, როდესაც აპლიკაცია იწყება და შემდეგ ხელმისაწვდომია ნებისმიერი ხედიდან @EnvironmentObject-ის გამოყენებით. არ არსებობს შესრულების ჯარიმა, რადგან მიღებული თვისებები სწრაფად აღიქმება ან გამოითვლება განაცხადის მდგომარეობიდან.

ზემოთ მოცემული კოდი ცვლის სურათს, თუ ფილმის პოსტერი იცვლება.

და ეს ფაქტობრივად მხოლოდ ერთი ხაზით კეთდება, რომლის დახმარებითაც ხედები სახელმწიფოს უკავშირდება. თუ თქვენ მუშაობდით ReSwift-თან iOS-ზე ან თუნდაც დაკავშირება React-ით თქვენ გაიგებთ SwiftUI-ის მაგიას.

ახლა შეგიძლიათ სცადოთ მოქმედების გააქტიურება და ახალი მდგომარეობის გამოქვეყნება. აქ არის უფრო რთული მაგალითი.

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

ზემოთ მოცემულ კოდში მე ვიყენებ .onDelete მოქმედებას SwiftUI-დან თითოეული IP-სთვის. ეს საშუალებას აძლევს სიაში რიგს აჩვენოს ნორმალური iOS-ის წაშლა. ასე რომ, როდესაც მომხმარებელი ეხება წაშლის ღილაკს, ის იწყებს შესაბამის მოქმედებას და ამოიღებს ფილმს სიიდან.

კარგად, ვინაიდან სიის თვისება მომდინარეობს BindableObject მდგომარეობიდან და ინექცირდება როგორც EnvironmentObject, SwiftUI აახლებს სიას, რადგან ForEach ასოცირდება ფილმების გამოთვლილ თვისებებთან.

აქ არის 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
}

რედუქტორი შესრულებულია, როდესაც თქვენ აგზავნით მოქმედებას და აბრუნებთ ახალ მდგომარეობას, როგორც ზემოთ აღინიშნა.

მე ჯერ არ შევალ დეტალებში - როგორ იცის SwiftUI რეალურად რა უნდა აჩვენოს. ამის უფრო ღრმად გასაგებად, ღირს WWDC სესიის ნახვა მონაცემთა ნაკადზე SwiftUI-ში. ის ასევე დეტალურად განმარტავს რატომ და როდის უნდა გამოიყენოთ სახელმწიფო, @Binding, ObjectBinding და EnvironmentObject.

Skillbox გირჩევთ:

• პრაქტიკული კურსი "Mobile Developer PRO".
• მიმართა ონლაინ კურსს "პითონის მონაცემთა ანალიტიკოსი".
• ორწლიანი პრაქტიკული კურსი "მე ვარ PRO ვებ დეველოპერი".

წყარო: www.habr.com