👐🏾 👋🏾 👵 उदाहरण # F में मॉडल-व्यू-अपडेट आर्किटेक्चर 🔳 ⛷️ 👏🏻

जेएस पर लागू होने के कारण किसी ने Redux को रिएक्ट में पसंद नहीं किया?

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

मैं इस वास्तुकला पर लिखे गए कंसोल एप्लिकेशन का एक उदाहरण दूंगा, यह इस उदाहरण पर स्पष्ट होगा कि इस दृष्टिकोण का उपयोग कैसे किया जाए, और फिर हम एल्मिश वास्तुकला को समझेंगे।

मैंने कविताएं पढ़ने के लिए एक सरल कंसोल एप्लिकेशन लिखा, बीज में कई कविताएं हैं, प्रत्येक लेखक के लिए, जो कंसोल पर प्रदर्शित होती हैं।

विंडो में पाठ की केवल 4 लाइनें हैं, "अप" और "डाउन" बटन दबाकर आप कविता के माध्यम से स्क्रॉल कर सकते हैं, डिजिटल बटन टेक्स्ट का रंग बदल सकते हैं, और बाएं और दाएं बटन आपको क्रियाओं के इतिहास के माध्यम से स्थानांतरित करने की अनुमति देते हैं, उदाहरण के लिए, उपयोगकर्ता ने पुश्किन की कविता पढ़ी, जो यासीन की कविता में बदल दिया, बदल गया पाठ का रंग, और फिर सोचा कि रंग बहुत अच्छा नहीं था और यसिनन को यह पसंद नहीं आया, बाएं तीर पर डबल-क्लिक किया और उस जगह पर वापस आ गया जहां उसने पुश्किन को पढ़ना समाप्त कर दिया था।

यह चमत्कार इस तरह दिखता है:

कार्यान्वयन पर विचार करें।

यदि आप सभी विकल्पों के माध्यम से सोचते हैं, तो यह स्पष्ट है कि उपयोगकर्ता जो कुछ भी कर सकता है वह है बटन दबाएं, इसे दबाकर आप यह निर्धारित कर सकते हैं कि उपयोगकर्ता क्या चाहता है, और वह इच्छा कर सकता है:

लेखक बदलें
रंग बदलें
स्क्रॉल करें (ऊपर / नीचे)
पिछले / अगले संस्करण पर जाएं

चूंकि उपयोगकर्ता को वापस संस्करण में वापस आने में सक्षम होना चाहिए, आपको उसके कार्यों को ठीक करने और मॉडल को याद रखने की आवश्यकता है , परिणामस्वरूप, सभी संभावित संदेशों को निम्नानुसार वर्णित किया गया है:

type Msg = | ConsoleEvent of ConsoleKey | ChangeAuthor of Author | ChangeColor of ConsoleColor | ChangePosition of ChangePosition | ChangeVersion of ChangeVersion | RememberModel | WaitUserAction | Exit type ChangeVersion = | Back | Forward type ChangePosition = | Up | Down type Author = | Pushkin | Lermontov | Blok | Esenin type Poem = Poem of string

मॉडल में, आपको उस पाठ के बारे में जानकारी संग्रहीत करने की आवश्यकता है जो अब कंसोल में है, उपयोगकर्ता कार्यों का इतिहास और उपयोगकर्ता को कौन से मॉडल को दिखाने की आवश्यकता है यह जानने के लिए क्रियाओं की संख्या।

 type Model = { viewTextInfo: ViewTextInfo countVersionBack: int history: ViewTextInfo list } type ViewTextInfo = { text: string; formatText: string; countLines: int; positionY: int; color: ConsoleColor }

एल्मिश आर्किटेक्चर - मॉडल-व्यू-अपडेट, मॉडल पर पहले ही विचार किया जा चुका है, आइए देखें:

 let SnowAndUserActionView (model: Model) (dispatch: Msg -> unit) = let { formatText = ft; color = clr } = model.viewTextInfo; clearConsoleAndPrintTextWithColor ft clr let key = Console.ReadKey().Key; Msg.ConsoleEvent key |> dispatch let clearConsoleAndPrintTextWithColor (text: string) (color: ConsoleColor) = Console.Clear(); Console.WriteLine() Console.ForegroundColor <- color Console.WriteLine(text)

यह विचारों में से एक है, यह viewTextInfo के आधार पर तैयार किया गया है , उपयोगकर्ता की प्रतिक्रिया की प्रतीक्षा करता है, और इस संदेश को अपडेट फ़ंक्शन में भेजता है।
बाद में हम विस्तार से जांच करेंगे कि प्रेषण के समय वास्तव में क्या होता है , और यह किस प्रकार का कार्य है।

अपडेट :

 let update (msg: Msg) (model: Model) = match msg with | ConsoleEvent key -> model, updateConsoleEvent key | ChangeAuthor author -> updateChangeAuthor model author | ChangeColor color -> updateChangeColor model color | ChangePosition position -> updateChangePosition model position | ChangeVersion version -> updateChangeVersion model version | RememberModel -> updateAddEvent model | WaitUserAction -> model, []

संदेश के प्रकार के आधार पर , यह चयन करता है कि कौन सा फ़ंक्शन संदेश को संसाधित करेगा।

यह उपयोगकर्ता की कार्रवाई पर एक अपडेट है, बटन को संदेश पर ला रहा है , अंतिम मामला - WaitUserAction घटना लौटाता है - क्लिक को अनदेखा करें और आगे उपयोगकर्ता कार्यों के लिए प्रतीक्षा करें।

 let updateConsoleEvent (key: ConsoleKey) = let msg = match key with | ConsoleKey.D1 -> ChangeColor ConsoleColor.Red | ConsoleKey.D2 -> ChangeColor ConsoleColor.Green | ConsoleKey.D3 -> ChangeColor ConsoleColor.Blue | ConsoleKey.D4 -> ChangeColor ConsoleColor.Black | ConsoleKey.D5 -> ChangeColor ConsoleColor.Cyan | ConsoleKey.LeftArrow -> ChangeVersion Back | ConsoleKey.RightArrow -> ChangeVersion Forward | ConsoleKey.P -> ChangeAuthor Author.Pushkin | ConsoleKey.E -> ChangeAuthor Author.Esenin | ConsoleKey.B -> ChangeAuthor Author.Blok | ConsoleKey.L -> ChangeAuthor Author.Lermontov | ConsoleKey.UpArrow -> ChangePosition Up | ConsoleKey.DownArrow -> ChangePosition Down | ConsoleKey.X -> Exit | _ -> WaitUserAction msg |> Cmd.ofMsg

हम लेखक को बदलते हैं, ध्यान दें कि countVersionBack को तुरंत 0 पर रीसेट किया जाता है, जिसका अर्थ है कि यदि उपयोगकर्ता अपनी कहानी पर वापस आ गया है और फिर रंग बदलना चाहता है, तो इस क्रिया को नया माना जाएगा और इसे इतिहास में जोड़ा जाएगा।

 let updateChangeAuthor (model: Model) (author: Author) = let (Poem updatedText) = seed.[author] let updatedFormatText = getlines updatedText 0 3 let updatedCountLines = (splitStr updatedText).Length let updatedViewTextInfo = {model.viewTextInfo with text = updatedText; formatText = updatedFormatText; countLines = updatedCountLines } { model with viewTextInfo = updatedViewTextInfo; countVersionBack = 0 }, Cmd.ofMsg RememberModel

हम वर्तमान मॉडल को जोड़ने के साथ, इतिहास को अपडेट करने वाले हैंडलर को एक मैमोडेल संदेश भी भेजते हैं।

 let updateModelHistory model = { model with history = model.history @ [ model.viewTextInfo ] }, Cmd.ofMsg WaitUserAction

शेष अपडेट यहां देखे जा सकते हैं , वे उन लोगों के समान हैं जिन्हें माना जाता है।

कार्यक्रम के प्रदर्शन का परीक्षण करने के लिए, मैं कई परिदृश्यों के लिए परीक्षण दूंगा:

परीक्षण

रन विधि उस संरचना को लेती है जिसमें संदेश सूची संग्रहीत की जाती है और वे संसाधित होने के बाद मॉडल को वापस कर देते हैं।

 [<Property(Verbose=true)>] let ``    `` (authors: Author list) = let state = (createProgram (authors |> List.map ChangeAuthor) |> run) match (authors |> List.tryLast) with | Some s -> let (Poem text) = seed.[s] state.viewTextInfo.text = text | None -> true [<Property(Verbose=true)>] let ``    `` changeColorMsg = let state = (createProgram (changeColorMsg|>List.map ChangeColor)|> run) match (changeColorMsg |> List.tryLast) with | Some s -> state.viewTextInfo.color = s | None -> true [<Property(Verbose=true,Arbitrary=[|typeof<ChangeColorAuthorPosition>|])>] let ``        `` msgs = let tryLastSomeList list = list |> List.filter (Option.isSome) |> List.map (Option.get) |> List.tryLast let lastAuthor = msgs |> List.map (fun x -> match x with | ChangeAuthor a -> Some a | _ -> None) |> tryLastSomeList let lastColor = msgs |> List.map (fun x -> match x with | ChangeColor a -> Some a | _ -> None) |> tryLastSomeList let state = (createProgram msgs |> run) let colorTest = match lastColor with | Some s -> state.viewTextInfo.color = s | None -> true let authorTest = match lastAuthor with | Some s -> let (Poem t) = seed.[s]; state.viewTextInfo.text = t | None -> true authorTest && colorTest

इसके लिए, FsCheck लाइब्रेरी का उपयोग किया जाता है, जो डेटा उत्पन्न करने की क्षमता प्रदान करता है।

अब कार्यक्रम के मूल पर विचार करें, एल्मिश में कोड सभी अवसरों के लिए लिखा गया था, मैंने इसे सरल बना दिया ( मूल कोड) :

 type Dispatch<'msg> = 'msg -> unit type Sub<'msg> = Dispatch<'msg> -> unit type Cmd<'msg> = Sub<'msg> list type Program<'model, 'msg, 'view> = { init: unit ->'model * Cmd<'msg> update: 'msg -> 'model -> ('model * Cmd<'msg>) setState: 'model -> 'msg -> Dispatch<'msg> -> unit } let runWith<'arg, 'model, 'msg, 'view> (program: Program<'model, 'msg, 'view>) = let (initModel, initCmd) = program.init() //1 let mutable state = initModel //2 let mutable reentered = false //3 let buffer = RingBuffer 10 //4 let rec dispatch msg = let mutable nextMsg = Some msg; //5 if reentered //6 then buffer.Push msg //7 else while Option.isSome nextMsg do // 8 reentered <- true // 9 let (model, cmd) = program.update nextMsg.Value state // 9 program.setState model nextMsg.Value dispatch // 10 Cmd.exec dispatch cmd |> ignore //11 state <- model; // 12 nextMsg <- buffer.Pop() // 13 reentered <- false; // 14 Cmd.exec dispatch initCmd |> ignore // 15 state //16 let run program = runWith program

Dispath <'msg> प्रकार वास्तव में प्रेषण में उपयोग किया जाता है, यह संदेश और रिटर्न इकाई लेता है
उप <'msg> - सब्सक्राइबर फ़ंक्शन, डिस्पैच और रिटर्न यूनिट स्वीकार करता है, हम सबस सूची का उपयोग करते हैं जब हम पैन का उपयोग करते हैं :

 let ofMsg<'msg> (msg: 'msg): Cmd<'msg> = [ fun (dispatch: Dispatch<'msg>) -> dispatch msg ]

कॉल करने के बाद, जैसे कि Cmd.ofMsg को याद रखें अपडेट के अंत में याद रखेंमॉडल विधि, थोड़ी देर के बाद सब्सक्राइबर को कॉल किया जाता है और संदेश अपडेट विधि में जाता है
Cmd <'msg> - शीट उप <' msg>

चलो प्रोग्राम प्रकार पर चलते हैं, यह एक सामान्य प्रकार है, यह मॉडल, संदेश और दृश्य का प्रकार लेता है, कंसोल एप्लिकेशन में दृश्य से कुछ वापस करने की आवश्यकता नहीं है, लेकिन एल्मिश में। यह देखें कि यह DOM ट्री के F # संरचना को लौटाता है।

Init फ़ील्ड को एल्मिश की शुरुआत में कहा जाता है, यह फ़ंक्शन प्रारंभिक मॉडल और पहला संदेश लौटाता है, मेरे मामले में मैं Cmd.ofMsg को याद करता हूंमॉडल
अपडेट अपडेट का मुख्य कार्य है, आप पहले से ही इससे परिचित हैं।

SetState - मानक एल्मिश में, यह केवल मॉडल को स्वीकार करता है और प्रेषण और कॉल व्यू देता है , लेकिन मुझे संदेश के आधार पर दृश्य को बदलने के लिए msg को पास करना होगा, मैसेज पर विचार करने के बाद मैं इसका कार्यान्वयन दिखाऊंगा।

रनविथ फ़ंक्शन को कॉन्फ़िगरेशन प्राप्त होता है, फिर कॉल इनिट , मॉडल और पहला संदेश वापस आ जाता है, तर्ज पर 2,3 दो परस्पर वस्तुओं को घोषित किया जाता है, पहला - जिसमें राज्य संग्रहीत किया जाएगा, दूसरा प्रेषण फ़ंक्शन द्वारा आवश्यक है।

4 वीं पंक्ति पर, बफर घोषित किया गया है - आप इसे एक कतार के रूप में ले सकते हैं, पहले आया था - पहला बाहर आया था (वास्तव में, रिंग बफ़र का कार्यान्वयन बहुत दिलचस्प है, मैंने इसे पुस्तकालय से लिया है, मैं आपको इसे गीथूब के साथ पढ़ने की सलाह देता हूं)

इसके बाद पुनरावर्ती प्रेषण कार्य आता है, वही जिसे देखने के लिए कहा जाता है, पहली कॉल पर, हम लाइन 6 पर लाइन को बाईपास करते हैं और तुरंत लूप में चले जाते हैं, फिर से सही पर सेट किया जाता है ताकि बाद के पुनरावर्ती कॉल इस लूप में वापस न जाएं, लेकिन जोड़ें बफर में नया संदेश।

लाइन 9 पर, हम अपडेट विधि को निष्पादित करते हैं, जिसमें से हम बदले हुए मॉडल और एक नया संदेश चुनते हैं (पहली बार यह याद रखें संदेश है)
लाइन 10 मॉडल खींचता है, सेटस्ट्रेट विधि इस तरह दिखती है:

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

पहली बार, OnlyShowView फ़ंक्शन को बुलाया जाएगा, जो केवल मॉडल को आकर्षित करेगा।
अगर WaitMserAction संदेश याद करने के बजाय विधि में आया है, तो ShowAndUserActionView फ़ंक्शन को बुलाया जाएगा, जो मॉडल को आकर्षित करेगा और प्रवाह को अवरुद्ध करेगा, बटन दबाए जाने की प्रतीक्षा कर रहा है, जैसे ही बटन दबाया जाएगा, प्रेषण विधि फिर से कॉल की जाएगी और संदेश बफर में भेज दिया जाएगा (क्योंकि reenvited = गलत लिखा गया है )

इसके बाद, आपको अपडेट विधि से आए सभी संदेशों को संसाधित करने की आवश्यकता है, अन्यथा हम उन्हें खो देंगे, पुनरावर्ती कॉल केवल तभी लूप में आएंगे जब प्रतिशोध झूठा हो जाएगा। लाइन 11 जटिल लगती है, लेकिन वास्तव में यह बफर में सभी संदेशों का एक धक्का है:

 let exec<'msg> (dispatch: Dispatch<'msg>) (cmd: Cmd<'msg>) = cmd |> List.map (fun sub -> sub dispatch)

अपडेट विधि द्वारा लौटे सभी ग्राहकों के लिए, प्रेषण को बुलाया जाएगा, जिससे इन संदेशों को बफर में जोड़ा जा सके।

पंक्ति 12 पर हम मॉडल को अपडेट करते हैं, एक नया संदेश प्राप्त करते हैं और जब बफर खाली नहीं होता है तो झूठे पर वापस लौटते हैं यह आवश्यक नहीं है, लेकिन अगर कोई तत्व नहीं बचा है और प्रेषण केवल दृश्य से कहा जा सकता है, तो यह समझ में आता है। फिर से, हमारे मामले में, जब सब कुछ सिंक्रोनस होता है, तो इसका कोई मतलब नहीं है, क्योंकि हम लाइन 10 पर एक सिंक्रोनस डिस्पैच कॉल की उम्मीद करते हैं, लेकिन अगर कोड में एसिंक्रोनस कॉल हैं, तो कॉलबैक से डिस्पैच को कॉल किया जा सकता है और आपको प्रोग्राम को जारी रखने में सक्षम होना चाहिए।

खैर, यह प्रेषण समारोह का पूरा विवरण है, लाइन 15 पर इसे कॉल किया जाता है और लाइन 16 पर राज्य लौटा दिया जाता है ।

कंसोल एप्लिकेशन में, जब बफर खाली हो जाता है तब निकास निकलता है। मूल संस्करण में, रनविथ कुछ भी नहीं देता है , लेकिन इसके बिना परीक्षण असंभव है।

परीक्षण के लिए कार्यक्रम अलग है, createProgram फ़ंक्शन उन संदेशों की एक सूची को स्वीकार करता है जो उपयोगकर्ता आरंभ करेगा और SetState में वे सामान्य क्लिक को प्रतिस्थापित करते हैं:

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

मुझे आशा है कि मैं यह समझाने में कामयाब रहा कि एल्मिश और इसी तरह की प्रणाली कैसे काम करती है, काफी एल्मिश कार्यक्षमता ओवरबोर्ड बनी हुई है, यदि आप इस विषय में रुचि रखते हैं, तो मैं आपको उनकी वेबसाइट देखने की सलाह देता हूं।

आपका ध्यान के लिए धन्यवाद!

उदाहरण # F में मॉडल-व्यू-अपडेट आर्किटेक्चर

More articles: