<\/div>\n

Merhaba,<\/p>\n

UI tabanl\u0131 geli\u015ftirilen Single Page Application(SPA) uygulamalar\u0131nda ziyaret\u00e7ilere masa\u00fcst\u00fc yaz\u0131l\u0131mlar\u0131na yak\u0131n bir dinamizm ile e\u015flik edilirken, bu avantaj\u0131n bir yandan da dezavantaj\u0131 olabilecek olan sayfada tutars\u0131z verilerin olmas\u0131 durumlar\u0131yla s\u0131k s\u0131k kar\u015f\u0131la\u015f\u0131labilmektedir. Bu tutars\u0131z verilerden kastedileni yaz\u0131n\u0131n ilerleyen paragraflar\u0131nda daha da a\u00e7acak olsak dahi k\u0131saca bahsetmemiz gerekirse e\u011fer; misal olarak uygulama ekran\u0131nda sepette \u00fc\u00e7 \u00fcr\u00fcn g\u00f6z\u00fck\u00fcyorken, metinsel k\u0131s\u0131mda ise bu say\u0131 sepettekiyle tutarl\u0131l\u0131k g\u00f6stermiyor olabilir. Ya da sepete yeni bir \u00fcr\u00fcn eklendi\u011finde veya \u00e7\u0131kar\u0131ld\u0131\u011f\u0131nda biryandan metinsel k\u0131sm\u0131n duruma g\u00f6re g\u00fcncellenmesi beklenir. Ama bazen olmayabilir. Olmayabilir, \u00e7\u00fcnk\u00fc uygulama geli\u015ftirme s\u00fcrecinde kullan\u0131lan pattern’\u0131n bizlere sa\u011flayabildi\u011fi kadar g\u00fcncellemelere \u00f6zen g\u00f6sterilse dahi bir yerden sonra uygulama kompleksitesi artarak, bu g\u00fcncellemeleri yapmak ve y\u00f6netmek zorla\u015fabilir. \u0130\u015fte bu tarz, uygulama \u00fczerinde tutarl\u0131l\u0131\u011f\u0131 ilgilendiren ve bir verinin b\u00fct\u00fcnselli\u011fi a\u00e7\u0131s\u0131ndan y\u00f6netilebilirli\u011fi sa\u011flamak i\u00e7in geli\u015ftirilen genel stratejiye State Management<\/em> denmektedir. \u015eimdi gelin bu kavram nedir, k\u00f6kleri nerelere dayanmaktad\u0131r ve bizlere \u00e7\u00f6z\u00fcm olarak ne gibi yap\u0131lar sunmaktad\u0131r hep beraber inceleyelim.<\/p>\n

Her\u015feyden \u00f6nce, State Management’i anlayabilmek i\u00e7in State kavram\u0131n\u0131 anlamak gerekmektedir. Bizler, \u00f6nceden kaleme alm\u0131\u015f oldu\u011fumuz Finite-State Machine Nedir?<\/a> ba\u015fl\u0131kl\u0131 makalemizde bir program\/yaz\u0131l\u0131m i\u00e7in state’in ne manaya geldi\u011fine de\u011finmi\u015ftik. \u0130lgili makaleye g\u00f6z atman\u0131z\u0131 \u00f6nermekle birlikte yine de bu i\u00e7eri\u011fimizde konuyu ayd\u0131nlatabilmek i\u00e7in ayr\u0131 bir dille izah etmeye \u00e7al\u0131\u015faca\u011f\u0131z.<\/p>\n

State Nedir?<\/h4>\n
Bir uygulama i\u00e7in state, o uygulaman\u0131n t\u00fcm belle\u011fidir diyebiliriz. Yani, uygulama s\u00fcrecindeki herhangi bir veri o anki state’i temsil etmektedir.<\/p>\n
\u0130\u015fte state bu! Peki State Management nedir?<\/em> diye sordu\u011funuzu duyar gibiyim…<\/p>\n
State Management Nedir?<\/h4>\n
Uygulamadaki verilerden(yani state’lerden) herhangi biri de\u011fi\u015fkenlik g\u00f6sterdi\u011fi taktirde, bu veriyi\/state’i kullanan t\u00fcm noktalarda bu de\u011fi\u015fikli\u011fin yans\u0131mas\u0131 gerekmektedir. \u0130\u015fte bu state’lerin(yani verilerin) kullan\u0131ld\u0131\u011f\u0131 farkl\u0131 noktalar \u00fczerinde anl\u0131k de\u011fi\u015fimlerin yans\u0131mas\u0131na ise State Management denmektedir.<\/p>\n
En yal\u0131n haliyle State Management’\u0131nda ne oldu\u011funu \u00f6\u011frendikten sonra muhtemelen akl\u0131n\u0131zdaki Peki hoca, NgRx k\u00fct\u00fcphanesi nedir?<\/em> misali sualinizi cevapland\u0131rmaya \u00e7al\u0131\u015fal\u0131m…<\/p>\n
NgRx K\u00fct\u00fcphanesi Nedir?<\/h4>\n
NgRx k\u00fct\u00fcphanesini anlayabilmek i\u00e7in Redux’\u0131, Redux’\u0131 anlayabilmek i\u00e7in ise Flux Pattern’i anlamam\u0131z gerekmektedir. Haliyle, konuyu net kavrayabilmek ve \u00f6z\u00fcmseyebilmek i\u00e7in en temelden ele almam\u0131z gerekmektedir. Eee hadi o zaman, fazla vakit kaybetmeden, buyrun ba\u015flayal\u0131m…<\/p>\n
\u0130lk etapta konuyu Angular mimarisi baz\u0131nda ele alarak ba\u015flayaca\u011f\u0131z. Biliyorsunuz ki, tipik bir Angular uygulamas\u0131 bir\u00e7ok bile\u015fenden meydana gelecek \u015fekilde tasarlanabilmekte ve uygulamadaki bu bile\u015fenlerin her biri, di\u011fer bile\u015fenlerin haberi olmayacak \u015fekilde kendilerine has state’ler bar\u0131nd\u0131rabilmektedir. Bu bile\u015fenlerin, bir araya gelerek meydana getirdikleri uygulamada nihai olarak b\u00fct\u00fcnsel anlamda bir uygulama verisi s\u00f6z konusu olmaktad\u0131r. \u0130\u015fte bu durumda, bile\u015fenlerden herhangi birinde olu\u015facak state de\u011fi\u015fimi, b\u00fct\u00fcnsel anlamda o state’i kullanan di\u011fer bile\u015fenlere de yans\u0131t\u0131lmas\u0131 gerekmektedir. Yani anlayaca\u011f\u0131n\u0131z birden \u00e7ok bile\u015fen bir araya geldi\u011fi zaman, sayfa tutarl\u0131l\u0131\u011f\u0131 a\u00e7\u0131s\u0131ndan bu bile\u015fenlerdeki state’lerin y\u00f6netilmesi gerekmektedir.<\/p>\n
$\"Angular$ <\/a>Esas\u0131nda, bile\u015fenler aras\u0131nda state de\u011fi\u015fiklikleri i\u00e7in gerekli haberle\u015fmeyi parent ve child seviyesinde @Input ve @Output tan\u0131mlar\u0131 arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015ftirebilmekteyiz. Bu konuya dair gerekli teferruat i\u00e7in Angular\u2019da @Input ve @Output De\u011fi\u015fkenler \u0130le Componentler Aras\u0131 \u0130leti\u015fim<\/a> ba\u015fl\u0131kl\u0131 makaleyi okuman\u0131z yeterli olacakt\u0131r.
\n $\"Angular$ <\/a>Bir bile\u015fendeki de\u011fi\u015fikli\u011fi @Input veya @Output tan\u0131mlar\u0131 arac\u0131l\u0131\u011f\u0131yla di\u011fer bile\u015fene iletmek, yandaki \u015femada g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere makul say\u0131daki bile\u015fenlerin kullan\u0131ld\u0131\u011f\u0131 senaryolar i\u00e7in ge\u00e7erli olacakt\u0131r. $\"Angular$ <\/a>Kullan\u0131lan bile\u015fenlerin say\u0131s\u0131 sa\u011fdaki \u015femada oldu\u011fu gibi artt\u0131k\u00e7a, @Input ve @Output ile state bilgilerinin iletilmesi bildi\u011finiz kabus haline gelecektir. Misal olarak, ‘Component 3’den ‘Component 6’ya bir veri aktarmam\u0131z gerekiyorsa e\u011fer bunu ad\u0131 ge\u00e7en y\u00f6ntemlerle uygulamak, deveye hendek atlatt\u0131rmakla e\u015fde\u011ferdir. Nihayetinde bu uygulama bir gayeye hizmet etmek i\u00e7in geli\u015ftirilirken, maliyetin b\u00fcy\u00fck \u00e7o\u011funlu\u011fu bu y\u00fcksek kompleksiteye sahip operasyon i\u00e7in harcan\u0131yor olacakt\u0131r.<\/p>\n
\u0130\u015fte bu durum klasik bir State Management problemi ortaya koymaktad\u0131r. <\/p>\n
Bu klasik State Management probleminin daha da tarihsel bir mazisi var m\u0131?<\/strong><\/p>\n
Tabi ki de! \u00d6z\u00fcnde bu tarz State Management problemini ilk olarak Facebook<\/em>‘un ya\u015fad\u0131\u011f\u0131na dair s\u00f6ylentiler mevcut. Hatta bir zamanlar Facebook’un chatbox’\u0131nda ki verilerle mesaj sayfas\u0131ndakilerin pek tutarl\u0131l\u0131k g\u00f6stermedi\u011fini bizzat tecr\u00fcbe etmi\u015fli\u011fim vard\u0131r(ger\u00e7i \u015fimdiki haline dairde bir fikrim yok) \u0130\u015fte bu durum state management ile ilgilidir. Facebook, ayn\u0131 verileri kullanacak \u015fekilde zamanla eklenen ekstra bile\u015fenlerin e\u015fli\u011finde uygulamadaki state management kompleksitesinin artt\u0131\u011f\u0131n\u0131 s\u00f6ylemekte ve bunun sebebini kulland\u0131\u011f\u0131 klasik veri\/model yakla\u015f\u0131m\u0131na y\u00fcklemektedir.
\n
$\"Two$ <\/a>
Bu modelde view’\u0131n render edilmesi modeldeki de\u011fi\u015fiklik \u00fczerine kurgulanm\u0131\u015ft\u0131r. Halbuki bir view’deki modelde yap\u0131lan de\u011fi\u015fiklik, o modeli kullanan di\u011fer bir view(ler)’e yans\u0131mad\u0131\u011f\u0131 s\u00fcrece tutars\u0131zl\u0131k s\u00f6z konusu olacakt\u0131r.
Burada view’den kas\u0131t component’lerdir.<\/span><\/p><\/div><\/p>\n
Haliyle Facebook buradaki two way databinding modeli yerine bir yerden sonra daha geli\u015fmi\u015f bir stratejiyi modellemektedir, Flux Pattern!<\/p>\n
Flux Pattern Nedir?<\/h4>\n
$\"Angular$ <\/a>
Kaynak : https:\/\/krasimir.gitbooks.io\/react-in-patterns\/content\/chapter-08\/<\/span><\/p><\/div>
\nFlux Pattern, yukar\u0131daki \u015femada g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere view’de olabilecek herhangi bir state de\u011fi\u015fikli\u011fini ifade eden action isimli talimat\u0131 dispatcher’a g\u00f6ndererek, onun arac\u0131l\u0131\u011f\u0131yla store’lara bildirmektedir.<\/p>\n
Peki nedir bu action, dispatcher ve store?<\/strong><\/p>\n
\n
Action;<\/strong> state’de yap\u0131lan de\u011fi\u015fikli\u011fi tarif edecek olan g\u00f6vdeyi bar\u0131nd\u0131ran bir talimatt\u0131r. Yap\u0131s\u0131 a\u015fa\u011f\u0131daki gibidir;
\n $\"Angular$ <\/a>\n<\/li>\n
Dispatcher;<\/strong> ise kendinde tan\u0131ml\u0131 olan t\u00fcm store’lara gelen action’\u0131 yay\u0131nlamakla g\u00f6revlidir ve state’de yap\u0131lan de\u011fi\u015fikli\u011fe dair haber almalar\u0131n\u0131 sa\u011flamaktad\u0131r. Yani, yay\u0131nlanan action, dispatcher’a g\u00f6nderilmektedir.
\n $\"Angular$ <\/a>\n<\/li>\n
Store;<\/strong> state’in tutuldu\u011fu yap\u0131lard\u0131r. Store’da, ilgili state’e dair bir de\u011fi\u015fiklik yap\u0131lacaksa bu sorumlulu\u011fu Reducer<\/strong><\/em> isimli fonksiyonlar \u00fcstlenmektedir. Bu fonksiyonlar\u0131 yaz\u0131m\u0131z\u0131n ilerleyen sat\u0131rlar\u0131nda ele al\u0131yor olaca\u011f\u0131z…<\/li>\n<\/ul>\nYukar\u0131daki d\u00f6ng\u00fc i\u015fledi\u011fi an, state’de de\u011fi\u015fiklik ger\u00e7ekle\u015fecek ve art\u0131k ilgili state’i kullanan t\u00fcm view’lerin haberdar edilmesi gerekecektir. Haliyle bu i\u015flemi de Controller View<\/strong><\/em> ismini verdi\u011fimiz mekanizma \u00fcstlenecektir.
\n $\"Angular$ <\/a>Controller View, yandaki \u015fema da g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere uygulamadaki t\u00fcm view’ler ile haberle\u015fen bir nesnedir. E\u011fer ki store’da herhangi bir state verisinde bir de\u011fi\u015fiklik olursa buna g\u00f6re view’leri render edecektir.<\/p>\n
\u0130\u015fte Flux Pattern bu \u015fekilde bir mant\u0131kla uygulanmaktad\u0131r. Dikkat ederseniz e\u011fer uygulama yap\u0131s\u0131 b\u00fcy\u00fcd\u00fck\u00e7e ve uygulaman\u0131n kompleksitesi artt\u0131k\u00e7a bu pattern’\u0131n uygulanmas\u0131 zorla\u015fmaktad\u0131r. \u00c7\u00fcnk\u00fc birden fazla store’un kullan\u0131lmas\u0131, zamanla uygulama b\u00fcy\u00fckl\u00fc\u011f\u00fcyle do\u011fru orant\u0131l\u0131 bir \u015fekilde birbirlerine ba\u011f\u0131ml\u0131 olabilmelerine sebep olmakta ve bunlar\u0131n orkestra edilmesi git gide zorla\u015fmaktad\u0131r.<\/p>\n
Bu noktada bu pattern’in daha rahat uygulanmas\u0131n\u0131 sa\u011flayan Redux kar\u015f\u0131m\u0131za \u00e7\u0131kmaktad\u0131r.<\/p>\n
Redux Nedir?<\/h4>\n
Angular gibi JavaScript temelli uygulamalarda State Management s\u00fcre\u00e7lerini basitle\u015ftirmek i\u00e7in kullan\u0131lan pattern’d\u0131r. Temel olarak Single source of truth\u200b<\/em>, State is read-only\u200b<\/em> ve Changes are made with pure functions\u200b<\/em> olmak \u00fczere \u00fc\u00e7 ilkeye dayanmaktad\u0131r. Direkt ilkeleri izah etmemiz gerekirse e\u011fer;<\/p>\n
\n
Single source of truth\u200b<\/strong> Tek do\u011fru kaynak\u200b<\/em>
\nUygulamada state’in tek bir store’da tutulmas\u0131n\u0131 ifade etmektedir.\n<\/li>\n
State is read-only<\/strong> Salt-okunur durum<\/em>
\nStore’da ki mevcut state verilerinin de\u011fi\u015fmezli\u011fini ifade eder. Yani, state’de olan de\u011fi\u015fiklik o anki store’da ki veri \u00fczerinde de\u011fil, onun klonlanm\u0131\u015f hali \u00fczerinde uygulanmal\u0131d\u0131r.\n<\/li>\n
Changes are made with pure functions\u200b<\/strong> De\u011fi\u015fiklikler saf fonksiyonlarla yap\u0131l\u0131r<\/em>
\nStore’lar \u00fczerindeki de\u011fi\u015fikliklerin sadece o i\u015fe odaklanm\u0131\u015f reducer ismini verdi\u011fimiz fonksiyonlar ile yap\u0131lmas\u0131n\u0131 ifade eder.\n<\/li>\n<\/ul>\n
$\"Angular$ <\/a>
Kaynak : https:\/\/blog.mazarin.lk\/productive-development-react-redux\/<\/span><\/p><\/div>Redux’u daha iyi anlayabilmek i\u00e7in yandaki g\u00f6rsel \u015femay\u0131 incelemenizde fayda g\u00f6rmekteyim.<\/p>\n
Dikkat ederseniz e\u011fer Redux tek bir store’dan beslenmekte ve t\u00fcm component’lere o store \u00fczerinden veri sa\u011flamaktad\u0131r. Redux’un kullan\u0131lmad\u0131\u011f\u0131 durumlarda ise bir arapsa\u00e7\u0131 misali davran\u0131\u015f sergilenmektedir.<\/p>\n
Redux’da state, read-only’dir. De\u011fi\u015fmez! (Flux pattern’da de\u011fi\u015fiklik oluyordu!) Redux’da immutability prensibi s\u00f6z konusudur. State de\u011fi\u015fecekse e\u011fer mevcut olan kopyalan\u0131p, \u00fczerinde de\u011fi\u015fiklik ger\u00e7ekle\u015ftirilerek i\u015flem sa\u011flan\u0131r.<\/em><\/p><\/blockquote>\n
Peki Redux pattern’\u0131n \u00e7al\u0131\u015fma mant\u0131\u011f\u0131 nas\u0131ld\u0131r?<\/strong>
\nRedux pattern’\u0131n \u00e7al\u0131\u015fma mant\u0131\u011f\u0131n\u0131 anlayabilmek i\u00e7in a\u015fa\u011f\u0131daki g\u00f6rsel \u015femay\u0131 incelemenizi tavsiye ederim.
\n
$\"Angular$ <\/a>
Kaynak : https:\/\/labs.tadigital.com\/index.php\/2020\/04\/20\/getting-started-with-redux\/<\/span><\/p><\/div>\u015eemadan g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere, UI’da(yani view’de) herhangi bir state de\u011fi\u015fikli\u011fi s\u00f6z konusu oldu\u011funda bu de\u011fi\u015fikli\u011fi temsil eden bir action f\u0131rlat\u0131lmakta ve f\u0131rlat\u0131lan bu action’\u0131 reducer fonksiyonu ile yakalayarak yap\u0131lan de\u011fi\u015fiklik alg\u0131lanmakta ve store’da ki mevcut state yerine gerekli g\u00fcncellemelerin yap\u0131ld\u0131\u011f\u0131 yeni state olu\u015fturularak, store’a g\u00f6nderilmektedir. Bu i\u015flem neticesinde, store’da yenilenen state verisi ilgili t\u00fcm view’ler taraf\u0131ndan g\u00fcncellenmi\u015f olacakt\u0131r.<\/p>\n
Konuyu teoride daha da netle\u015ftirebilmek i\u00e7in a\u015fa\u011f\u0131daki hareketli g\u00f6rseli inceleyiniz.
\n
$\"Angular$ <\/a>
Kaynak : https:\/\/ichi.pro\/tr\/redux-icin-crash-course-98889338959570<\/span><\/p><\/div><\/p>\n
Evet… NgRx ile ilgili t\u00fcm altyap\u0131y\u0131 inceledi\u011fimize g\u00f6re art\u0131k sadede gelebiliriz. NgRx Nedir?<\/strong> sorusunu cevaplayabiliriz.<\/p>\n
NgRx, Redux Pattern’i benimsemi\u015f ve RxJS k\u00fct\u00fcphanesiyle desteklenmi\u015f olan Angular’a \u00f6zel State Management \u00e7\u00f6z\u00fcmleri i\u00e7in geli\u015ftirilmi\u015f bir k\u00fct\u00fcphanedir.<\/p>\n
\u015eimdi, sonlara do\u011fru NgRx ile basit bir \u00f6rnek \u00fczerinden i\u00e7eri\u011fimizi zenginle\u015ftirip, noktalayal\u0131m.<\/p>\n
NgRx K\u00fct\u00fcphanesi \u0130le \u00d6rnek State Management Uygulamas\u0131<\/h4>\n
\u0130cra edece\u011fimiz \u00f6rnekte bir ders uygulamas\u0131n\u0131 baz al\u0131yor olaca\u011f\u0131z. Bu uygulamada dersleri ekledi\u011fimiz, listeledi\u011fimiz ve ders adedini yay\u0131nlad\u0131\u011f\u0131m\u0131z \u00fc\u00e7 farkl\u0131 componentimiz olacakt\u0131r. Haliyle ders say\u0131s\u0131nda herhangi bir de\u011fi\u015fiklik oldu\u011fu taktirde listeleme ve adedi g\u00f6stermekten sorumlu componentlerin gerekli g\u00fcncellemeleri yapabilmesi i\u00e7in NgRx ile state management’\u0131 sa\u011fl\u0131yor olaca\u011f\u0131z.<\/p>\n
Her \u015feyden \u00f6nce uygulamada kullanaca\u011f\u0131m\u0131z k\u00fct\u00fcphaneleri a\u015fa\u011f\u0131daki npm komutu e\u015fli\u011finde y\u00fckleyerek ba\u015flayal\u0131m.
\n`npm i jquery bootstrap @ngrx\/store<\/code><\/strong> \n(Angular uygulamalar\u0131nda NgRx k\u00fct\u00fcphanesini @ngrx\/store<\/em> paketi sa\u011flamaktad\u0131r.)<\/span><\/p>\n`
`Ard\u0131ndan uygulamada kullan\u0131lacak componentleri olu\u015ftural\u0131m. \nng g c components\/lessonCreate<\/code> ng g c components\/lessonRead<\/code> ng g c components\/lessonCount<\/code><\/strong><\/p>\n`
`\u015eimdi hafiften kodlamaya girerek ba\u015flayal\u0131m.<\/p>\n`
`‘app.component.html’ dosyas\u0131nda uygulaman\u0131n genel HTML \u00e7at\u0131s\u0131n\u0131 a\u015fa\u011f\u0131daki gibi olu\u015ftural\u0131m. Tabi bu konuda sizler kendi \u00f6zg\u00fcr iradenize g\u00f6re \u00e7al\u0131\u015fma sergileyebilirsiniz. Ben deniz, hasbel kader a\u015fa\u011f\u0131daki gibi (k\u0131yt\u0131r\u0131ktan)bir tasar\u0131m \u00fczerinden y\u00fcr\u00fcyor olaca\u011f\u0131m.<\/p>\n`
\r\n<div class="row">\r\n <div class="col-md-3">Ders Ekle<\/div>\r\n <div class="col-md-3">Ders Listesi<\/div>\r\n <div class="col-md-3">Ders Adedi<\/div>\r\n<\/div>\r\n<div class="row">\r\n <div class="col-md-3" style="background-color: antiquewhite;">\r\n <app-lesson-create><\/app-lesson-create>\r\n <\/div>\r\n <div class="col-md-3" style="background-color: darkgrey">\r\n <app-lesson-read><\/app-lesson-read>\r\n <\/div>\r\n <div class="col-md-3" style="background-color: ghostwhite">\r\n <app-lesson-count><\/app-lesson-count>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\nArd\u0131ndan uygulamada verisel a\u00e7\u0131dan bir derse kar\u015f\u0131l\u0131k gelecek olan ‘Lesson’ isimli entity’i olu\u015ftural\u0131m.<\/p>\n\r\nexport class Lesson {\r\n id: number;\r\n lesson: string;\r\n explanation: string;\r\n}\r\n<\/pre>\nBu noktadan itibaren uygulamam\u0131z\u0131n temellerini atm\u0131\u015f bulunmaktay\u0131z. Art\u0131k yap\u0131lmas\u0131 gereken NgRx enstr\u00fcmanlar\u0131n\u0131 tek tek in\u015fa etmektir. Hadi buyrun ba\u015flayal\u0131m.<\/p>\n\nAd\u0131m 1<\/strong> Action Olu\u015fturma<\/em> \nNgRx a\u00e7\u0131s\u0131ndan ilk yap\u0131lmas\u0131 gereken i\u015f, state de\u011fi\u015fikliklerinin g\u00f6vdesini tan\u0131mlamakt\u0131r. Yani action’lar\u0131 tan\u0131mlamak! Bunun i\u00e7in ‘@ngrx\/store’<\/em> alt\u0131ndaki ‘createAction’<\/em> fonksiyonunu a\u015fa\u011f\u0131daki gibi kullanabilirsiniz.<\/p>\n\r\nimport { createAction, props } from "@ngrx\/store";\r\nimport { Lesson } from "src\/app\/models\/lesson";\r\n\r\n\/\/Action Type\r\nexport const ADD_LESSON = '[ADD LESSON] Lesson';\r\n\r\n\/\/Action Type\r\nexport const REMOVE_LESSON = '[REMOVE LESSON] Lesson';\r\n\r\n\/\/Action\r\nexport const addLesson = createAction(ADD_LESSON, props<Lesson>());\r\n\r\n\/\/Action\r\nexport const removeLesson = createAction(REMOVE_LESSON, props<Lesson>());\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer ‘addLesson’ ve ‘removeLesson’ olmak \u00fczere iki adet action tan\u0131mlanm\u0131\u015ft\u0131r. Bu action’lar s\u0131ras\u0131yla, ders ekleme ve ders silme durumlar\u0131na kar\u015f\u0131l\u0131k gelmektedirler.\n<\/li>\nAd\u0131m 2<\/strong> Reducer Olu\u015fturma<\/em> \nAction’lar tan\u0131mland\u0131ktan sonra f\u0131rlat\u0131lan action’a g\u00f6re store’da ki state’de de\u011fi\u015fiklik yapacak olan reducer fonksiyonlar\u0131n\u0131 olu\u015fturmam\u0131z gerekmektedir. Bunun i\u00e7in de ‘@ngrx\/store’<\/em>da ki ‘createReducer’<\/em> fonksiyonu kullan\u0131labilir.<\/p>\n\r\nimport { createReducer, on } from "@ngrx\/store";\r\nimport { Lesson } from "src\/app\/models\/lesson";\r\nimport { addLesson, removeLesson } from "..\/actions\/lesson.action";\r\n\r\n\/\/State Type\r\nexport interface IState {\r\n data: Lesson[];\r\n}\r\n\r\n\/\/Initial State\r\nexport const initialLessonState: IState = {\r\n data: Array<Lesson>()\r\n}\r\n\r\n\/\/Reducer\r\nexport const lessonReducer = createReducer(initialLessonState,\r\n on(addLesson, (state, lesson) => {\r\n const newState: IState = {\r\n data: [...state.data, lesson]\r\n }\r\n return newState;\r\n }),\r\n on(removeLesson, (state, lesson) => {\r\n const deleteLesson = state.data.find(l => l.id == lesson.id);\r\n const deleteLessonIndexNo = state.data.indexOf(deleteLesson);\r\n const newState: IState = {\r\n data: [...state.data]\r\n };\r\n newState.data.splice(deleteLessonIndexNo, 1);\r\n return newState;\r\n })\r\n);\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu siz incelerken bir yandan da ben izah edersem e\u011fer ilk olarak 6.<\/strong> sat\u0131rdaki interface’den ba\u015flayal\u0131m. Bu interface ders i\u00e7in tutulacak state’in aray\u00fcz\u00fcn\u00fc ya da bir ba\u015fka deyi\u015fle tipini ifade etmektedir. 11.<\/strong> sat\u0131rdaki ‘initialLessonState’ nesnesine gelirsek e\u011fer uygulamadaki default ders state’ini ifade etmektedir. State management operasyonlar\u0131nda hi\u00e7bir state olmasa da default bir state’in olmas\u0131 zorunludur! 16<\/strong> ile 32.<\/strong> sat\u0131r aral\u0131\u011f\u0131na g\u00f6z atarsan\u0131z e\u011fer, i\u015fte bu bizim reducer fonksiyonumuzdur. Bu fonksiyon i\u00e7erisinde her bir action’a \u00f6zel gerekli operasyonlar y\u00fcr\u00fct\u00fclmektedir. Bu operasyonlar\u0131 da yine ‘@ngrx\/store’<\/em> i\u00e7erisindeki ‘on’<\/em> fonksiyonu ile ger\u00e7ekle\u015ftirebilmekteyiz.\n<\/li>\n Ad\u0131m 3<\/strong> AppModule’e Bildiride Bulunma<\/em> \nSon olarak yap\u0131lmas\u0131 gereken ise NgRx ile ilgili sa\u011flanan t\u00fcm bu konfig\u00fcrasyonlar\u0131 Angular uygulamas\u0131n\u0131n ana mod\u00fcl\u00fc olan AppModule s\u0131n\u0131f\u0131na bildirmektir.<\/p>\n\r\n.\r\n.\r\n.\r\nimport { StoreModule } from '@ngrx\/store';\r\nimport { lessonReducer } from '.\/stateManagement\/reducers\/lesson.reducer';\r\n\r\n@NgModule({\r\n declarations: [\r\n AppComponent,\r\n LessonCreateComponent,\r\n LessonReadComponent,\r\n LessonCountComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n AppRoutingModule,\r\n StoreModule.forRoot({\r\n lesson: lessonReducer\r\n })\r\n ],\r\n providers: [],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere AppModule i\u00e7erisinde ‘imports’ alan\u0131nda ‘StoreModule.forRoot’ fonksiyonu ile olu\u015fturmu\u015f oldu\u011fumuz ‘lessonReducer’ isimli reducer’imiz uygulamaya ‘lesson’ key’i kar\u015f\u0131l\u0131\u011f\u0131nda tan\u0131mlanm\u0131\u015f bulunmaktad\u0131r. Tabi uygulama s\u00fcrecinde birden fazla reducer varsa e\u011fer t\u00fcm bunlar kendilerine \u00f6zel key’ler kar\u015f\u0131l\u0131\u011f\u0131nda tan\u0131mlan\u0131p, uygulama a\u00e7\u0131s\u0131ndan bildirilmeleri gerekmektedir.\n<\/li>\n<\/ul>\n NgRx’in enstr\u00fcmanlar\u0131n\u0131 in\u015fa etti\u011fimize g\u00f6re art\u0131k component’ler de gerekli geli\u015ftirmeleri ger\u00e7ekle\u015ftirebiliriz.<\/p>\n \nlesson-create.component<\/em><\/strong> \n.html;<\/p>\n\r\n<input type="number" #txtId placeholder="Id"> <br>\r\n<input type="text" #txtLesson placeholder="Lesson"> <br>\r\n<input type="text" #txtExplanation placeholder="Explanation"> <br>\r\n<button (click)="createLesson(txtId.value, txtLesson.value, txtExplanation.value)">Add Lesson<\/button>\r\n<\/pre>\n.ts;<\/p>\n \r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Store } from '@ngrx\/store';\r\nimport { Observable } from 'rxjs';\r\nimport { Lesson } from 'src\/app\/models\/lesson';\r\nimport { addLesson } from 'src\/app\/stateManagement\/actions\/lesson.action';\r\n\r\n@Component({\r\n selector: 'app-lesson-create',\r\n templateUrl: '.\/lesson-create.component.html',\r\n styleUrls: ['.\/lesson-create.component.css']\r\n})\r\nexport class LessonCreateComponent implements OnInit {\r\n\r\n constructor(private store: Store<Lesson>) { }\r\n lesson: Observable<string>;\r\n ngOnInit(): void {\r\n this.lesson = this.store.select("lesson");\r\n }\r\n\r\n createLesson(id: string, lesson: string, explanation: string) {\r\n const l: Lesson = new Lesson();\r\n l.id = parseInt(id);\r\n l.explanation = explanation;\r\n l.lesson = lesson;\r\n this.store.dispatch(addLesson(l));\r\n }\r\n}\r\n<\/pre>\nHerhangi bir component’ten store’a eri\u015febilmek i\u00e7in ‘Store<T>’<\/em> t\u00fcr\u00fcnden nesneyi dependency injection ile talep etmemiz yeterli olacakt\u0131r. E\u011fer ki store’a de\u011fer g\u00f6nderilecekse ‘dispatch’<\/em> fonksiyonu e\u015fli\u011finde ilgili action’\u0131n \u00e7a\u011fr\u0131lmas\u0131 yeterli olacakt\u0131r. Bu arada 17.<\/strong> sat\u0131ra bakarsan\u0131z e\u011fer ilgili store’un hangi key’e kar\u015f\u0131l\u0131k store oldu\u011funu ‘ngOnInit’ \u00fczerinden belirtmekteyiz.\n<\/li>\n lesson-read.component<\/em><\/strong> \n.html;<\/p>\n\r\n<p *ngFor="let lesson of lessons.data">{{lesson.lesson}} - {{lesson.explanation}}   <span\r\n style="color: chocolate;cursor: pointer;background-color: cornsilk;" (click)="removeLesson(lesson)">X<\/span> <\/p>\r\n<\/pre>\n.ts;<\/p>\n \r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Store } from '@ngrx\/store';\r\nimport { Lesson } from 'src\/app\/models\/lesson';\r\nimport { removeLesson } from 'src\/app\/stateManagement\/actions\/lesson.action';\r\n\r\n@Component({\r\n selector: 'app-lesson-read',\r\n templateUrl: '.\/lesson-read.component.html',\r\n styleUrls: ['.\/lesson-read.component.css']\r\n})\r\nexport class LessonReadComponent implements OnInit {\r\n\r\n constructor(private store: Store<Lesson>) { }\r\n lessons: any;\r\n ngOnInit(): void {\r\n this.store.select("lesson").subscribe(lesson => {\r\n this.lessons = lesson;\r\n });\r\n }\r\n\r\n removeLesson(lesson: Lesson) {\r\n this.store.dispatch(removeLesson(lesson));\r\n }\r\n}\r\n\r\n<\/pre>\n<\/li>\nlesson-count.component<\/em><\/strong> \n.html;<\/p>\n\r\nLesson Count : {{count}}\r\n<\/pre>\n.ts;<\/p>\n \r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Store } from '@ngrx\/store';\r\nimport { Observable } from 'rxjs';\r\nimport { Lesson } from 'src\/app\/models\/lesson';\r\n\r\n@Component({\r\n selector: 'app-lesson-count',\r\n templateUrl: '.\/lesson-count.component.html',\r\n styleUrls: ['.\/lesson-count.component.css']\r\n})\r\nexport class LessonCountComponent implements OnInit {\r\n\r\n constructor(private store: Store<Lesson>) { }\r\n lesson: Observable<string>;\r\n count: number;\r\n ngOnInit(): void {\r\n this.lesson = this.store.select("lesson");\r\n this.lesson.subscribe((lessons: any) => this.count = lessons.data.length);\r\n }\r\n}\r\n<\/pre>\n<\/li>\n<\/ul>\n\u0130\u015fte bu kadar…<\/p>\n Uygulamay\u0131 derleyip, \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi davran\u0131\u015f g\u00f6sterecektir. \n<\/a><\/p>\n \u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle… \nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere… \n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n Not : \u00d6rnek projeyi indirmek i\u00e7in buraya<\/a> t\u0131klay\u0131n\u0131z.<\/p>\n","protected":false},"excerpt":{"rendered":" Merhaba, UI tabanl\u0131 geli\u015ftirilen Single Page Application(SPA) uygulamalar\u0131nda ziyaret\u00e7ilere masa\u00fcst\u00fc yaz\u0131l\u0131mlar\u0131na yak\u0131n bir dinamizm ile e\u015flik edilirken, bu avantaj\u0131n bir yandan da dezavantaj\u0131 olabilecek olan sayfada tutars\u0131z verilerin olmas\u0131 durumlar\u0131yla s\u0131k s\u0131k kar\u015f\u0131la\u015f\u0131labilmektedir. Bu...<\/p>\n","protected":false},"author":1,"featured_media":24282,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420],"tags":[4500,4501,4497,4499,4498,4506,4503,4496,4505,4504,4493,4494,4382,4495,4383,4502],"class_list":["post-24165","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-action-nedir","tag-dispatcher-nedir","tag-flux-pattern","tag-ngrx","tag-ngrx-kutuphanesi","tag-ngrx-nedir","tag-reducer-nedir","tag-redux","tag-redux-pattern","tag-redux-pattern-nedir","tag-single-page-application","tag-spa","tag-state","tag-state-management","tag-state-nedir","tag-store-nedir"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/24165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=24165"}],"version-history":[{"count":104,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/24165\/revisions"}],"predecessor-version":[{"id":24286,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/24165\/revisions\/24286"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/24282"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=24165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=24165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=24165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}