Perėjimas nuo "Redux" prie "MobX

Kodėl mes čia esame?

Anksčiau ar vėliau jį perkelsime į MobX būseną, kaip ir su kitomis programomis. Todėl nusprendžiau greitai į ją pažvelgti. Nebus tiek daug kodas čia ir manau, kad jau girdėjote apie Redux. Pradėkime.

Kas yra "Redux"?

Kaip nurodyta redux.js.org, tai “nuspėjama konteinerio būsena, skirta JS Programėlės.” Jį 2015 m. sukūrė Danas Abramovas ir Andrew Clarkas.
Jį galima apibūdinti taip 3 principai:

1. Vienas tiesos taškas - būsena saugoma vienoje saugykloje,
2. Būklė yra tik skaitymo - būsenos tiesiogiai keisti negalima, tam reikia atlikti veiksmą,
3. Pakeitimai atliekami naudojant grynąsias funkcijas - grynosios funkcijos pagal apibrėžtį visada grąžina tuos pačius rezultatus, kai pateikiami tam tikri parametrai, gali būti vykdomos visada ir neturi šalutinių poveikių.

Kas yra "MobX"?

Nieko nuostabaus, MobX taip pat yra būsenų valdymo biblioteka, ji skaidriai taiko funkcinį reactive programavimą (TFRP), kad būtų paprasta ir keičiamo dydžio. Panašiai kaip ir ankstesnės bibliotekos, jos filosofija apibūdinama 3 punktais:
1. Paprastas - minimalistinis, be katilo kodas ir jokių specialių įrankių, reikalingų jam naudoti,
2. Optimalus atvaizdavimas be pastangų - jis užtikrina, kad visi skaičiavimai būtų gerai optimizuoti ir to nereikėtų daryti rankiniu būdu,
3. Architektūrinė laisvė - įgyvendinimas yra nesuvaržytas ir gali būti naudojamas be jokios vartotojo sąsajos struktūros.

"MobX" ir "Redux" palyginimas

Mokymasis

React yra žinomas dėl rimto šablono, susijusio su pradine sąranka. Negalima jo nepaisyti. Ypač jei turite didesnę programą su daugybe reduktorių ir veiksmų, tikriausiai jau nusprendėte veiksmų tipus laikyti konstantomis eilutėse, o tai yra geras požiūris, tačiau tada atsiranda dar daugiau kodo! Laimei, "Redux" įrankių rinkinys populiarėja ir dabar rekomenduojama rašyti Redux logika. Jei klausiate manęs, man tai patinka! Vis dėlto reikia daug ko išmokti, tačiau paprasta bazinė sąranka su įrankių rinkiniu atlieka savo darbą.

Kai pažvelgiau į "MobX" dokumentacija, buvau tarsi vaikas, netyčia patekęs į šokolado fabriką. Nagrinėjau pavyzdžius ir vis klausiau, kaip tai gali veikti, bet tai veikia ir, matyt, veikia gerai. Bet galbūt visų reduktorių, veiksmų, tarpinių programų ir kitų dalykų tvarkymas leidžia taip lengvai susižavėti kažkuo kitu. Nepaisant to, jei esate susipažinę su OOP, MobX jums bus savaime suprantama. Pradinio kodavimo yra daug mažiau, o daugelis dalykų vyksta užkulisiuose, todėl daugeliu atvejų jums nereikia jais rūpintis.

Duomenų struktūra - kas yra valstybės viduje?

Svetainėje Redux, turime naudoti primityvus, masyvus arba paprastus JS objektus kaip duomenys mūsų valstybei.
Be to, saugant duomenis masyvuose, įprasta juos normalizuoti dėl našumo. Deja, net ir naudojant Redux įrankių rinkinio pagalbines funkcijas (pvz, createEntityAdapter), kuris vis tiek prideda papildomą kodą.

Svetainėje MobX, sukuriame savybes, ištisus objektus, masyvus, žemėlapius ir rinkinius stebimas. Taip, primityvai čia neminimi, nes jų reikšmės JS yra nekintami, todėl su jais reikia elgtis skirtingai. Viskas, ką turite žinoti, jei naudojate stebimas yra tai, kad primityvas bus įvilktas į “langelį”, o tikrasis vertės geteris ir setteris bus prieinami per .get() ir .set(newValue) atitinkamai žr. observable.box(value)

importuoti { observable, autorun } iš "mobx"

const cityName = observable.box("Vienna") // tas pats kaip observable("Vienna")

autorun(() => {
    console.log(cityName.get())
})
// Spausdina: Įrašoma: 'Vienna'.

cityName.set("Amsterdamas")
// Spausdina: 'Amsterdam'

Duomenų normalizuoti nereikia, nes MobX stebimas` klonuoja objektą, padaro jį stebimą ir taip užtikrina, kad visi pakeitimai atsispindės saugykloje, kai tik atnaujinsime bet kurią iš stebimų savybių.

Duomenų buvimo vieta - parduotuvė (-ės)

Turime vienintelį tiesos šaltinį Redux. Laikydami būseną vienoje vietoje, užtikriname, kad duomenys nesidubliuotų visoje programoje ir būtų lengviau juos derinti.

MobX iš tikrųjų rekomenduojama turėti bent dvi atskiras saugyklas - vieną, skirtą vartotojo sąsajos būsenai, ir vieną ar kelias, skirtas domeno būsenai. Toks atskyrimas leidžia mus pakartotinai naudoti domeną įvairiose programose.

Kadangi mes neapsiribojame JS paprastus objektus, atrodo natūralu sukurti savo klases tam tikriems domeno objektams, kaip siūlo autoriai. Čia, Mobx žavi tuos, kurie mėgsta objektinį programavimą. Galite turėti metodus, kontroliuoti, kas turi būti stebima, o kas ne. Be to, galime sujungti kelias saugyklas ir dalytis nuorodomis.

Nekintamas ir keičiamas

Redux reikalauja, kad būsenos atnaujinimas nemutuoja pradinę būseną. Taigi, jei į esamą masyvą norime įtraukti naują elementą, turime grąžinti naują egzempliorių, o ne tiesiog pridėti tą elementą prie esamo masyvo.

funkcija todoReducer(state = [], action) {
    // čia sukuriame naują masyvą ir naudojame plitimo operatorių, kad išsaugotume senąsias reikšmes
    return [
      ...state,
     action.payload
    ]
}

Tada MobX, galime pakeisti stebimas savybes, čia: visi masyvas. Atkreipkite dėmesį, kad pradinį masyvą mutuojame addTodo

klasė ObservableTodoStore {
  todos = [];

  constructor() {
    makeObservable(this, {
      todos: observable,
      addTodo: action,
    });
    autorun((() => console.log(this.todos.length))
  }


  addTodo(task) {
    // čia mes tiesiog įkeliame naują elementą į esamą masyvą!
    this.todos.push({
      task: task,
      completed: false,
    });
  }

}

const observableTodoStore = new ObservableTodoStore();
observableTodoStore.addTodo("Koks nors sunkus dalykas, kurį reikia padaryti");

Be to, mes netgi galime tiesiogiai atnaujinti todo sąrašą ir pamatysime, kad autorun bus paleistas (bus pastebėtas stebimo masyvo visi).

observableTodoStore.todos.push("Some other tough task");

// Kas dar įdomiau, tik atnaujinus tam tikros užduoties savybę
// "MobX" jus įspės (griežtu režimu), kad neturėtumėte to daryti tiesiogiai
observableTodoStore.todos[1].task = ("Galbūt kažkas lengvesnio");

Derinimas

Man asmeniškai labai patinka "Chrome "Redux DevTools" plėtinys. Ji leidžia greitai pažvelgti į programėlės būseną ir turi puikių galimybių grįžti pirmyn ir atgal dėl kiekvieno būsenos pokyčio (kelionė laiku!). Visa tai įmanoma dėl principo, kad jūs nekeičiate ankstesnės būsenos.

Papildomas parduotuvės abstrakcijos sluoksnis apsunkina derinimo procesą. Svetainėje "MobX Chrome" plėtinys man atrodo toks nepatogus, ypač lyginant su ankstesne patirtimi, bet gal man reikia šiek tiek laiko prie jo priprasti.

Tačiau mes turime, pvz. autorun sekimo funkcija, kurią tikriausiai dažnai naudosite pradėdami naudoti MobX ir norėdami patikrinti, kada būsena pasikeičia. Reikia atkreipti dėmesį į tai, kad funkcija stebės tik tuos pokyčius, kuriuos ji pastebi. Tai nustatoma, kai funkcija paleidžiama pirmą kartą. MobX bus prenumeruojami visi stebimieji objektai, kurie buvo perskaityti pirmojo iškvietimo metu, ir tada bus aktyvuojamas kiekvieną kartą, kai jie pasikeis.

Populiarumas

Žvelgiant į populiarumą, čia dominuoja "Redux". Netoli 4M atsisiuntimų iš npm per savaitę, palyginti su 450 tūkst. eurų už "MobX. Be to, kiekvienos bibliotekos "GitHub" saugykloje esančių autorių (~870 > 270) ir žvaigždučių (57 tūkst. > 24 tūkst.) skaičius rodo, kad "Redux" yra gerai žinomas prekės ženklas.

Kita vertus, "JS 2020" būklės ataskaita rodo, kad pasitenkinimas naudojant juos yra beveik vienodas, todėl tai tikrai nepadės jums apsispręsti, kurį iš jų pasirinkti kitam savo projektas.

Šioje diagramoje pasitenkinimas buvo apibūdintas kaip “naudotųsi dar kartą / (naudotųsi dar kartą + nesinaudotų dar kartą)”.”

Išvada

Šiame konkurse dar nėra nugalėtojų... kol kas! BTW, jokio konkurso nebuvo 😉 Manau, kad abi bibliotekos puikiai atlieka savo pagrindinę užduotį, t. y. rūpinasi, kad jūsų kompiuteryje būtų patikima valdymo būklė. JS programa . Man reikės daugiau laiko pamatyti, kaip kasdien dirbti su MobX skiriasi nuo Redux ir kokiais atvejais galėčiau jį rekomenduoti.

Kol kas galiu pasakyti, kad man jau trūksta “Redux” "DevTools" "kelionių laiku", bet, kita vertus, nustatant būseną su MobX atrodo toks paprastas, o parašytas kodas atrodo daug lengviau skaitomas.

Nepaisant to, man labai įdomu, kaip stebimas tvarko našumą, nes kaskart, kai matau kokią nors magiją, man įdomu, kiek mano kompiuterio išteklių (procesoriaus laiko, atminties ar disko) yra naudojama ir kiek ji efektyvi. Tai tikrai bus kitas mano tyrimų etapas.

Tikimės, kad grįžęs jums pateiksiu keletą tikrai įdomių paaiškinimų, kaip galite išspręsti tam tikras problemas su MobX. Iki pasimatymo!