Modern web uygulamalar\u0131, \u00f6zellikle Angular gibi tek sayfa uygulama (SPA) \u00e7at\u0131lar\u0131nda geli\u015ftirilenler, genellikle karma\u015f\u0131k ve dinamik veri ak\u0131\u015flar\u0131na sahiptir. Kullan\u0131c\u0131 etkile\u015fimleri, sunucu istekleri, bile\u015fenler aras\u0131 ileti\u015fim ve uygulaman\u0131n genel durumu (state) bu karma\u015f\u0131kl\u0131\u011f\u0131n temelini olu\u015fturur. Uygulama b\u00fcy\u00fcd\u00fck\u00e7e, bu durumun y\u00f6netimi giderek zorla\u015f\u0131r ve kontrol d\u0131\u015f\u0131 bir hal alabilir. Durumun nerede depoland\u0131\u011f\u0131, nas\u0131l g\u00fcncellendi\u011fi ve farkl\u0131 bile\u015fenlerin bu duruma nas\u0131l eri\u015fti\u011fi konular\u0131 netle\u015fmedi\u011finde, hatalar ay\u0131klanmas\u0131 g\u00fc\u00e7le\u015fir, uygulaman\u0131n bak\u0131m\u0131 zorla\u015f\u0131r ve \u00f6l\u00e7eklenebilirlik ciddi \u015fekilde etkilenir.<\/p>\n
\u0130\u015fte tam bu noktada durum y\u00f6netimi (state management) k\u00fct\u00fcphaneleri devreye girer. Durum y\u00f6netimi, uygulaman\u0131n t\u00fcm verilerini merkezi bir yerde tutarak, bu verilere eri\u015fim ve g\u00fcncelleme s\u00fcre\u00e7lerini tutarl\u0131 ve \u00f6ng\u00f6r\u00fclebilir bir \u015fekilde standartla\u015ft\u0131rmay\u0131 ama\u00e7lar. Angular ekosisteminde NgRx, Akita gibi pop\u00fcler \u00e7\u00f6z\u00fcmler bulunsa da, son y\u0131llarda NGXS, basitli\u011fi, g\u00fc\u00e7l\u00fc TypeScript entegrasyonu ve daha az “boilerplate” (tekrarlayan kod) gerektirmesiyle dikkat \u00e7ekmektedir. Bu makalede, Angular uygulamalar\u0131nda NGXS kullanarak durum y\u00f6netiminin nas\u0131l etkili bir \u015fekilde yap\u0131laca\u011f\u0131n\u0131, temel kavramlar\u0131ndan geli\u015fmi\u015f \u00f6zelliklerine kadar detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n
Durum y\u00f6netimi \u00e7\u00f6z\u00fcmlerinin \u00e7o\u011fu, Redux mimarisinden ilham al\u0131r ve belirli temel kavramlar \u00fczerine kuruludur. NGXS de bu kavramlar\u0131 kendi TypeScript ve RxJS odakl\u0131 yap\u0131s\u0131yla yorumlar:<\/p>\n
* Durum (State):<\/strong> Uygulaman\u0131n belirli bir andaki t\u00fcm verilerini temsil eden tek, de\u011fi\u015ftirilemez (immutable) bir nesnedir. \u00d6rne\u011fin, bir al\u0131\u015fveri\u015f sepetindeki \u00fcr\u00fcnler, kullan\u0131c\u0131n\u0131n oturum bilgileri veya bir formun mevcut de\u011feri birer durum par\u00e7as\u0131d\u0131r. NGXS (Next Generation eXtendable State management) , Angular uygulamalar\u0131 i\u00e7in RxJS ve TypeScript \u00fczerine in\u015fa edilmi\u015f, Redux ilhaml\u0131 bir durum y\u00f6netim k\u00fct\u00fcphanesidir. Geleneksel Redux yap\u0131lar\u0131n\u0131n aksine, NGXS, dekorat\u00f6rler (decorators) ve s\u0131n\u0131flar (classes) kullanarak daha az “boilerplate” kodu ile daha okunabilir ve y\u00f6netilebilir bir kod taban\u0131 sunmay\u0131 hedefler.<\/p>\n NGXS’i tercih etmek i\u00e7in birka\u00e7 \u00f6nemli neden bulunmaktad\u0131r:<\/p>\n * Basit API ve Az Boilerplate:<\/strong> NGXS, Redux’a k\u0131yasla daha az tekrarlayan kod gerektirir. Dekoratif yap\u0131s\u0131 sayesinde eylemler, durum i\u015fleyicileri ve se\u00e7iciler tek bir NGXS’i Angular projenize dahil etmek olduk\u00e7a basittir. \u0130lk ad\u0131m olarak Ard\u0131ndan, Geli\u015ftirme s\u00fcrecini kolayla\u015ft\u0131rmak i\u00e7in NGXS’in geli\u015ftirici ara\u00e7lar\u0131 eklentilerini de kurman\u0131z \u00f6nerilir:<\/p>\n Bu eklentileri de NGXS’te durum (state), bir TypeScript s\u0131n\u0131f\u0131 olarak tan\u0131mlan\u0131r ve \u00d6rnek olarak, bir Eylemler, duruma ne t\u00fcr bir de\u011fi\u015fiklik yap\u0131laca\u011f\u0131n\u0131 bildiren mesajlard\u0131r. NGXS’te eylemler, Bu eylem s\u0131n\u0131flar\u0131, uygulaman\u0131zda Eylemler, Durum g\u00fcncellenirken, de\u011fi\u015ftirilemezlik (immutability) prensibine kesinlikle uyulmal\u0131d\u0131r. Yani, mevcut durumu do\u011frudan de\u011fi\u015ftirmek yerine, durumun yeni bir kopyas\u0131 olu\u015fturulmal\u0131 ve bu kopya \u00fczerinde de\u011fi\u015fiklikler yap\u0131lmal\u0131d\u0131r. NGXS’in Yukar\u0131daki \u00f6rnekte, Bu Se\u00e7iciler, durumdan veri okumak i\u00e7in kullan\u0131lan saf fonksiyonlard\u0131r. Bile\u015fenlerin do\u011frudan duruma eri\u015fmesini engeller ve durumun yap\u0131s\u0131ndaki de\u011fi\u015fikliklerin bile\u015fenleri etkilemesini \u00f6nler. NGXS’te se\u00e7iciler, Bile\u015fenlerde bu se\u00e7icileri kullanmak i\u00e7in Ger\u00e7ek d\u00fcnya uygulamalar\u0131nda, durum de\u011fi\u015fiklikleri genellikle asenkron i\u015flemler (API \u00e7a\u011fr\u0131lar\u0131, zamanlay\u0131c\u0131lar vb.) i\u00e7erir. NGXS’te bu yan etkiler, \u00d6rnek olarak, bir API’den todo listesi y\u00fckleyelim:<\/p>\n NGXS, \u00e7ekirdek i\u015flevselli\u011finin yan\u0131 s\u0131ra, geli\u015ftirme ve \u00fcretim ortamlar\u0131nda faydal\u0131 olabilecek bir dizi eklenti (plugin) sunar:<\/p>\n * Bu eklentilerin kurulumu ve kullan\u0131m\u0131, Yukar\u0131daki \u00f6rnekte B\u00fcy\u00fck uygulamalarda, t\u00fcm state’leri tek bir Bu sayede, sadece ilgili mod\u00fcl y\u00fcklendi\u011finde ( NGXS, Bu se\u00e7ici, Asenkron i\u015flemlerde hata y\u00f6netimi kritik \u00f6neme sahiptir. NGXS’te, NGXS, durum y\u00f6netim kodunuzun kolayca test edilebilir olmas\u0131n\u0131 sa\u011flar. State s\u0131n\u0131flar\u0131, servisler ve eylemler ba\u011f\u0131ms\u0131z birimler olarak test edilebilir. Her ara\u00e7 gibi NGXS’in de kendine \u00f6zg\u00fc avantajlar\u0131 ve dezavantajlar\u0131 vard\u0131r:<\/p>\n Avantajlar\u0131:<\/strong> Dezavantajlar\u0131:<\/strong> Angular ekosisteminde durum y\u00f6netimi denince akla gelen ilk \u00e7\u00f6z\u00fcmlerden biri NgRx’tir. NGXS ve NgRx benzer prensiplere dayan\u0131r ancak farkl\u0131 uygulama yakla\u015f\u0131mlar\u0131 sunarlar:<\/p>\n * Boilerplate:<\/strong> NGXS, dekorat\u00f6r tabanl\u0131 yap\u0131s\u0131 sayesinde NgRx’e g\u00f6re daha az boilerplate kod gerektirir. NgRx, action, reducer, effect ve selector’lar\u0131 ayr\u0131 ayr\u0131 tan\u0131mlamay\u0131 gerektirirken, NGXS bunlar\u0131 tek bir Se\u00e7im, projenin b\u00fcy\u00fckl\u00fc\u011f\u00fc, tak\u0131m\u0131n RxJS ve Redux deneyimi, tercih edilen kodlama stili ve geli\u015ftirme h\u0131z\u0131 gibi fakt\u00f6rlere ba\u011fl\u0131d\u0131r. Daha h\u0131zl\u0131 bir ba\u015flang\u0131\u00e7 ve daha az kod arayanlar i\u00e7in NGXS harika bir se\u00e7enek olabilirken, Redux prensiplerine tam ba\u011fl\u0131l\u0131k ve maksimum kontrol isteyenler NgRx’i tercih edebilir.<\/p>\n Angular uygulamalar\u0131nda durum y\u00f6netimi, uygulaman\u0131n karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a hayati bir rol oynar. NGXS, modern Angular geli\u015ftiricilerine g\u00fc\u00e7l\u00fc, \u00f6l\u00e7eklenebilir ve bak\u0131m\u0131 kolay durum y\u00f6netimi \u00e7\u00f6z\u00fcmleri sunan m\u00fckemmel bir k\u00fct\u00fcphanedir. TypeScript ve RxJS’in g\u00fcc\u00fcn\u00fc kullanarak, az boilerplate kod ile temiz ve okunabilir bir kod taban\u0131 olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n Bu makalede ele ald\u0131\u011f\u0131m\u0131z temel kavramlar, kurulum, state, action, selector ve asenkron i\u015flem y\u00f6netimi gibi konular, NGXS ile durum y\u00f6netimine ba\u015flamak i\u00e7in sa\u011flam bir temel olu\u015fturmaktad\u0131r. Plugin deste\u011fi ve mod\u00fcler yap\u0131s\u0131 sayesinde b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar\u0131n bile durumunu etkin bir \u015fekilde y\u00f6netebilirsiniz. NGXS, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131rken, uygulaman\u0131z\u0131n performans\u0131n\u0131 ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131rmaya yard\u0131mc\u0131 olan de\u011ferli bir ara\u00e7t\u0131r. Gelecek Angular projelerinizde durum y\u00f6netimi ihtiyac\u0131n\u0131z oldu\u011funda NGXS’i de\u011ferlendirmeniz, size \u00f6nemli avantajlar sa\u011flayacakt\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Angular Uygulamalar\u0131nda Durum Y\u00f6netimi: NGXS ile G\u00fc\u00e7l\u00fc ve \u00d6l\u00e7eklenebilir \u00c7\u00f6z\u00fcmler\nGiri\u015f\nModern web uygulamalar\u0131, \u00f6zellikle Angular gibi","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1488],"tags":[],"class_list":{"0":"post-39467","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-angular","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
\n* Eylem (Action):<\/strong> Durumda bir de\u011fi\u015fiklik yapma niyetini tan\u0131mlayan basit bir mesajd\u0131r. Eylemler, kullan\u0131c\u0131n\u0131n bir butona t\u0131klamas\u0131, sunucudan veri gelmesi veya bir zamanlay\u0131c\u0131n\u0131n sona ermesi gibi olaylar sonucunda tetiklenir. Eylemler genellikle bir type<\/code> \u00f6zelli\u011fine ve duruma etki edecek verileri ta\u015f\u0131yan bir payload<\/code>‘a sahiptir.
\n* Depo (Store):<\/strong> Uygulaman\u0131n t\u00fcm durumunu bar\u0131nd\u0131ran merkezi bir nesnedir. Bile\u015fenler, duruma do\u011frudan eri\u015fmek yerine, depo arac\u0131l\u0131\u011f\u0131yla eylemler g\u00f6nderir ve durumu se\u00e7iciler (selectors) arac\u0131l\u0131\u011f\u0131yla okur.
\n* Se\u00e7ici (Selector):<\/strong> Depodaki durumdan belirli veri par\u00e7alar\u0131n\u0131 ay\u0131klamak ve d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in kullan\u0131lan saf (pure) fonksiyonlard\u0131r. Se\u00e7iciler, bile\u015fenlerin yaln\u0131zca ihtiya\u00e7 duyduklar\u0131 verilere eri\u015fmesini sa\u011flar ve durumun yap\u0131s\u0131ndaki de\u011fi\u015fikliklerden etkilenmemelerine yard\u0131mc\u0131 olur.
\n* \u0130\u015fleyici (Handler \/ Reducer):<\/strong> Bir eyleme yan\u0131t olarak mevcut durumu alan ve eylemin y\u00fck\u00fcne (payload) g\u00f6re yeni bir durum d\u00f6nd\u00fcren fonksiyonlard\u0131r. NGXS’te bu i\u015flev @Action<\/code> dekorat\u00f6r\u00fc ile i\u015faretlenmi\u015f metotlar taraf\u0131ndan yerine getirilir. \u0130\u015fleyiciler, daima mevcut durumu de\u011fi\u015ftirmek yerine, durumun yeni bir kopyas\u0131n\u0131 d\u00f6nd\u00fcrerek de\u011fi\u015ftirilemezlik (immutability) prensibini korumal\u0131d\u0131r.
\n* Yan Etki (Side Effect):<\/strong> Durumda do\u011frudan de\u011fi\u015fiklik yapmayan, ancak eylemler sonucunda tetiklenen asenkron i\u015flemlerdir. API \u00e7a\u011fr\u0131lar\u0131, veritaban\u0131 i\u015flemleri, navigasyon veya zamanlay\u0131c\u0131lar gibi i\u015flemler yan etkilere \u00f6rnek olarak verilebilir. NGXS’te yan etkiler genellikle @Action<\/code> i\u015fleyicileri i\u00e7inde RxJS operat\u00f6rleri kullan\u0131larak y\u00f6netilir.<\/p>\nNGXS Nedir? Neden NGXS?<\/h3>\n
State<\/code> s\u0131n\u0131f\u0131 i\u00e7inde tan\u0131mlanabilir, bu da kodu daha derli toplu hale getirir.
\n* TypeScript Odakl\u0131 Tasar\u0131m:<\/strong> NGXS, TypeScript’in t\u00fcm avantajlar\u0131ndan yararlan\u0131r. T\u00fcr g\u00fcvenli\u011fi, otomatik tamamlama ve derleme zaman\u0131 hatalar\u0131n\u0131n tespiti, b\u00fcy\u00fck projelerde geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve hatalar\u0131 azalt\u0131r.
\n* RxJS Entegrasyonu:<\/strong> NGXS, Angular’\u0131n reaktif do\u011fas\u0131na m\u00fckemmel uyum sa\u011flayan RxJS ile derinlemesine entegredir. Asenkron i\u015flemlerin ve yan etkilerin y\u00f6netimi, RxJS operat\u00f6rleri ile kolayca yap\u0131labilir.
\n* Performans:<\/strong> De\u011fi\u015ftirilemez durum (immutable state) prensibini benimsemesi ve RxJS’in g\u00fc\u00e7l\u00fc ak\u0131\u015f y\u00f6netimi sayesinde NGXS, performansl\u0131 bir durum y\u00f6netimi sunar.
\n* Mod\u00fcler Yap\u0131:<\/strong> Uygulaman\u0131n durumunu mant\u0131ksal mod\u00fcllere ay\u0131rarak y\u00f6netme imkan\u0131 sunar. Bu, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda kodun daha d\u00fczenli olmas\u0131n\u0131 sa\u011flar.
\n* Geli\u015ftirici Ara\u00e7lar\u0131 Deste\u011fi:<\/strong> Redux DevTools gibi pop\u00fcler geli\u015ftirici ara\u00e7lar\u0131yla entegrasyon sayesinde, durum de\u011fi\u015fikliklerini izlemek, eylemleri kaydetmek ve hata ay\u0131klamak \u00e7ok daha kolayd\u0131r.
\n* Aktif Topluluk ve Dok\u00fcmantasyon:<\/strong> NGXS, aktif bir geli\u015ftirici toplulu\u011funa ve kapsaml\u0131 dok\u00fcmantasyona sahiptir, bu da \u00f6\u011frenme s\u00fcrecini ve sorun gidermeyi kolayla\u015ft\u0131r\u0131r.<\/p>\nNGXS Kurulumu ve Temel Kullan\u0131m<\/h3>\n
@ngxs\/store<\/code> paketini kurmal\u0131s\u0131n\u0131z:<\/p>\nnpm install @ngxs\/store<\/code><\/pre>\napp.module.ts<\/code> dosyan\u0131zda NgxsModule<\/code>‘\u00fc import edip uygulaman\u0131z\u0131n k\u00f6k mod\u00fcl\u00fcne kaydetmeniz gerekir:<\/p>\n\/\/ app.module.ts\nimport { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { NgxsModule } from '@ngxs\/store';\nimport { AppComponent } from '.\/app.component';\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n NgxsModule.forRoot([]) \/\/ Burada state'lerinizi tan\u0131mlayacaks\u0131n\u0131z\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/code><\/pre>\nnpm install @ngxs\/devtools-plugin @ngxs\/logger-plugin<\/code><\/pre>\nNgxsModule.forRoot<\/code> metoduna ekleyerek etkinle\u015ftirebilirsiniz:<\/p>\n\/\/ app.module.ts\nimport { NgxsModule } from '@ngxs\/store';\nimport { NgxsReduxDevtoolsPluginModule } from '@ngxs\/devtools-plugin';\nimport { NgxsLoggerPluginModule } from '@ngxs\/logger-plugin';\n\n@NgModule({\n imports: [\n \/\/ ...\n NgxsModule.forRoot([], { developmentMode: !environment.production }),\n NgxsReduxDevtoolsPluginModule.forRoot({\n disabled: environment.production\n }),\n NgxsLoggerPluginModule.forRoot({\n disabled: environment.production\n })\n ],\n \/\/ ...\n})\nexport class AppModule { }<\/code><\/pre>\ndevelopmentMode<\/code> ayar\u0131 ve eklentilerin disabled<\/code> \u00f6zelli\u011fi, \u00fcretim ortam\u0131nda bu ara\u00e7lar\u0131n devre d\u0131\u015f\u0131 b\u0131rak\u0131lmas\u0131n\u0131 sa\u011flar, bu da performans ve g\u00fcvenlik a\u00e7\u0131s\u0131ndan \u00f6nemlidir.<\/p>\nBir NGXS State Tan\u0131mlamak<\/h3>\n
@State<\/code> dekorat\u00f6r\u00fc ile i\u015faretlenir. Bu s\u0131n\u0131f, durumun varsay\u0131lan de\u011ferlerini (defaults) ve eylem i\u015fleyicilerini (action handlers) i\u00e7erir.<\/p>\nTodo<\/code> uygulamas\u0131n\u0131n durumunu y\u00f6netmek i\u00e7in bir TodoState<\/code> tan\u0131mlayal\u0131m:<\/p>\n\/\/ models\/todo.model.ts\nexport interface Todo {\n id: string;\n title: string;\n completed: boolean;\n}\n\n\/\/ state\/todo.state.ts\nimport { State, Action, StateContext, Selector } from '@ngxs\/store';\nimport { Todo } from '..\/models\/todo.model';\n\n\/\/ State'in yap\u0131s\u0131n\u0131 tan\u0131mlayan aray\u00fcz\nexport interface TodoStateModel {\n todos: Todo[];\n}\n\n@State@State<\/code> dekorat\u00f6r\u00fc iki ana \u00f6zellik al\u0131r:
\n* name<\/code>: Durumun global olarak eri\u015filece\u011fi benzersiz ad\u0131d\u0131r.
\n* defaults<\/code>: Durumun ba\u015flang\u0131\u00e7ta alaca\u011f\u0131 varsay\u0131lan de\u011ferlerdir.<\/p>\nEylemler (Actions) Olu\u015fturma<\/h3>\n
static readonly type<\/code> \u00f6zelli\u011fine sahip basit TypeScript s\u0131n\u0131flar\u0131 olarak tan\u0131mlan\u0131r. Bu type<\/code> \u00f6zelli\u011fi, eylemin benzersiz tan\u0131mlay\u0131c\u0131s\u0131d\u0131r. Eylemin ta\u015f\u0131mas\u0131 gereken veriler (payload), constructor \u00fczerinden iletilir.<\/p>\n\/\/ state\/todo.actions.ts\nimport { Todo } from '..\/models\/todo.model';\n\nexport class AddTodo {\n static readonly type = '[Todo] Add Todo'; \/\/ Eylemin benzersiz tipi\n constructor(public payload: Todo) {} \/\/ Eylemin ta\u015f\u0131d\u0131\u011f\u0131 veri\n}\n\nexport class RemoveTodo {\n static readonly type = '[Todo] Remove Todo';\n constructor(public id: string) {}\n}\n\nexport class ToggleTodo {\n static readonly type = '[Todo] Toggle Todo';\n constructor(public id: string) {}\n}\n\nexport class LoadTodos {\n static readonly type = '[Todo] Load Todos';\n}\n\nexport class SetTodos {\n static readonly type = '[Todo] Set Todos';\n constructor(public payload: Todo[]) {}\n}<\/code><\/pre>\nStore<\/code> servisi arac\u0131l\u0131\u011f\u0131yla g\u00f6nderilecektir.<\/p>\nEylemleri \u0130\u015fleme (Action Handling)<\/h3>\n
State<\/code> s\u0131n\u0131f\u0131 i\u00e7indeki metotlar taraf\u0131ndan @Action<\/code> dekorat\u00f6r\u00fc kullan\u0131larak i\u015flenir. Bu metotlar, StateContext<\/code> (k\u0131saca ctx<\/code>) nesnesini ve eylemin kendisini parametre olarak al\u0131r. StateContext<\/code>, mevcut duruma eri\u015fim (getState()<\/code>), durumu g\u00fcncelleme (setState()<\/code>, patchState()<\/code>) ve di\u011fer eylemleri g\u00f6nderme (dispatch()<\/code>) gibi y\u00f6ntemler sa\u011flar.<\/p>\nsetState<\/code> ve patchState<\/code> metotlar\u0131 bu s\u00fcreci kolayla\u015ft\u0131r\u0131r.<\/p>\nsetState()<\/code>: Durumun tamam\u0131n\u0131 yeni bir nesne ile de\u011fi\u015ftirir.
\npatchState()<\/code>: Durumun yaln\u0131zca belirli bir b\u00f6l\u00fcm\u00fcn\u00fc g\u00fcnceller (derin bir birle\u015ftirme yapar).<\/p>\nTodoState<\/code> s\u0131n\u0131f\u0131m\u0131za eylem i\u015fleyicilerini ekleyelim:<\/p>\n\/\/ state\/todo.state.ts\nimport { State, Action, StateContext, Selector } from '@ngxs\/store';\nimport { Todo } from '..\/models\/todo.model';\nimport { AddTodo, RemoveTodo, ToggleTodo, SetTodos } from '.\/todo.actions';\nimport { v4 as uuidv4 } from 'uuid'; \/\/ Benzersiz ID'ler i\u00e7in\n\nexport interface TodoStateModel {\n todos: Todo[];\n}\n\n@StateaddTodo<\/code> metodunda setState<\/code> kullanarak t\u00fcm durumu g\u00fcncellerken, removeTodo<\/code> ve toggleTodo<\/code> metotlar\u0131nda patchState<\/code> kullanarak sadece todos<\/code> dizisini g\u00fcncelledik. patchState<\/code> genellikle daha kullan\u0131\u015fl\u0131d\u0131r \u00e7\u00fcnk\u00fc durumun di\u011fer k\u0131s\u0131mlar\u0131n\u0131 manuel olarak kopyalamak zorunda kalmazs\u0131n\u0131z.<\/p>\nTodoState<\/code> s\u0131n\u0131f\u0131n\u0131 app.module.ts<\/code>‘deki NgxsModule.forRoot<\/code> metoduna eklemeyi unutmay\u0131n:<\/p>\n\/\/ app.module.ts\nimport { NgxsModule } from '@ngxs\/store';\nimport { TodoState } from '.\/state\/todo.state'; \/\/ State s\u0131n\u0131f\u0131n\u0131 import edin\n\n@NgModule({\n imports: [\n \/\/ ...\n NgxsModule.forRoot([TodoState], { developmentMode: !environment.production }), \/\/ State'i buraya ekleyin\n \/\/ ...\n ],\n \/\/ ...\n})\nexport class AppModule { }<\/code><\/pre>\nVerileri Se\u00e7icilerle (Selectors) Okuma<\/h3>\n
@Selector<\/code> dekorat\u00f6r\u00fc ile i\u015faretlenmi\u015f static<\/code> metotlar olarak tan\u0131mlan\u0131r.<\/p>\n\/\/ state\/todo.state.ts\nimport { State, Action, StateContext, Selector } from '@ngxs\/store';\n\/\/ ... di\u011fer importlar\n\n@StateStore<\/code> servisini enjekte etmeli ve select()<\/code> veya selectSnapshot()<\/code> metotlar\u0131n\u0131 kullanmal\u0131s\u0131n\u0131z:<\/p>\n\/\/ components\/todo-list\/todo-list.component.ts\nimport { Component, OnInit } from '@angular\/core';\nimport { Store, Select } from '@ngxs\/store';\nimport { Observable } from 'rxjs';\nimport { Todo } from '..\/..\/models\/todo.model';\nimport { AddTodo, RemoveTodo, ToggleTodo } from '..\/..\/state\/todo.actions';\nimport { TodoState } from '..\/..\/state\/todo.state';\n\n@Component({\n selector: 'app-todo-list',\n templateUrl: '.\/todo-list.component.html',\n styleUrls: ['.\/todo-list.component.css']\n})\nexport class TodoListComponent implements OnInit {\n\n @Select(TodoState.getAllTodos) todos$!: ObservableTodo ${id} detaylar\u0131:<\/code>, todo);\n });\n }\n}<\/code><\/pre>\n@Select<\/code> dekorat\u00f6r\u00fc, bir se\u00e7iciyi do\u011frudan bir Observable<\/code>‘a ba\u011flayarak bile\u015fenlerde veri ak\u0131\u015f\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. selectSnapshot()<\/code> ise o anki durumun tek seferlik bir kopyas\u0131n\u0131 alman\u0131z\u0131 sa\u011flar.<\/p>\nAsenkron \u0130\u015flemler ve Yan Etkiler<\/h3>\n
@Action<\/code> i\u015fleyicileri i\u00e7inde RxJS operat\u00f6rleri kullan\u0131larak y\u00f6netilir. Genellikle bir eylem tetiklenir, bu eylem bir API \u00e7a\u011fr\u0131s\u0131n\u0131 ba\u015flat\u0131r ve API’den gelen yan\u0131ta g\u00f6re ba\u015fka bir eylem (\u00f6rne\u011fin, ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z bir eylem) g\u00f6nderilerek durum g\u00fcncellenir.<\/p>\n\/\/ services\/todo.service.ts\nimport { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { Observable, of } from 'rxjs';\nimport { Todo } from '..\/models\/todo.model';\n\n@Injectable({ providedIn: 'root' })\nexport class TodoService {\n private apiUrl = 'https:\/\/jsonplaceholder.typicode.com\/todos'; \/\/ \u00d6rnek API\n\n constructor(private http: HttpClient) {}\n\n getTodos(): ObservableloadTodos<\/code> eyleminde, TodoService<\/code>‘den veri \u00e7ekilir. tap<\/code> operat\u00f6r\u00fc, API yan\u0131t\u0131n\u0131 ald\u0131ktan sonra SetTodos<\/code> eylemini g\u00f6nderir ve y\u00fckleme durumunu g\u00fcnceller. catchError<\/code> operat\u00f6r\u00fc ise herhangi bir hata durumunda durumu g\u00fcncelleyerek kullan\u0131c\u0131ya bilgi verilmesini sa\u011flar. TodoState<\/code> s\u0131n\u0131f\u0131na @Injectable()<\/code> dekorat\u00f6r\u00fcn\u00fc eklemeyi ve AppModule<\/code>‘deki providers<\/code> dizisine TodoService<\/code>‘i eklemeyi unutmay\u0131n.<\/p>\nNGXS Pluginleri<\/h3>\n
@ngxs\/devtools-plugin<\/code>:<\/strong> Redux DevTools uzant\u0131s\u0131 ile entegrasyon sa\u011flar. Bu, durum de\u011fi\u015fikliklerini, eylem ge\u00e7mi\u015fini ve zaman yolculu\u011fu hata ay\u0131klamas\u0131n\u0131 m\u00fcmk\u00fcn k\u0131lar.
\n* @ngxs\/logger-plugin<\/code>:<\/strong> Konsola her eylemi ve durum de\u011fi\u015fikli\u011fini loglar. Geli\u015ftirme s\u0131ras\u0131nda durumu ve eylem ak\u0131\u015f\u0131n\u0131 anlamak i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.
\n* @ngxs\/storage-plugin<\/code>:<\/strong> Durumu localStorage<\/code> veya sessionStorage<\/code> gibi taray\u0131c\u0131 depolama alanlar\u0131nda kal\u0131c\u0131 hale getirir. Bu sayede sayfa yenilendi\u011finde bile durum korunabilir.
\n* @ngxs\/form-plugin<\/code>:<\/strong> Angular formlar\u0131 ile NGXS durumunu senkronize etmeyi kolayla\u015ft\u0131r\u0131r.
\n* @ngxs\/websocket-plugin<\/code>:<\/strong> WebSocket olaylar\u0131n\u0131 NGXS eylemlerine ba\u011flamak i\u00e7in kullan\u0131l\u0131r.<\/p>\nNgxsModule.forRoot<\/code> metoduna eklenmeleriyle ger\u00e7ekle\u015ftirilir, t\u0131pk\u0131 devtools<\/code> ve logger<\/code> \u00f6rneklerinde oldu\u011fu gibi.<\/p>\n\/\/ app.module.ts\nimport { NgxsStoragePluginModule } from '@ngxs\/storage-plugin';\n\n@NgModule({\n imports: [\n \/\/ ...\n NgxsModule.forRoot([TodoState], { developmentMode: !environment.production }),\n NgxsReduxDevtoolsPluginModule.forRoot({ disabled: environment.production }),\n NgxsLoggerPluginModule.forRoot({ disabled: environment.production }),\n NgxsStoragePluginModule.forRoot({\n key: ['todo.todos'] \/\/ Hangi state'lerin depolanaca\u011f\u0131n\u0131 belirtin\n })\n ],\n \/\/ ...\n})\nexport class AppModule { }<\/code><\/pre>\nkey<\/code> \u00f6zelli\u011fi, todo<\/code> state’i i\u00e7indeki sadece todos<\/code> b\u00f6l\u00fcm\u00fcn\u00fcn kal\u0131c\u0131 hale getirilece\u011fini belirtir.<\/p>\nGeli\u015fmi\u015f Konular<\/h3>\n
Mod\u00fcler Yap\u0131 ve Feature State’ler<\/h4>\n
NgxsModule.forRoot<\/code> i\u00e7inde tutmak yerine, bunlar\u0131 mant\u0131ksal mod\u00fcllere ay\u0131rmak daha iyi bir yakla\u015f\u0131md\u0131r. NGXS, NgxsModule.forFeature<\/code> metodu ile bunu destekler. Bu, her Angular mod\u00fcl\u00fcn\u00fcn kendi ilgili state’lerini tan\u0131mlamas\u0131na olanak tan\u0131r.<\/p>\n\/\/ user.module.ts\nimport { NgModule } from '@angular\/core';\nimport { CommonModule } from '@angular\/common';\nimport { NgxsModule } from '@ngxs\/store';\nimport { UserState } from '.\/state\/user.state'; \/\/ User state'ini import edin\n\n@NgModule({\n imports: [\n CommonModule,\n NgxsModule.forFeature([UserState]) \/\/ Feature state'i burada kaydet\n ],\n declarations: []\n})\nexport class UserModule { }<\/code><\/pre>\nlazy loading<\/code> ile) o mod\u00fcl\u00fcn state’leri de y\u00fcklenir, bu da ba\u015flang\u0131\u00e7 performans\u0131n\u0131 art\u0131r\u0131r ve kodun daha d\u00fczenli olmas\u0131n\u0131 sa\u011flar.<\/p>\nState Birle\u015ftirme (State Composition)<\/h4>\n
@Selector<\/code> dekorat\u00f6r\u00fcn\u00fc kullanarak birden fazla state’ten veri birle\u015ftiren veya d\u00f6n\u00fc\u015ft\u00fcren se\u00e7iciler olu\u015fturmay\u0131 destekler. Bu, karma\u015f\u0131k veri g\u00f6r\u00fcn\u00fcmleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir mekanizmad\u0131r.<\/p>\n\/\/ state\/app.state.ts (veya ba\u015fka bir state)\nimport { State, Selector } from '@ngxs\/store';\nimport { TodoState, TodoStateModel } from '.\/todo.state';\nimport { UserState, UserStateModel } from '.\/user.state';\n\n@State({\n name: 'app',\n defaults: {}\n})\nexport class AppState {\n\n @Selector([TodoState, UserState])\n static getDashboardData(todoState: TodoStateModel, userState: UserStateModel) {\n \/\/ Her iki state'ten verileri al\u0131p birle\u015ftirme\n const totalTodos = todoState.todos.length;\n const completedTodos = todoState.todos.filter(todo => todo.completed).length;\n const userName = userState.user?.name || 'Guest';\n\n return {\n userName,\n totalTodos,\n completedTodos,\n pendingTodos: totalTodos - completedTodos\n };\n }\n}<\/code><\/pre>\nTodoState<\/code> ve UserState<\/code>‘ten gelen verileri alarak bir dashboard i\u00e7in \u00f6zet bir g\u00f6r\u00fcn\u00fcm olu\u015fturur.<\/p>\nHata Y\u00f6netimi<\/h4>\n
@Action<\/code> i\u015fleyicileri i\u00e7inde RxJS’in catchError<\/code> operat\u00f6r\u00fc kullan\u0131larak hatalar yakalanabilir ve duruma kaydedilebilir. Bu, UI’da kullan\u0131c\u0131ya hata mesajlar\u0131 g\u00f6stermek veya hata durumuna g\u00f6re farkl\u0131 eylemler tetiklemek i\u00e7in kullan\u0131labilir.<\/p>\n\/\/ ... TodoState i\u00e7indeki loadTodos metodundan \u00f6rnek\n@Action(LoadTodos)\nloadTodos(ctx: StateContextTest Edilebilirlik<\/h4>\n
@ngxs\/store\/testing<\/code> mod\u00fcl\u00fc, test ortam\u0131nda NGXS store’unu mock’lamak ve test senaryolar\u0131n\u0131 yazmak i\u00e7in yard\u0131mc\u0131 ara\u00e7lar sunar.<\/p>\n\/\/ state\/todo.state.spec.ts (\u00d6rnek Jest testi)\nimport { TestBed } from '@angular\/core\/testing';\nimport { NgxsModule, Store } from '@ngxs\/store';\nimport { TodoState, TodoStateModel } from '.\/todo.state';\nimport { AddTodo, RemoveTodo, ToggleTodo } from '.\/todo.actions';\nimport { Todo } from '..\/models\/todo.model';\n\ndescribe('TodoState', () => {\n let store: Store;\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [NgxsModule.forRoot([TodoState])]\n });\n store = TestBed.inject(Store);\n });\n\n it('should have a default state', () => {\n const todos = store.selectSnapshot(TodoState.getAllTodos);\n expect(todos).toEqual([]);\n });\n\n it('should add a todo', () => {\n const newTodo: Todo = { id: '', title: 'Test Todo', completed: false };\n store.dispatch(new AddTodo(newTodo));\n const todos = store.selectSnapshot(TodoState.getAllTodos);\n expect(todos.length).toBe(1);\n expect(todos[0].title).toBe('Test Todo');\n });\n\n it('should remove a todo', () => {\n const todo1: Todo = { id: '1', title: 'Test Todo 1', completed: false };\n const todo2: Todo = { id: '2', title: 'Test Todo 2', completed: false };\n store.dispatch(new AddTodo(todo1));\n store.dispatch(new AddTodo(todo2));\n\n store.dispatch(new RemoveTodo('1'));\n const todos = store.selectSnapshot(TodoState.getAllTodos);\n expect(todos.length).toBe(1);\n expect(todos[0].id).toBe('2');\n });\n\n \/\/ Di\u011fer action ve selector testleri...\n});<\/code><\/pre>\nNGXS’in Avantajlar\u0131 ve Dezavantajlar\u0131<\/h3>\n
\n* Az Boilerplate:<\/strong> Redux tabanl\u0131 di\u011fer \u00e7\u00f6z\u00fcmlere g\u00f6re daha az tekrarlayan kod gerektirir, bu da geli\u015ftirme h\u0131z\u0131n\u0131 art\u0131r\u0131r.
\n* TypeScript Deste\u011fi:<\/strong> G\u00fc\u00e7l\u00fc TypeScript entegrasyonu sayesinde t\u00fcr g\u00fcvenli\u011fi ve daha iyi geli\u015ftirici deneyimi sunar.
\n* Dekorat\u00f6r Tabanl\u0131 API:<\/strong> @State<\/code>, @Action<\/code>, @Selector<\/code> gibi dekorat\u00f6rler, kodu daha okunabilir ve y\u00f6netilebilir hale getirir.
\n* RxJS Entegrasyonu:<\/strong> Angular’\u0131n reaktif do\u011fas\u0131na uyumlu, asenkron i\u015flemleri ve veri ak\u0131\u015flar\u0131n\u0131 kolayca y\u00f6netir.
\n* Mod\u00fcler Yap\u0131:<\/strong> forFeature<\/code> \u00f6zelli\u011fi ile b\u00fcy\u00fck uygulamalarda state’leri mod\u00fcllere ay\u0131rma imkan\u0131 sunar.
\n* Geli\u015ftirici Ara\u00e7lar\u0131:<\/strong> Redux DevTools ve logger eklentileri sayesinde hata ay\u0131klama ve durum izleme kolayla\u015f\u0131r.
\n* Performans:<\/strong> Immutable state prensibi ve RxJS’in verimli kullan\u0131m\u0131 ile performansl\u0131 \u00e7al\u0131\u015f\u0131r.<\/p>\n
\n* RxJS Bilgisi Gereklili\u011fi:<\/strong> RxJS’e a\u015fina olmayan geli\u015ftiriciler i\u00e7in \u00f6\u011frenme e\u011frisi olabilir.
\n* Yeni \u00d6\u011frenme E\u011frisi:<\/strong> Redux veya NgRx gibi daha k\u00f6kl\u00fc \u00e7\u00f6z\u00fcmlere al\u0131\u015fk\u0131n geli\u015ftiriciler i\u00e7in farkl\u0131 bir API’ye adapte olma s\u00fcreci gerektirebilir.
\n* NgRx Kadar Olgun De\u011fil:<\/strong> NgRx kadar uzun bir ge\u00e7mi\u015fe ve geni\u015f bir ekosisteme sahip de\u011fildir, ancak h\u0131zla geli\u015fmektedir.
\n* \u00c7ok Fazla State S\u0131n\u0131f\u0131:<\/strong> \u00c7ok b\u00fcy\u00fck projelerde, her bir \u00f6zellik i\u00e7in ayr\u0131 bir State<\/code> s\u0131n\u0131f\u0131 olu\u015fturmak, dosya say\u0131s\u0131n\u0131 art\u0131rabilir, ancak bu durum mod\u00fcler yakla\u015f\u0131mla y\u00f6netilebilir.<\/p>\nNGXS vs. NgRx (K\u0131sa Kar\u015f\u0131la\u015ft\u0131rma)<\/h3>\n
State<\/code> s\u0131n\u0131f\u0131 i\u00e7inde birle\u015ftirir.
\n* \u00d6\u011frenme E\u011frisi:<\/strong> NGXS genellikle NgRx’e g\u00f6re daha h\u0131zl\u0131 \u00f6\u011frenilebilir ve ba\u015flang\u0131\u00e7 i\u00e7in daha az karma\u015f\u0131kt\u0131r. NgRx’in daha kat\u0131 Redux prensipleri ve daha fazla soyutlama katman\u0131 vard\u0131r.
\n* Kod Yap\u0131s\u0131:<\/strong> NGXS, TypeScript s\u0131n\u0131flar\u0131 ve dekorat\u00f6rler kullanarak daha “Angular-vari” bir kodlama deneyimi sunar. NgRx, daha fonksiyonel bir yakla\u015f\u0131m\u0131 benimser.
\n* Kontrol ve Esneklik:<\/strong> NgRx, Redux’\u0131n t\u00fcm g\u00fcc\u00fcn\u00fc ve esnekli\u011fini sunar, bu da \u00e7ok karma\u015f\u0131k senaryolarda daha fazla kontrol sa\u011flayabilir. NGXS ise daha h\u0131zl\u0131 geli\u015ftirme ve daha az kod ile benzer sonu\u00e7lar elde etmeyi hedefler.
\n* Topluluk ve Olgunluk:<\/strong> NgRx, daha uzun bir ge\u00e7mi\u015fe sahip oldu\u011fu i\u00e7in daha b\u00fcy\u00fck bir toplulu\u011fa, daha fazla kayna\u011fa ve daha olgun bir ekosisteme sahiptir. NGXS ise h\u0131zla b\u00fcy\u00fcyen ve aktif bir toplulu\u011fa sahiptir.<\/p>\nSonu\u00e7<\/h3>\n