Angular’da NgRx ile Durum Y\u00f6netimi: Ger\u00e7ek D\u00fcnya \u00d6rnekleriyle<\/p>\n
Angular uygulamalar\u0131n\u0131z\u0131n karma\u015f\u0131kla\u015ft\u0131k\u00e7a, verilerin nas\u0131l y\u00f6netilece\u011fi ve bile\u015fenler aras\u0131nda nas\u0131l payla\u015f\u0131laca\u011f\u0131 \u00f6nemli bir sorun haline gelir. Bu makalede, Angular uygulamalar\u0131nda g\u00fc\u00e7l\u00fc ve \u00f6l\u00e7eklenebilir bir durum y\u00f6netimi \u00e7\u00f6z\u00fcm\u00fc olan NgRx’i ele alaca\u011f\u0131z. Ger\u00e7ek d\u00fcnya \u00f6rnekleriyle NgRx’in nas\u0131l kullan\u0131laca\u011f\u0131n\u0131, performans\u0131n\u0131 art\u0131rman\u0131n yollar\u0131n\u0131 ve ileri d\u00fczey teknikleri \u00f6\u011frenece\u011fiz. NgRx’in temellerini \u00f6\u011frenmekten, karma\u015f\u0131k uygulamalarda nas\u0131l kullan\u0131laca\u011f\u0131na kadar ad\u0131m ad\u0131m ilerleyece\u011fiz.<\/p>\n
NgRx, Angular uygulamalar\u0131nda durum y\u00f6netimi i\u00e7in kullan\u0131lan bir RxJS tabanl\u0131 mimari k\u00fct\u00fcphanesidir. Redux’tan ilham alsa da, Angular’a \u00f6zg\u00fc \u00f6zellikler i\u00e7erir. B\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, verilerin tek bir kaynaktan y\u00f6netilmesini sa\u011flayarak, bile\u015fenler aras\u0131 veri ak\u0131\u015f\u0131n\u0131 daha basit, tutarl\u0131 ve izlenebilir hale getirir. NgRx, \u00f6zellikle b\u00fcy\u00fck ekiplerde \u00e7al\u0131\u015f\u0131rken, kodun daha anla\u015f\u0131l\u0131r ve bak\u0131m\u0131 daha kolay olmas\u0131n\u0131 sa\u011flar. Bu, hata ay\u0131klamay\u0131 kolayla\u015ft\u0131r\u0131r ve uygulaman\u0131n gelecekteki geli\u015ftirmelerini daha y\u00f6netilebilir hale getirir. Di\u011fer durum y\u00f6netim \u00e7\u00f6z\u00fcmlerine g\u00f6re, NgRx’in sa\u011flad\u0131\u011f\u0131 tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131 ve zaman i\u00e7indeki durum de\u011fi\u015fikliklerinin izlenebilirli\u011fi \u00f6nemli avantajlar sunar. Ayr\u0131ca, Angular’\u0131n reaktif do\u011fas\u0131na m\u00fckemmel bir \u015fekilde uyum sa\u011flar ve performans optimizasyonlar\u0131na olanak tan\u0131r. Bununla birlikte, \u00f6\u011frenme e\u011frisi biraz daha dik olabilir. Fakat, bir kez kavrand\u0131\u011f\u0131nda, Angular uygulamalar\u0131n\u0131z\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7 haline gelir.<\/p>\n
NgRx, d\u00f6rt temel kavram \u00fczerine kuruludur: Store, Actions, Reducers ve Selectors. Store<\/strong>, uygulaman\u0131n t\u00fcm durumunu tutan tek bir kaynakt\u0131r. Actions<\/strong>, durumdaki de\u011fi\u015fiklikleri tetikleyen olaylard\u0131r. Reducers<\/strong>, Actions’lara g\u00f6re Store’daki durumu g\u00fcncelleyen saf fonksiyonlard\u0131r. Selectors<\/strong>, Store’dan istenen verilerin se\u00e7ilmesini sa\u011flar.<\/p>\n \u00d6rne\u011fin, bir e-ticaret uygulamas\u0131nda, sepet durumunu y\u00f6netmek i\u00e7in NgRx kullanabiliriz. Sepetteki \u00fcr\u00fcnlerin eklenmesi veya \u00e7\u0131kar\u0131lmas\u0131 bir Action olur. Reducer, bu Action’a g\u00f6re sepet durumunu g\u00fcnceller. Son olarak, sepetin i\u00e7eri\u011fini g\u00f6r\u00fcnt\u00fclemek isteyen bir bile\u015fen, Selector kullanarak Store’dan sepet verilerini al\u0131r. Bu yakla\u015f\u0131m, uygulaman\u0131n durumunun tek bir kaynaktan y\u00f6netilmesini sa\u011flar ve bile\u015fenler aras\u0131ndaki veri ak\u0131\u015f\u0131n\u0131 basitle\u015ftirir. Bu sayede, bile\u015fenler do\u011frudan birbirleriyle ileti\u015fim kurmak yerine, sadece Store ile etkile\u015fime girerler.<\/p>\n Actions, durum de\u011fi\u015fikliklerini tetiklemek i\u00e7in kullan\u0131l\u0131r. Tipik olarak, bir Action, bir tip ve (iste\u011fe ba\u011fl\u0131) bir payload i\u00e7erir. Bir Action’\u0131 olu\u015fturmak i\u00e7in, a\u015fa\u011f\u0131daki gibi bir s\u0131n\u0131f olu\u015fturabiliriz:<\/p>\n <\/code><\/p>\n Bu kod, Basit bir sayac\u0131 NgRx ile y\u00f6netmek, NgRx'in temel kavramlar\u0131n\u0131 anlamak i\u00e7in iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. \u00d6ncelikle, bir Action, bir Reducer ve bir Selector olu\u015fturmam\u0131z gerekir.<\/p>\n <\/code><\/p>\n <\/code><\/p>\n <\/code><\/p>\n Bu \u00f6rnekte, Bir e-ticaret uygulamas\u0131nda, \u00fcr\u00fcnlerin sepete eklenmesi, \u00e7\u0131kar\u0131lmas\u0131 ve sepetin toplam fiyat\u0131n\u0131n hesaplanmas\u0131 gibi i\u015flemler karma\u015f\u0131k olabilir. NgRx, bu i\u015flemleri y\u00f6netmek i\u00e7in m\u00fckemmel bir \u00e7\u00f6z\u00fcm sunar. \u00dcr\u00fcn ekleme, \u00fcr\u00fcn \u00e7\u0131karma ve sepet toplam\u0131n\u0131n hesaplanmas\u0131 i\u00e7in ayr\u0131 Actions tan\u0131mlayabiliriz. Reducer, bu Actions'lara g\u00f6re sepet durumunu g\u00fcnceller. Bile\u015fenler, Selector'lar kullanarak sepet durumunu ve toplam fiyat\u0131 alabilirler. Bu, bile\u015fenlerin do\u011frudan birbirleriyle ileti\u015fim kurmas\u0131na gerek kalmadan, veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc ve tutarl\u0131l\u0131\u011f\u0131n\u0131 korur.<\/p>\n NgRx, daha ileri d\u00fczey \u00f6zellikler sunan Effects ve Entity gibi ek k\u00fct\u00fcphaneler ile birlikte gelir. Effects<\/strong>, yan etkiler (\u00f6rne\u011fin, API \u00e7a\u011fr\u0131lar\u0131) gibi asenkron i\u015flemleri y\u00f6netmek i\u00e7in kullan\u0131l\u0131r. Entity<\/strong>, verilerin daha verimli bir \u015fekilde y\u00f6netilmesini sa\u011flar. Entity kullanarak, verilerin tek tek nesneler yerine, bir koleksiyon olarak y\u00f6netilmesini sa\u011flar ve performans\u0131 art\u0131r\u0131r. Karma\u015f\u0131k uygulamalarda, bu ileri d\u00fczey tekniklerin kullan\u0131m\u0131, uygulaman\u0131n \u00f6l\u00e7eklenebilirli\u011fini ve performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir. Ayr\u0131ca, kodun daha temiz ve anla\u015f\u0131l\u0131r olmas\u0131n\u0131 sa\u011flar.<\/p>\n NgRx'in performans\u0131n\u0131 optimize etmek i\u00e7in baz\u0131 \u00f6nemli noktalara dikkat etmek gerekir. \u00d6rne\u011fin, Selector'lar\u0131n verimli bir \u015fekilde yaz\u0131lmas\u0131 \u00e7ok \u00f6nemlidir. Gereksiz hesaplamalar\u0131 \u00f6nlemek ve performans\u0131 art\u0131rmak i\u00e7in, Selector'lar\u0131n memoization \u00f6zelli\u011fini kullanabilirsiniz. Ayr\u0131ca, b\u00fcy\u00fck durum a\u011fa\u00e7lar\u0131nda, performans\u0131 art\u0131rmak i\u00e7in Entity kullanabilirsiniz.<\/p>\nNgRx’te Nas\u0131l Action Olu\u015fturulur?<\/h3>\n
import { createAction, props } from '@ngrx\/store';\n\nexport const addToCart = createAction(\n '[Cart] Add to Cart',\n props<{ product: Product }>()\n);<\/pre>\naddToCart<\/code> ad\u0131nda bir Action olu\u015fturur. Bu Action, product<\/code> ad\u0131nda bir payload al\u0131r. createAction<\/code> fonksiyonu, NgRx taraf\u0131ndan sa\u011flanan bir yard\u0131mc\u0131 fonksiyondur. props<\/code> fonksiyonu, payload'\u0131 tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r.<\/p>\nUygulamal\u0131 \u00d6rnek: Basit Bir Sayac\u0131 NgRx ile Y\u00f6netmek<\/h2>\n
Action:<\/h3>\n
import { createAction, props } from '@ngrx\/store';\n\nexport const increment = createAction('[Counter] Increment');\nexport const decrement = createAction('[Counter] Decrement');\nexport const reset = createAction('[Counter] Reset');<\/pre>\nReducer:<\/h3>\n
import { createReducer, on } from '@ngrx\/store';\nimport * as CounterActions from '.\/counter.actions';\n\nexport const initialState = 0;\n\nexport const counterReducer = createReducer(\n initialState,\n on(CounterActions.increment, state => state + 1),\n on(CounterActions.decrement, state => state - 1),\n on(CounterActions.reset, state => 0)\n);<\/pre>\nSelector:<\/h3>\n
import { createFeatureSelector, createSelector } from '@ngrx\/store';\nimport * as fromCounter from '.\/counter.reducer';\n\nexport const selectCounterState = createFeatureSelectorincrement<\/code>, decrement<\/code> ve reset<\/code> ad\u0131nda \u00fc\u00e7 Action tan\u0131mlad\u0131k. counterReducer<\/code>, bu Action'lara g\u00f6re durumu g\u00fcnceller. selectCount<\/code> Selector'\u0131, Store'dan sayac\u0131n de\u011ferini al\u0131r. Bu bile\u015fenler bir araya getirildi\u011finde, bir sayac\u0131n basit\u00e7e art\u0131r\u0131lmas\u0131, azalt\u0131lmas\u0131 ve s\u0131f\u0131rlanmas\u0131 gibi temel i\u015flemleri ger\u00e7ekle\u015ftirmemizi sa\u011flar.<\/p>\nGer\u00e7ek D\u00fcnya Senaryosu: E-Ticaret Uygulamas\u0131nda Sepet Y\u00f6netimi<\/h2>\n
\u0130leri D\u00fczey NgRx Teknikleri: Effects ve Entity<\/h3>\n
Performans Optimizasyonu ve G\u00fcvenlik Uyar\u0131lar\u0131<\/h2>\n