Kuidas kasutada ReSolve'i vaatemudeleid

Kaasaegsed esiotsa JavaScripti raamistikud, näiteks React, pakuvad uut viisi kasutajaliideste loomiseks, rakendades funktsionaalse reaktiivse programmeerimise põhimõtteid kasutajaliidese arendamisel.

See artikkel tutvustab isomorfseid ja reaktiivseid kasutajaliidese arendamise tehnikaid, kasutades Reacti ja Reduxi teeke ja ReSolve'i raamistikku.

Põhimõisted

CQRS-i põhimõtte kohaselt tuleks rakendus eraldada lugemis- ja kirjutamisküljeks: lugemiskülje funktsioonid ei tohiks kunagi andmeid muuta. ReSolve kasutab lugemis- ja kirjutamiskülje eraldamiseks järgmisi mõisteid:

  • Loe mudel - kasutatakse süsteemi oleku või selle osa pärimiseks päringutes (enamasti GraphQL).
  • Vaata mudelit - kasutatakse süsteemi oleku kuvamiseks kasutajaliideses. Töötab kliendi poolel.
  • Kirjuta mudel - kasutatakse süsteemi oleku muutmiseks.

ReSolve'is jaotatakse CQRSi lugemiskülg mudeliteks loe ja vaata. Kuna vaademudelid pakuvad kasutajaliidese andmeid, kirjeldatakse seda mõistet üksikasjalikumalt.

Vaatemudeli viitetüüp

Vaatemudelit saab kirjeldada järgmiselt:

kirjuta ViewModel = {
    nimi: Keel
    projektsioon: {
        Init: Kehtetu -> olek
        [EventType]: (olek, sündmus) -> olek
        // ...
    }
    serializeState: Olek -> String
    tájéializeState: keelpill -> olek
}
tüüp olek = muutumatu 
tüüp Event = {
    aggregateId: UUID
    ajatempel: Kuupäev
    tüüp: EventType
    kasulik koormus: ükskõik milline
}
tüüp EventType = String

Mis tahes loetud mudeli (vaademudel on loetava mudeli tüüp) peamine osa on selle projektsioonifunktsioonid. Neid funktsioone kasutatakse oleku muutuste kirjeldamiseks reageerimisel sündmustele. Kuid loetud mudel ei muuda olekut, kuna vastavalt sündmuste hankimise kontseptsioonile salvestatakse oleku asemel sündmuste voog. Projektsiooni kasutatakse sündmuse voo oleku saamiseks (rakendage järjestikused sündmused algseisundisse ja tagastage tulemus). Seega näitavad projektsioonifunktsioonid, kuidas olek muutub pärast iga võimalikku sündmust.

Kuna vaatemudeleid täidetakse kliendi poolel, tuleks olek üle kanda kliendi brauserisse, mis tähendab, et see peaks olema hõlpsasti seerialiseeritav. Serialiseerimis- ja sellekohaseks muutmise protsessi kirjeldavad funktsioonid serializeState ja activializeState. Enamikul juhtudel saame selleks kasutada JSON-vormingut.

Kuidas see Reduxi kliendi poolel töötab?

Vaatemudeli tellimine / tellimusest loobumine aggregateId abil

Pärast komponendi installimist kutsutakse komponentDidMount (). Kasutage seda meetodit sündmuste tellimiseks. Seda meetodit saate kasutada sündmuste tellimiseks, kuid peaksite sündmuste tellimusest loobuma, kasutades komponentiWillUnmount ().

KomponentWillUnmount () käivitatakse vahetult enne komponendi lahtivõtmist ja hävitamist.

Selle protsessi automatiseerimiseks kasutage kõrgema järgu komponendi ühendamist (HOC).

importige {connect} rakendusest 'resol-redux';
const mapStateToProps = olek => ({
    ... olek [viewModelName] [aggregateId],
    viewModelName, // kohustuslik väli
    aggregateId // kohustuslik väli
});
eksporti vaikekontakt (mapStateToProps) (komponent);

Algriigi taotlus

Ühendus tegeleb SUBSCRIBE toiminguga ja nõuab serverilt kindlaksmääratud aggregateId-ga algse vaate mudeli olekut.

Telli sündmused

Pärast esialgse oleku saamist tellib ühendus sündmused ja loob veebipistiku ühenduse.

Loobu sündmuste tellimusest

Ühendus tegeleb toimingu UNSUBSCRIBE eemaldamisega, eemaldab valitud mudeli olekuga määratud aggregateId ja loobub sündmuste tellimusest.

Kuidas lisada kauplusesse createResolveMiddleware

impordi {createStore, applyMiddleware} rakendusest 'redux';
impordi {createResolveMiddleware, createViewModelsReducer} kaustast 'resol-redux';
impordi viewModels kataloogist '../../common/view-models';
const reduktor = createViewModelsReducer ();
const vahetarkvara = [createResolveMiddleware (viewModels)];
eksport vaikimisi InitState => createStore (reduktor, InitState, applyMiddleware (... vahetarkvara));

Kuidas see ReSolve'i serveripoolel töötab?

Riigitaotlus

Päring saab praeguse vaatemudeli oleku määratud aggregateId-ga. Kui määratud olek on vahemälus, tagastatakse see koheselt. Vastasel juhul haldab vaatemudel kõiki EventStore'i sündmusi, millel on oleku loomiseks määratud aggregateId. Saadud olek salvestatakse vahemällu ja saadetakse kliendile.

Liitu sündmuste tellimisega / tellimusest loobumisega

Kõik EventStore'i salvestatud sündmused saadetakse reaalajas ka bussi. Klient saab sündmusi, kui tal on aktiivne tellimus määratletud aggregateId ja eventTypes tüüpi sündmustega.

Koodinäited

  • ToDo rakenduse näide

Lingid

  • GitHub “ReSolve”
  • Rakenduse loomine-lahendamine
  • Loe mudelit, vaata mudelit ja päringut
  • Lahenda-vähenda
  • Twitter “ReSolve”
  • Facebook “ReSolve”