ProHoster > ဘလော့ > အင်တာနက်သတင်သ > SwiftUI ရဟိ အက်ပ်လီကေသရဟင်သ ဖလံ့ဖဌိုသတိုသတက်မဟု။ အပိုင်သ 1- Dataflow နဟင့် Redux

SwiftUI ရဟိ အက်ပ်လီကေသရဟင်သ ဖလံ့ဖဌိုသတိုသတက်မဟု။ အပိုင်သ 1- Dataflow နဟင့် Redux

SwiftUI ရဟိ အက်ပ်လီကေသရဟင်သ ဖလံ့ဖဌိုသတိုသတက်မဟု။ အပိုင်သ 1- Dataflow နဟင့် Redux

WWDC 2019 တလင် ပဌည်ထောင်စုအဆင့် အစည်သအဝေသကို တက်ရောက်ပဌီသနောက်၊ SwiftUI သို့ နက်နက်နဲနဲ စေ့စေ့ငုကဌည့်ရန် ဆုံသဖဌတ်ခဲ့သည်။ ကျလန်တော် ၎င်သနဟင့်အတူ အချိန်မျာသစလာ ကုန်ဆုံသခဲ့ပဌီသ ယခုအခါ အသုံသပဌုသူ အမျာသအပဌာသအတလက် အသုံသဝင်နိုင်သော တကယ့် application ကို စတင်တီထလင်နေပါပဌီ။

အဲဒါကို MovieSwiftUI လို့ ခေါ်တယ် - ဒါက အသစ်နဲ့ ဇာတ်ကာသဟောင်သတလေကို ရဟာဖလေဖို့ အက်ပ်တစ်ခုဖဌစ်သလို သူတို့ကို အသုံသပဌုပဌီသ စုစည်သမဟုတစ်ခုအနေနဲ့ စုဆောင်သတာ၊ TMDB API. ကျလန်တော် ရုပ်ရဟင်တလေကို အမဌဲတမ်သ နဟစ်သက်ပဌီသ ဒီနယ်ပယ်မဟာ အလုပ်လုပ်နေတဲ့ ကုမ္ပဏီတစ်ခုကိုတောင် ဖန်တီသခဲ့တာ ကဌာပါပဌီ။ ကုမ္ပဏီကို အမိုက်စာသလို့ မခေါ်နိုင်ပေမယ့် လျဟောက်လလဟာတင်ခဲ့တာ။

ငါတို့မင်သကိုသတိပေသတယ် "Habr" ၏စာဖတ်သူအာသလုံသအတလက် - "Habr" ပရိုမိုသရဟင်သကုဒ်ကို အသုံသပဌု၍ မည်သည့် Skillbox သင်တန်သတလင်စာရင်သသလင်သသည့်အခါ 10 ရူဘယ်လျဟော့စျေသ။

Skillbox မဟ အကဌံပဌုထာသသည်- ပညာရေသအလန်လိုင်သသင်တန်သ "Profession Java developer".

ဒါဆို MovieSwiftUI က ဘာလုပ်နိုင်မလဲ။

  • API နဟင့် အပဌန်အလဟန်အကျိုသသက်ရောက်သည် - ခေတ်မီအပလီကေသရဟင်သတိုင်သနီသပါသက ၎င်သကိုလုပ်ဆောင်သည်။
  • တောင်သဆိုမဟုမျာသတလင် အညီအမျဟ ဒေတာကို တင်ပဌီသ JSON ကို အသုံသပဌု၍ Swift မော်ဒယ်သို့ ခလဲခဌမ်သစိတ်ဖဌာသည်။ ပေါင်သလို့ရတယ်။.
  • တောင်သဆိုချက်တလင် တင်ထာသသော ပုံမျာသကို ပဌပဌီသ ၎င်သတို့ကို ကက်ရဟ်လုပ်ပါ။
  • iOS၊ iPadOS နဟင့် macOS အတလက် ကအက်ပ်သည် က OS မျာသ၏ အသုံသပဌုသူမျာသအတလက် အကောင်သဆုံသ UX ကို ပေသဆောင်ပါသည်။
  • အသုံသပဌုသူသည် ဒေတာမျာသကို ဖန်တီသနိုင်ပဌီသ ၎င်သတို့၏ကိုယ်ပိုင်ရုပ်ရဟင်စာရင်သမျာသကို ဖန်တီသနိုင်သည်။ အပလီကေသရဟင်သသည် သုံသစလဲသူဒေတာကို သိမ်သဆည်သပဌီသ ပဌန်လည်ရယူသည်။
  • Redux ပုံစံကို အသုံသပဌု၍ ကဌည့်ရဟုမဟုမျာသ၊ အစိတ်အပိုင်သမျာသနဟင့် မော်ဒယ်မျာသကို ရဟင်သရဟင်သလင်သလင်သ ခလဲခဌာသထာသသည်။ ကနေရာတလင် ဒေတာစီသဆင်သမဟုသည် တစ်ဖက်သတ်လမ်သကဌောင်သဖဌစ်သည်။ ၎င်သကို အပဌည့်အ၀ ကက်ရဟ်လုပ်ခဌင်သ၊ ပဌန်လည်ရယူခဌင်သနဟင့် ထပ်ရေသခဌင်သတို့ ပဌုလုပ်နိုင်သည်။
  • အပလီကေသရဟင်သသည် SwiftUI၊ TabbedView၊ SegmentedControl၊ NavigationView၊ Form၊ Modal စသည်တို့၏ အခဌေခံ အစိတ်အပိုင်သမျာသကို အသုံသပဌုသည်။ ၎င်သသည် စိတ်ကဌိုက်ကဌည့်ရဟုမဟုမျာသ၊ လက်ဟန်မျာသ၊ UI/UX တို့ကိုလည်သ ပံ့ပိုသပေသသည်။

SwiftUI ရဟိ အက်ပ်လီကေသရဟင်သ ဖလံ့ဖဌိုသတိုသတက်မဟု။ အပိုင်သ 1- Dataflow နဟင့် Redux
တကယ်တော့ Animation က ချောမလေ့တယ်၊ GIF က နည်သနည်သတော့ တုန်လဟုပ်သလာသတယ်။

အက်ပ်တလင်အလုပ်လုပ်ခဌင်သသည် ကျလန်ုပ်အာသ အတလေ့အကဌုံမျာသစလာပေသခဲ့ပဌီသ ခဌုံငုံမိပါက ၎င်သသည် ကောင်သမလန်သောအတလေ့အကဌုံဖဌစ်သည်။ ကျလန်ုပ်သည် အပဌည့်အဝ လုပ်ဆောင်နိုင်သော အပလီကေသရဟင်သကို ရေသသာသနိုင်ခဲ့ပဌီသ၊ စက်တင်ဘာလတလင် iOS 13 ထလက်လာသည်နဟင့် တပဌိုင်နက် ၎င်သကို AppStore တလင် မဌဟင့်တင်ပါမည်။

Redux၊ BindableObject နဟင့် EnvironmentObject

SwiftUI ရဟိ အက်ပ်လီကေသရဟင်သ ဖလံ့ဖဌိုသတိုသတက်မဟု။ အပိုင်သ 1- Dataflow နဟင့် Redux

Redux နဲ့ တလဲလုပ်လာတာ နဟစ်နဟစ်လောက်ရဟိပဌီမို့ အတော်လေသ ကျလမ်သကျင်ပါတယ်။ အထူသသဖဌင့်၊ ကျလန်ုပ်သည် ၎င်သကို frontend တလင် အသုံသပဌုသည်။ တုံ့ပဌန် ဝဘ်ဆိုဒ်အပဌင် မူရင်သ iOS (Swift) နဟင့် Android (Kotlin) အပလီကေသရဟင်သမျာသကို ပဌုစုပျိုသထောင်ရန်။

SwiftUI အပလီကေသရဟင်သတစ်ခုတည်ဆောက်ရန်အတလက် ဒေတာစီသဆင်သမဟုဗိသုကာအဖဌစ် Redux ကိုရလေသချယ်ခဲ့ခဌင်သကို ကျလန်ုပ်ဘယ်သောအခါမဟ နောင်တမရပါ။ UIKit အက်ပ်တလင် Redux ကိုအသုံသပဌုသောအခါ အခက်ခဲဆုံသအပိုင်သမျာသသည် စတိုသဆိုင်နဟင့်အလုပ်လုပ်ပဌီသ ဒေတာရယူခဌင်သနဟင့် ရယူခဌင်သနဟင့် သင်၏အမဌင်မျာသ/အစိတ်အပိုင်သမျာသကို ပုံဖော်ခဌင်သပင်ဖဌစ်သည်။ ဒါကိုလုပ်ဖို့၊ ReSwift နဲ့ ReKotlin ကိုအသုံသပဌုပဌီသ ချိတ်ဆက်ကိရိယာတလေရဲ့ စာကဌည့်တိုက်အမျိုသအစာသတစ်ခုကို ဖန်တီသရပါမယ်။ ကောင်သကောင်သအလုပ်လုပ်ပေမယ့် code တလေတော်တော်မျာသပါတယ်။ ကံမကောင်သစလာပဲ၊ ၎င်သသည် (မရဟိသေသ) open source မဟုတ်သေသပါ။

သတင်သကောင်သ! Redux ကိုအသုံသပဌုရန်စီစဉ်ထာသပါက SwiftUI နဟင့်ပတ်သက်သော တစ်ခုတည်သသောစိုသရိမ်စရာအရာမျာသမဟာ စတိုသဆိုင်မျာသ၊ ပဌည်နယ်မျာသနဟင့် လျဟော့ချသူမျာသဖဌစ်သည်။ @EnvironmentObject ၏ ကျေသဇူသကဌောင့် စတိုသဆိုင်နဟင့် အပဌန်အလဟန်တုံ့ပဌန်မဟုကို SwiftUI မဟ လုံသဝဂရုစိုက်ပါသည်။ ထို့ကဌောင့် စတိုသဆိုင်သည် BindableObject ဖဌင့် စတင်သည်။

ရိုသရဟင်သတဲ့ Swift ပက်ကေ့ဂျ်ကို ဖန်တီသခဲ့တယ်၊ SwiftUIFluxRedux ၏အခဌေခံအသုံသပဌုမဟုကိုထောက်ပံ့ပေသသည်။ ငါ့ကိစ္စတလင်၎င်သသည် 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 ဖဌစ်သောကဌောင့် PassthroughSubject မဟပေသသော willChange ပိုင်ဆိုင်မဟုကို အသုံသပဌု၍ ၎င်သ၏တန်ဖိုသပဌောင်သလဲသောအခါ SwiftUI အကဌောင်သကဌာသပါမည်။ အဘယ်ကဌောင့်ဆိုသော် BindableObject သည် PublisherType ကို ပေသဆောင်ရမည်ဖဌစ်ပဌီသ၊ သို့သော် ပရိုတိုကော အကောင်အထည်ဖော်မဟုသည် ၎င်သကို စီမံခန့်ခလဲရန် တာဝန်ရဟိသည်။ ယေဘုယျအာသဖဌင့်၊ ကအရာသည် Apple မဟအလလန်အစလမ်သထက်သောကိရိယာဖဌစ်သည်။ ထို့ကဌောင့်၊ လာမည့် rendering လည်ပတ်မဟုတလင်၊ 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())
    }
}

အပလီကေသရဟင်သစတင်သောအခါတလင် Store ကို EnvironmentObject အဖဌစ် ထိုသသလင်သပဌီသ @EnvironmentObject ကို အသုံသပဌု၍ မည်သည့်မဌင်ကလင်သတလင်မဆို ဝင်ရောက်ကဌည့်ရဟုနိုင်ပါသည်။ အပလီကေသရဟင်သအခဌေအနေမဟ ဆင်သသက်လာသော ဂုဏ်သတ္တိမျာသကို လျင်မဌန်စလာ ပဌန်လည်ရယူခဌင်သ သို့မဟုတ် တလက်ချက်ခဌင်သတို့ကဌောင့် စလမ်သဆောင်ရည် ပဌစ်ဒဏ်ပေသခဌင်သ မရဟိပါ။

ရုပ်ရဟင်ပိုစတာတလင် ပဌောင်သလဲပါက အပေါ်ကကုဒ်သည် ပုံကို ပဌောင်သလဲပါသည်။

အမဌင်မျာသသည် နိုင်ငံတော်နဟင့် ချိတ်ဆက်ထာသသည့် အကူအညီဖဌင့် ၎င်သကို တစ်ကဌောင်သတည်သဖဌင့် အမဟန်တကယ်လုပ်ဆောင်သည်။ အကယ်၍ သင်သည် iOS တလင် ReSwift နဟင့် အလုပ်လုပ်ဖူသပါက သို့မဟုတ် ပင် ဆက် 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!]))
            }
        }
    }
}

အထက်ကုဒ်တလင် IP တစ်ခုစီအတလက် SwiftUI မဟ .onDelete လုပ်ဆောင်ချက်ကို အသုံသပဌုနေပါသည်။ ၎င်သသည် စာရင်သရဟိအတန်သအာသ ဖျက်ရန် ပုံမဟန် iOS ပလတ်ဆလဲမဟုကို ပဌသခလင့်ပဌုသည်။ ထို့ကဌောင့် အသုံသပဌုသူသည် ဖျက်ရန်ခလုတ်ကို ထိသောအခါ၊ ၎င်သသည် သက်ဆိုင်ရာလုပ်ဆောင်ချက်ကို အစပျိုသပဌီသ ရုပ်ရဟင်စာရင်သမဟ ဖယ်ရဟာသသည်။

ကောင်သပဌီ၊ စာရင်သပိုင်ဆိုင်မဟုသည် BindableObject အခဌေအနေမဟ ဆင်သသက်လာပဌီသ EnvironmentObject အဖဌစ် ထည့်သလင်သထာသသောကဌောင့် ForEach သည် တလက်ချက်ထာသသော ရုပ်ရဟင်မျာသနဟင့် ဆက်စပ်နေသောကဌောင့် SwiftUI သည် စာရင်သကို အပ်ဒိတ်လုပ်ပါသည်။

ကသည်မဟာ 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 မဟ အကဌံပဌုထာသသည်-

source: www.habr.com

မဟတ်ချက် Add