Манай хичээлийн жишээ бага болохоор Vuex store -ийн хэмжээ жижиг байгаа. Төслийг хөгжүүлэхийн хирээр компонентуудын тоо өсөхийн зэрэгцээ Vuex store -д тодорхойлогдох зүйлүүд нэмэгдэн ирэх нь ойлгомжтой. Эндээс state, mutation, getters, actions -д олон тооны зүйлүүдийг тодорхойлон өгснөөр файлын хэмжээ томрох, кодийг ойлгоход хүндрэлтэй болон ирнэ. Иймээс Vuex store -ийг төрөл бүрийн модулд хуваан жижиглэх арга байдгийг хичээлээр авч үзье.

Загварчлалын зарчмуудын нэгээр классуудын багцуудыг үүсгэхдээ тэдгээрийн тодорхой хэрэгжүүлэлтийн бус харин интерфейсүүдийн түвшинд загварчлах хэрэгтэй гэж үздэг. Энэ тохиолдолд интерфейс гэдэгт зөвхөн interface гэсэн түлхүүр үгээр тодорхойлогдсон C# хэлний төрлийг ойлгохоос гадна ямар нэгэн тодорхой хэрэгжүүлэлт байхгүй функционал боломжуудын тодорхойлолтыг ойлгох хэрэгтэй. Өөрөөр хэлбэл энэхүү тодорхойлолтод интерфейсүүд болон тодорхой хэрэгжүүлэлт байхгүй абстракт аргуудтай байж болох абстракт классууд ч хамрагдсан гэсэн үг.

Хукууд ердийн функцууд тул бид ч өөрсдөө хукийг зохион ашиглах боломжтой. Үүнийг input элемент, түүнд оруулсан текстийг үзүүлэх h1 гарчиг бүхий дараах энгийн

import React, {useState} from 'react'

function App() {
  const [name, setName] = useState('')
  
  const changeHandler = event => {
    setName(event.target.value)  
  }
  
  return (
    <div className="container pt-3">
      <input type="text" value={name} onChange={changeHandler}/>
      <h1>{name}</h1>
    </div>      
  );
}

export default App;

жишээгээр харцгаая.

Удамшилт (inheritance) бол ОХП -ийн үндсэн ойлголтуудын нэг. Удамшилтаар нэг класс өөр классийн ажиллагаануудыг өвлөх /дамжуулан авах/ боломж бүрддэг. Бидэнд хүнийг тодорхойлох

class Person
{
    private string _name = "";
 
    public string Name
    {
        get { return _name; }
        set { _name = value; }
    }
    public void Print()
    {
        Console.WriteLine(Name);
    }
}

Person класс байлаа гэе. Гэтэл бидэнд компаний ажилтанг тодорхойлох Employee класс хэрэгтэй боллоо гэж үзье. Компаний ажилтан хүн учраас Employee класс Person классийн хийдэг үйлдлүүдийг хийх болно.

Хичээлээр Vuex store -ийн үндсэн 4 ухагдхууны сүүлийнх болох action -ий тухай авч үзнэ. Mutation -оор Vuex store -ийн state -ийг л өөрчилдөг гэдгийг Mutations -ийг ашиглах хичээлээс мэдсэн. Үнэн хэрэгтээ mutation бол синхроноор ажиллан state -д утга олгох ердийн setter юм. mutation -д ямар нэгэн асинхроний үйл явцыг дамжуулж болдоггүй. Гэтэл програм сервер, интернет сервисүүд гэх мэт асинхрон үйл явцуудтай ажиллах шаардлага гарах нь дамжаггүй. Тэрхүү асинхрон үйл ажиллагааны үр дүнгээс хамааран state -д утга олгох ажиллагаа ихээр тохиолдох учраас асинхрон үйл явцуудтай Vuex store -ийн action нэртэй хэрэгслийг ашигладаг.

Хэвүүдийг /паттерн/ судлахын өмнө обьект хоорондын үндсэн харилцааг ойлгосон байх нь асуудлын ухагдхуун хоорондын холбоог ойлгон тэдгээрийг хэвүүдэд ашиглахад танд туслана. Обьект хоорондын харилцаанаас удамшилт /inheritance/ , хэрэгжүүлэлт /implementation/, ассоциац /association/, композиц /composition/, агрегац /aggregation/ гэсэн үндсэн харилцаануудыг онцолж болно.

useContext хичээлийн жишээн дээр useReducer хукийн ажиллагааг судлая. Та redux -ийг ашиглаж байсан бол useReducer -ийн ажиллагааны зарчмыг ойлгоход хөнгөн. useReducer -ийн ажиллагааны санаа useState -ийнхтэй төстэй ч гадаад функцийн тусламжтайгаар компонентийн төлвийн өөрчлөлтийг хийдэгт оршино. useReducer -ийг ашиглан мэдээллийг нээх, хаах ажиллагааны логикийг өөрчлөн бичье.

Төрөл бүрийн класс, структуруудад хуурамч нэрийг /төлөөлөх нэр/ өгөөд дараа нь програмд төрлийн нэрийн оронд төлөөлөх нэрийг ашиглаж болно. Жишээ нь консолд мөр гаргах Console.WriteLine() аргын Console класст төлөөлөх нэрийг

using printer = System.Console;

printer.WriteLine("Монгол улс");
printer.WriteLine("Улаанбаатар хот");

өгч болно.

vuex сан төслийн компонентуудын ажиллагаануудын хоорондын хамааралыг арилган бие даан ажиллах боломжийг бүрдүүлдэг. Getters -ийг ашиглах хичээлд vuex сангийн state, getters талбаруудыг ашиглан Counter , SecondCounter компонентуудыг бусад компонентуудаас хамааралгүйгээр ажилладаг болгосон. Counter , SecondCounter компонентууд одоо зөвхөн store -той харьцан ажиллах болсноор төслийн компонент хоорондын хамаарал багасан програмын ажиллагааны логик ойлгомжтой хөнгөн болохын дээр компонентуудыг дахин ашиглах боломж бүрдсэн.

Хичээлээр анх IBM боловсруулан гаргасан Model View Presenter (MVP) - хэвийн талаар үзнэ. MVP нь MVC загвараас үүдэлтэй боловч програмын зохион байгуулалт талаасаа нилээд өөр хандлагатай. MVP паттерн MVC -г бодвол үзүүлбэр моделтой нягт холбоогүй байдаг онцлогтой. Доор зурагт MVP хэвийн бүтцийг харууллаа.

Зургаас харахад контролерын оронд Presenter орж ирэн хэрэглэгчийн оруулсан өгөгдлийн шилжилт, загварын өөрчлөлтийг үзүүлбэрт тусгах үүргийг хариуцах болсон нь харагдана.