פיתוח אפליקציות ב- SwiftUI. חלק 1: זרימת נתונים ו-Redux

לאחר שהשתתפתי במושב מצב האיחוד ב-WWDC 2019, החלטתי לצלול עמוק לתוך SwiftUI. ביליתי הרבה זמן בעבודה עם זה ועכשיו התחלתי לפתח אפליקציה אמיתית שיכולה להיות שימושית למגוון רחב של משתמשים.

קראתי לזה MovieSwiftUI - זו אפליקציה לחיפוש סרטים חדשים וישנים, כמו גם איסוף שלהם באוסף באמצעות TMDB API. תמיד אהבתי סרטים ואפילו יצרתי חברה שעובדת בתחום הזה, אם כי מזמן. החברה בקושי יכולה להיקרא מגניבה, אבל האפליקציה הייתה!

אנו מזכירים: לכל קוראי Habr - הנחה של 10 רובל בעת הרשמה לכל קורס Skillbox באמצעות קוד ההטבה של Habr.

Skillbox ממליצה: קורס חינוכי מקוון "מקצועי מפתח ג'אווה".

אז מה MovieSwiftUI יכול לעשות?

• אינטראקציה עם ה-API - כמעט כל אפליקציה מודרנית עושה זאת.
• טוען נתונים אסינכרוניים על בקשות ומנתח JSON למודל Swift באמצעות ניתנת לקידוד.
• מציג תמונות שנטענו לפי בקשה ושומר אותן במטמון.
• אפליקציה זו עבור iOS, iPadOS ו- macOS מספקת את ה-UX הטוב ביותר עבור משתמשי מערכות הפעלה אלה.
• המשתמש יכול להפיק נתונים וליצור רשימות סרטים משלו. האפליקציה שומרת ומשחזרת נתוני משתמש.
• תצוגות, רכיבים ודגמים מופרדים בבירור באמצעות דפוס Redux. זרימת הנתונים כאן היא חד כיוונית. ניתן לאחסן אותו במלואו במטמון, לשחזר אותו ולדרוס אותו.
• האפליקציה משתמשת ברכיבים הבסיסיים של SwiftUI, TabbedView, SegmentedControl, NavigationView, Form, Modal וכו'. זה גם מספק תצוגות מותאמות אישית, מחוות, ממשק משתמש/UX.

למעשה, האנימציה חלקה, ה-GIF יצא קצת מטורף

העבודה על האפליקציה נתנה לי ניסיון רב ובסך הכל זו הייתה חוויה חיובית. הצלחתי לכתוב אפליקציה פונקציונלית מלאה, בספטמבר אשפר אותה ואפרסם אותה ב-AppStore, במקביל לשחרור iOS 13.

Redux, BindableObject ו- EnvironmentObject

אני עובד עם Redux כבר כשנתיים, אז אני בקיא בזה יחסית. בפרט, אני משתמש בו ב-frontend עבור להגיב אתר אינטרנט, כמו גם לפיתוח יישומי 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)
    }
}

בכל פעם שאתה מפעיל פעולה, אתה מפעיל את תיבת ההילוכים. הוא יעריך פעולות בהתאם למצב הנוכחי של היישום. לאחר מכן הוא יחזיר מצב שונה בהתאם לסוג הפעולה והנתונים.

ובכן, מכיוון שהחנות היא BindableObject, היא תודיע ל- SwiftUI כאשר הערך שלה משתנה באמצעות המאפיין willChange שסופק על ידי PassthroughSubject. הסיבה לכך היא שה-BindableObject חייב לספק PublisherType, אך יישום הפרוטוקול אחראי לניהולו. בסך הכל, זהו כלי חזק מאוד של אפל. בהתאם לכך, במחזור הרינדור הבא, 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".
• קורס מקוון יישומי "Python Data Analyst".
• קורס מעשי שנתיים "אני מפתח אתרים PRO".

מקור: www.habr.com