Redux SwiftUI में राज्य कंटेनरों की तरह हैं। मूल बातें

इस सप्ताह हम Redux द्वारा उपयोग किए गए एक के समान एक राज्य कंटेनर बनाने के बारे में बात करेंगे। यह विकास के तहत आवेदन के लिए मूल्य का एकमात्र स्रोत है। पूरे आवेदन के लिए एक एकल राज्य डिबगिंग और सत्यापन को आसान बनाता है। सत्य मूल्यों का एक एकल स्रोत हजारों त्रुटियों को समाप्त करता है जो एक अनुप्रयोग में कई राज्यों को बनाते समय होता है।

सत्य मूल्यों का एकल स्रोत

मुख्य विचार एकल संरचना या संरचनाओं की संरचना के माध्यम से पूरे आवेदन की स्थिति का वर्णन करना है। मान लीजिए कि हम एक जीथब रिपॉजिटरी खोज एप्लिकेशन पर काम कर रहे हैं, जहां राज्य रिपॉजिटरी की एक सरणी है जिसे हम जीथब एपीआई का उपयोग करके एक विशिष्ट अनुरोध के अनुसार चुनते हैं।

struct AppState { var searchResult: [Repo] = [] } 

अगला कदम आवेदन के भीतर प्रत्येक दृश्य के लिए राज्य (केवल पढ़ने के लिए) को पारित करना है। इसे पूरा करने का सबसे अच्छा तरीका स्विफ्टयूआई के पर्यावरण का उपयोग करना है। आप आधार दृश्य के पर्यावरण के लिए संपूर्ण एप्लिकेशन की स्थिति वाले ऑब्जेक्ट को भी पास कर सकते हैं। बेस दृश्य सभी बच्चे के विचारों के साथ पर्यावरण साझा करेंगे। SwiftUI के पर्यावरण के बारे में अधिक जानने के लिए, SwiftUI प्रकाशन में पर्यावरण की शक्ति की जाँच करें।

 final class Store: ObservableObject { @Published private(set) var state: AppState } 

उपरोक्त उदाहरण में, हमने एक स्टोर ऑब्जेक्ट बनाया, जो एप्लिकेशन की स्थिति को संग्रहीत करता है और इसे केवल पढ़ने के लिए एक्सेस प्रदान करता है। स्टेट प्रॉपर्टी @Published प्रॉपर्टी के रैपर का इस्तेमाल करती है, जो किसी भी बदलाव के SwiftUI को सूचित करता है। यह आपको पूरे एप्लिकेशन को लगातार अपडेट करने की अनुमति देता है, इसे सत्य मूल्यों के एकल स्रोत से प्राप्त करता है। इससे पहले, हमने पिछले लेखों में स्टोरेज ऑब्जेक्ट्स के बारे में बात की थी। इसके बारे में और जानने के लिए, आपको " स्विफ्टयूआई में स्टोरिंग ऑब्जेक्ट्स का उपयोग करके मॉडलिंग एप्लीकेशन स्टेट " का उपयोग करना होगा ।

Reducer और क्रियाएँ

यह उन उपयोगकर्ता क्रियाओं के बारे में बात करने का समय है जो राज्य परिवर्तन का नेतृत्व करते हैं। एक क्रिया एक साधारण गणना या एक राज्य परिवर्तन का वर्णन करने वाले गणना का संग्रह है। उदाहरण के लिए, डेटा सैंपलिंग के दौरान लोड मान सेट करें, परिणामी रिपॉजिटरी को एक राज्य संपत्ति, आदि को असाइन करें। अब कार्रवाई की गणना के लिए नमूना कोड पर विचार करें।

 enum AppAction { case search(query: String) case setSearchResult(repos: [Repo]) } 

Reducer एक फ़ंक्शन है जो वर्तमान स्थिति लेता है, राज्य पर एक कार्रवाई लागू करता है, और एक नया राज्य बनाता है। आमतौर पर रिड्यूसर की रीड्यूसर या रचना एक ऐसी जगह होती है, जिसमें आवेदन बदल जाता है। तथ्य यह है कि एक एकल फ़ंक्शन किसी एप्लिकेशन की संपूर्ण स्थिति को बदल सकता है, कोड को बहुत सरल, परीक्षण करने में आसान और डीबग करना आसान बनाता है। निम्न कार्य को कम करने का एक उदाहरण है।

 struct Reducer<State, Action> { let reduce: (inout State, Action) -> Void } let appReducer: Reducer<AppState, AppAction> = Reducer { state, action in switch action { case let .setSearchResults(repos): state.searchResult = repos } } 

अप्रत्यक्ष प्रवाह

अब डेटा प्रवाह के बारे में बात करने का समय है। प्रत्येक दृश्य में स्टोर ऑब्जेक्ट के माध्यम से राज्य में केवल पढ़ने के लिए पहुंच है। व्यूज़ रिपॉजिटरी ऑब्जेक्ट पर कार्रवाई भेज सकते हैं। Reducer राज्य बदलता है, और फिर SwiftUI राज्य परिवर्तनों के सभी विचारों को सूचित करता है। SwiftUI में एक सुपर-कुशल तुलना एल्गोरिथ्म है, इसलिए पूरे एप्लिकेशन की स्थिति प्रदर्शित करना और बदले हुए विचारों को अपडेट करना बहुत तेज़ है।

राज्य -> ​​दृश्य -> ​​क्रिया -> राज्य -> ​​दृश्य

यह आर्किटेक्चर केवल एक यूनिडायरेक्शनल डेटा स्ट्रीम के आसपास काम करता है। इसका मतलब यह है कि एप्लिकेशन के सभी डेटा एक ही पैटर्न का अनुसरण करते हैं, जो बनाए गए एप्लिकेशन के तर्क को अधिक पूर्वानुमान और समझने में आसान बनाता है। कार्रवाई सबमिट करने के लिए स्टोर ऑब्जेक्ट बदलें।

 final class Store<State, Action>: ObservableObject { @Published private(set) var state: State private let appReducer: Reducer<State, Action> init(initialState: State, appReducer: @escaping Reducer<State, Action>) { self.state = initialState self.appReducer = appReducer } func send(_ action: Action) { appReducer.reduce(&state, action) } } 

साइड इफेक्ट

हमने पहले ही एक यूनिडायरेक्शनल स्ट्रीम लागू कर दिया है जो उपयोगकर्ता के कार्यों को स्वीकार करता है और राज्य को बदलता है, लेकिन एक एसिंक्स एक्शन के बारे में क्या है, जिसे हम आमतौर पर साइड इफेक्ट करते हैं । उपयोग किए गए संग्रहण प्रकार के लिए अतुल्यकालिक कार्य समर्थन कैसे जोड़ें? मुझे लगता है कि यह संयोजन फ्रेमवर्क के उपयोग को शुरू करने का समय है, जो अतुल्यकालिक कार्यों को संभालने के लिए आदर्श है।

 import Foundation import Combine protocol Effect { associatedtype Action func mapToAction() -> AnyPublisher<Action, Never> } enum SideEffect: Effect { case search(query: String) func mapToAction() -> AnyPublisher<Action, Never> { switch self { case let .search(query): return dependencies.githubService .searchPublisher(matching: query) .replaceError(with: []) .map { AppAction.setSearchResults(repos: $0) } .eraseToAnyPublisher() } } } 

हमने प्रभाव प्रोटोकॉल को शुरू करके async कार्यों के लिए समर्थन जोड़ा। प्रभाव एक एक्शन सीक्वेंस है , जिसे कॉम्बिनेशन फ्रेमवर्क से प्रकाशक प्रकार का उपयोग करके प्रकाशित किया जा सकता है। यह आपको कम्बाइन के साथ अतुल्यकालिक नौकरियों को संसाधित करने की अनुमति देता है, और फिर उन कार्रवाइयों को प्रकाशित करता है जो Reducer वर्तमान स्थिति पर कार्रवाई करने के लिए उपयोग करेगा।

 final class Store<State, Action>: ObservableObject { @Published private(set) var state: State private let appReducer: Reducer<State, Action> private var cancellables: Set<AnyCancellable> = [] init(initialState: State, appReducer: Reducer<State, Action>) { self.state = initialState self.appReducer = appReducer } func send(_ action: Action) { appReducer.reduce(&state, action) } func send<E: Effect>(_ effect: E) where E.Action == Action { effect .mapToAction() .receive(on: DispatchQueue.main) .sink(receiveValue: send) .store(in: &cancellables) } } 

व्यावहारिक उदाहरण

अंत में, हम रिपॉजिटरी खोज एप्लिकेशन को पूरा कर सकते हैं, जो अतुल्यकालिक रूप से गिथब एपीआई को कॉल करता है और क्वेरी से मेल खाने वाले रिपॉजिटरी का चयन करता है। आवेदन का पूर्ण स्रोत कोड जीथब पर उपलब्ध है।

 struct SearchContainerView: View { @EnvironmentObject var store: Store<AppState, AppAction> @State private var query: String = "Swift" var body: some View { SearchView( query: $query, repos: store.state.searchResult, onCommit: fetch ).onAppear(perform: fetch) } private func fetch() { store.send(SideEffect.search(query: query)) } } struct SearchView : View { @Binding var query: String let repos: [Repo] let onCommit: () -> Void var body: some View { NavigationView { List { TextField("Type something", text: $query, onCommit: onCommit) if repos.isEmpty { Text("Loading...") } else { ForEach(repos) { repo in RepoRow(repo: repo) } } }.navigationBarTitle(Text("Search")) } } } 

स्क्रीन को दो दृश्यों में विभाजित करें: कंटेनर व्यू और रेंडरिंग व्यू । कंटेनर व्यू क्रियाओं को नियंत्रित करता है और वैश्विक राज्य से आवश्यक भागों का चयन करता है। रेंडरिंग दृश्य डेटा प्राप्त करता है और उन्हें प्रदर्शित करता है। हमने पिछले लेखों में कंटेनर दृश्यों के बारे में पहले से ही बात की है, अधिक जानने के लिए, लिंक का अनुसरण करें " स्विफ्टयूआई में कंटेनर विचारों का परिचय "

निष्कर्ष

आज हमने सीखा कि साइड-इफेक्ट को ध्यान में रखते हुए Redux जैसा स्टेट कंटेनर कैसे बनाया जाए । ऐसा करने के लिए, हमने स्विफ्टयूआई पर्यावरण फ़ंक्शन और कंबाइन ढांचे का उपयोग किया। मुझे उम्मीद है कि यह लेख सहायक रहा है।

पढ़ने के लिए धन्यवाद, और जल्द ही मिलते हैं!