Разработка на приложения на SwiftUI. Част 1: Dataflow и Redux

След като присъствах на сесията за състоянието на Съюза на WWDC 2019, реших да се потопя дълбоко в SwiftUI. Прекарах много време в работа с него и сега започнах да разработвам истинско приложение, което може да бъде полезно за широк кръг потребители.

Нарекох го MovieSwiftUI - това е приложение за търсене на нови и стари филми, както и събирането им в колекция с TMDB API. Винаги съм обичал филмите и дори създадох компания, работеща в тази област, макар и много отдавна. Компанията трудно може да се нарече готина, но приложението беше!

Напомняме ви: за всички читатели на "Habr" - отстъпка от 10 000 рубли при записване във всеки курс Skillbox, използвайки промоционалния код на "Habr".

Skillbox препоръчва: Образователен онлайн курс „Професия Java разработчик“.

И така, какво може да направи MovieSwiftUI?

• Взаимодейства с API - почти всяко модерно приложение прави това.
• Зарежда асинхронни данни при заявки и анализира JSON в модела Swift, използвайки Кодируем.
• Показва изображения, заредени при поискване, и ги кешира.
• Това приложение за iOS, iPadOS и macOS осигурява най-добрия UX за потребителите на тези операционни системи.
• Потребителят може да генерира данни и да създава свои собствени списъци с филми. Приложението запазва и възстановява потребителски данни.
• Изгледите, компонентите и моделите са ясно разделени с помощта на модела Redux. Потокът от данни тук е еднопосочен. Може да бъде напълно кеширан, възстановен и презаписан.
• Приложението използва основните компоненти на SwiftUI, TabbedView, SegmentedControl, NavigationView, Form, Modal и др. Той също така предоставя персонализирани изгледи, жестове, UI/UX.

Всъщност анимацията е гладка, GIF-ът се оказа малко рязък

Работата по приложението ми даде много опит и като цяло беше положително изживяване. Успях да напиша напълно функционално приложение, през септември ще го подобря и ще го публикувам в AppStore, едновременно с пускането на iOS 13.

Redux, BindableObject и EnvironmentObject

Работя с Redux от около две години, така че съм сравнително добре запознат с него. По-специално го използвам във фронтенда за Реагират уебсайт, както и за разработване на собствени приложения за iOS (Swift) и Android (Kotlin).

Никога не съм съжалявал, че избрах Redux като архитектура на потока от данни за изграждане на приложение SwiftUI. Най-предизвикателните части при използване на Redux в приложение на UIKit са работата с магазина и получаването и извличането на данни и картографирането им към вашите изгледи/компоненти. За да направя това, трябваше да създам един вид библиотека от конектори (използвайки 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)
    }
}

Всеки път, когато задействате действие, вие активирате скоростната кутия. Той ще оцени действията според текущото състояние на приложението. След това ще върне ново модифицирано състояние в съответствие с типа на действието и данните.

Е, тъй като store е BindableObject, той ще уведоми SwiftUI, когато стойността му се промени, като използва свойството willChange, предоставено от PassthroughSubject. Това е така, защото 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 за изтриване. Така че, когато потребителят докосне бутона за изтриване, той задейства съответното действие и премахва филма от списъка.

Е, тъй като свойството list се извлича от състоянието BindableObject и се инжектира като EnvironmentObject, SwiftUI актуализира списъка, тъй като ForEach е свързан с изчисленото свойство movies.

Ето част от редуктора 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 препоръчва:

• Практически курс „Мобилен разработчик PRO“.
• Приложен онлайн курс „Анализатор на данни на Python“.
• Двугодишен практически курс „Аз съм PRO уеб разработчик“.

Източник: www.habr.com