Angular, b\u00fcy\u00fck ve karma\u015f\u0131k kurumsal uygulamalar geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc bir \u00e7er\u00e7evedir. Ancak, uygulama b\u00fcy\u00fcd\u00fck\u00e7e ve bile\u015fenler aras\u0131 ileti\u015fim karma\u015f\u0131kla\u015ft\u0131k\u00e7a, durum y\u00f6netimi (state management) \u00f6nemli bir zorluk haline gelebilir. Verilerin farkl\u0131 bile\u015fenler aras\u0131nda senkronize edilmesi, g\u00fcncellenmesi ve tutarl\u0131 bir \u015fekilde korunmas\u0131, \u00f6zellikle \u00e7ok say\u0131da bile\u015fenin ayn\u0131 verilere eri\u015fmesi veya bu verileri de\u011fi\u015ftirmesi gerekti\u011finde, geli\u015ftiriciler i\u00e7in ba\u015f a\u011fr\u0131s\u0131 yaratabilir. \u0130\u015fte bu noktada, Redux mimarisi ve onun Angular i\u00e7in adaptasyonu olan ngrx devreye girer.<\/p>\n
Bu makalede, ngrx’in ne oldu\u011funu, neden kullan\u0131lmas\u0131 gerekti\u011fini, temel prensiplerini ve Angular uygulamalar\u0131n\u0131zda Redux tarz\u0131 durum y\u00f6netimini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Basit bir saya\u00e7 uygulamas\u0131 \u00f6rne\u011fi \u00fczerinden ngrx’in ana bile\u015fenleri olan Store, Actions, Reducers, Selectors ve Effects’i derinlemesine ele alaca\u011f\u0131z. Amac\u0131m\u0131z, ngrx’e yeni ba\u015flayanlar i\u00e7in kapsaml\u0131 bir rehber sunmak ve bu g\u00fc\u00e7l\u00fc k\u00fct\u00fcphaneyi Angular projelerinize entegre etme konusunda size yol g\u00f6stermektir.<\/p>\n
Modern tek sayfa uygulamalar\u0131nda (SPA’lar), kullan\u0131c\u0131 aray\u00fcz\u00fc ve arkas\u0131ndaki veri aras\u0131nda s\u00fcrekli bir etkile\u015fim vard\u0131r. Bir kullan\u0131c\u0131 bir d\u00fc\u011fmeye t\u0131klad\u0131\u011f\u0131nda, bir form g\u00f6nderdi\u011finde veya bir liste \u00f6\u011fesi se\u00e7ti\u011finde, uygulaman\u0131n durumu de\u011fi\u015fir. Bu de\u011fi\u015fiklikler, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerinde yans\u0131t\u0131lmal\u0131 ve tutarl\u0131l\u0131k sa\u011flanmal\u0131d\u0131r.<\/p>\n
Geleneksel olarak, Angular’da durum y\u00f6netimi i\u00e7in * Veri Ak\u0131\u015f\u0131 Karma\u015f\u0131kla\u015f\u0131r:<\/strong> Hangi verinin nerede g\u00fcncellendi\u011fini takip etmek zorla\u015f\u0131r. Bu sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in Redux gibi \u00f6ng\u00f6r\u00fclebilir durum y\u00f6netimi yakla\u015f\u0131mlar\u0131 geli\u015ftirilmi\u015ftir.<\/p>\n Redux, JavaScript uygulamalar\u0131 i\u00e7in tahmin edilebilir durum kapsay\u0131c\u0131s\u0131d\u0131r. Temelde \u00fc\u00e7 ana prensibe dayan\u0131r:<\/p>\n 1. Tek Do\u011fruluk Kayna\u011f\u0131 (Single Source of Truth):<\/strong> Uygulaman\u0131z\u0131n t\u00fcm durumu tek bir b\u00fcy\u00fck JavaScript nesnesinde saklan\u0131r. Bu nesneye “Store” ad\u0131 verilir. ngrx, Redux prensiplerini Angular ekosistemine ta\u015f\u0131yan bir k\u00fct\u00fcphane koleksiyonudur. RxJS’in g\u00fcc\u00fcnden yararlanarak, Angular uygulamalar\u0131nda reaktif ve tahmin edilebilir bir durum y\u00f6netimi \u00e7\u00f6z\u00fcm\u00fc sunar. ngrx, sadece ngrx, belirli bir veri ak\u0131\u015f\u0131 ve bile\u015fenler aras\u0131 etkile\u015fim modeli sunar. Temel bile\u015fenleri \u015funlard\u0131r:<\/p>\n * Store:<\/strong> Uygulaman\u0131n durumunu tutan merkezi depodur. Bile\u015fenler bu depodan durumu okur ve action’lar g\u00f6ndererek durumu de\u011fi\u015ftirir. ngrx’i kullanmaya ba\u015flamak i\u00e7in \u00f6ncelikle bir Angular projesine ihtiyac\u0131m\u0131z var.<\/p>\n E\u011fer hen\u00fcz bir Angular projeniz yoksa, Angular CLI kullanarak yeni bir proje olu\u015fturabilirsiniz:<\/p>\n ngrx paketlerini projenize eklemek i\u00e7in Bu komut, \u015eimdi, ngrx’in temel bile\u015fenlerini kullanarak basit bir saya\u00e7 uygulamas\u0131 geli\u015ftirelim. Bu saya\u00e7, art\u0131rma, azaltma ve s\u0131f\u0131rlama i\u015flevlerine sahip olacak.<\/p>\n \u00d6ncelikle, uygulaman\u0131z\u0131n durumunu (state) tan\u0131mlamam\u0131z gerekiyor. Basit bir saya\u00e7 i\u00e7in sadece bir Burada Action’lar, uygulamam\u0131zdaki olaylar\u0131 temsil eder. Saya\u00e7 uygulamam\u0131z i\u00e7in “art\u0131r”, “azalt” ve “s\u0131f\u0131rla” olmak \u00fczere \u00fc\u00e7 action’a ihtiyac\u0131m\u0131z var. ngrx’in Reducers, action’lar\u0131 dinleyen ve duruma yeni bir de\u011fer atayan saf fonksiyonlard\u0131r. * \u015eimdi reducer’\u0131m\u0131z\u0131 Burada Art\u0131k bile\u015fenlerimizden durumu okuyabilir ve action’lar g\u00f6nderebiliriz. @Input()<\/code> ve @Output()<\/code> dekorat\u00f6rleri arac\u0131l\u0131\u011f\u0131yla bile\u015fenler aras\u0131 ileti\u015fim, servisler arac\u0131l\u0131\u011f\u0131yla veri payla\u015f\u0131m\u0131 veya RxJS Subject’ler kullan\u0131lm\u0131\u015ft\u0131r. Ancak, uygulama hiyerar\u015fisi derinle\u015ftik\u00e7e ve bile\u015fenler aras\u0131 ba\u011f\u0131ml\u0131l\u0131klar artt\u0131k\u00e7a:<\/p>\n
\n* Hata Ay\u0131klama Zorla\u015f\u0131r:<\/strong> Bir hatan\u0131n kayna\u011f\u0131n\u0131 bulmak, durumun hangi noktada tutars\u0131z hale geldi\u011fini anlamak g\u00fc\u00e7le\u015fir.
\n* Performans Sorunlar\u0131 Ortaya \u00c7\u0131kabilir:<\/strong> Gereksiz g\u00fcncellemeler veya veri kopyalamalar\u0131 performans\u0131 etkileyebilir.
\n* Kod Tekrar\u0131 Artar:<\/strong> Ayn\u0131 veriyi y\u00f6netmek i\u00e7in farkl\u0131 bile\u015fenlerde benzer kodlar yaz\u0131labilir.<\/p>\nRedux Prensipleri ve ngrx’in Yeri<\/h3>\n
\n2. Durum Salt Okunurdur (State is Read-Only):<\/strong> Durum do\u011frudan de\u011fi\u015ftirilemez. Durumu de\u011fi\u015ftirmek i\u00e7in tek yol, bir “Action” ad\u0131 verilen olay\u0131 g\u00f6ndermektir. Bu, durum de\u011fi\u015fikliklerinin izlenebilir ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 sa\u011flar.
\n3. De\u011fi\u015fiklikler Saf Fonksiyonlarla Yap\u0131l\u0131r (Changes are Made with Pure Functions):<\/strong> Durumu de\u011fi\u015ftiren fonksiyonlara “Reducers” denir. Reducers, mevcut durumu ve bir action’\u0131 girdi olarak al\u0131r ve yeni bir durumu \u00e7\u0131kt\u0131 olarak d\u00f6nd\u00fcr\u00fcr. Yan etkilere (side effects) neden olmazlar ve her zaman ayn\u0131 girdi i\u00e7in ayn\u0131 \u00e7\u0131kt\u0131y\u0131 \u00fcretirler.<\/p>\nStore<\/code> mod\u00fcl\u00fcnden ibaret de\u011fildir; ayn\u0131 zamanda Effects<\/code> (yan etkileri y\u00f6netmek i\u00e7in), Selectors<\/code> (durumdan veri se\u00e7mek i\u00e7in), Entity<\/code> (koleksiyonlar\u0131 y\u00f6netmek i\u00e7in) ve Schematics<\/code> (boilerplate kodunu azaltmak i\u00e7in) gibi ek mod\u00fclleri de i\u00e7erir.<\/p>\nngrx Mimarisi ve Bile\u015fenleri<\/h3>\n
\n* Actions:<\/strong> Uygulamada meydana gelen benzersiz olaylar\u0131 tan\u0131mlayan basit nesnelerdir. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n “\u00fcr\u00fcn ekle” d\u00fc\u011fmesine t\u0131klamas\u0131 bir action’\u0131 tetikleyebilir. Action’lar genellikle bir type<\/code> \u00f6zelli\u011fine ve iste\u011fe ba\u011fl\u0131 olarak bir payload<\/code> (action ile birlikte ta\u015f\u0131nan veri) \u00f6zelli\u011fine sahiptir.
\n* Reducers:<\/strong> Action’lar\u0131 dinleyen ve uygulaman\u0131n durumunu de\u011fi\u015ftiren saf fonksiyonlard\u0131r. Mevcut durumu ve tetiklenen action’\u0131 girdi olarak al\u0131r, yeni bir durum nesnesi d\u00f6nd\u00fcr\u00fcr. Reducers asla mevcut durumu do\u011frudan mutasyona u\u011fratmaz; her zaman yeni bir durum nesnesi d\u00f6nd\u00fcr\u00fcr.
\n* Selectors:<\/strong> Store’daki durumdan belirli veri par\u00e7alar\u0131n\u0131 se\u00e7mek i\u00e7in kullan\u0131lan saf fonksiyonlard\u0131r. Performans optimizasyonu i\u00e7in memoization (belle\u011fe alma) \u00f6zelliklidirler, yani ayn\u0131 girdi i\u00e7in daha \u00f6nce hesaplanm\u0131\u015f sonucu d\u00f6nd\u00fcr\u00fcrler.
\n* Effects:<\/strong> Uygulaman\u0131n d\u0131\u015f d\u00fcnyayla etkile\u015fimini (API \u00e7a\u011fr\u0131lar\u0131, router navigasyonlar\u0131, veritaban\u0131 i\u015flemleri vb.) y\u00f6neten yan etkilerdir. Reducers’\u0131n saf kalmas\u0131n\u0131 sa\u011flarlar ve asenkron i\u015flemleri y\u00f6netmek i\u00e7in RxJS operat\u00f6rlerini kullan\u0131rlar.
\n* Schematics:<\/strong> Angular CLI ile entegre olarak ngrx kod iskeletini otomatik olarak olu\u015fturmaya yarayan ara\u00e7lard\u0131r. Bu sayede boilerplate kodu azalt\u0131l\u0131r ve geli\u015ftirme h\u0131z\u0131 art\u0131r\u0131l\u0131r.<\/p>\nngrx Kurulumu ve Temel Kullan\u0131m<\/h3>\n
Proje Olu\u015fturma<\/h4>\n
ng new ngrx-counter-app --routing false --style css\ncd ngrx-counter-app<\/code><\/pre>\nngrx Kurulumu<\/h4>\n
@ngrx\/schematics<\/code> kullanabilirsiniz. Bu, gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyecek ve StoreModule<\/code>‘\u00fc uygulaman\u0131z\u0131n k\u00f6k mod\u00fcl\u00fcne (app.module.ts<\/code>) otomatik olarak yap\u0131land\u0131racakt\u0131r.<\/p>\nng add @ngrx\/store<\/code><\/pre>\n@ngrx\/store<\/code> paketini kuracak ve app.module.ts<\/code> dosyan\u0131z\u0131 a\u015fa\u011f\u0131daki gibi g\u00fcncelleyecektir:<\/p>\n\/\/ src\/app\/app.module.ts\nimport { NgModule, isDevMode } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { StoreModule } from '@ngrx\/store'; \/\/ ngrx\/store eklendi\nimport { StoreDevtoolsModule } from '@ngrx\/store-devtools'; \/\/ ngrx\/store-devtools eklendi\nimport { AppComponent } from '.\/app.component';\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n StoreModule.forRoot({}), \/\/ K\u00f6k durum nesnesi tan\u0131mland\u0131\n StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: !isDevMode() }) \/\/ Geli\u015ftirici ara\u00e7lar\u0131\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/code><\/pre>\nStoreModule.forRoot({})<\/code> ifadesi, uygulaman\u0131z\u0131n k\u00f6k durumunu tan\u0131mlar. \u015eimdilik bo\u015f bir nesne olarak b\u0131rakabiliriz. StoreDevtoolsModule<\/code> ise Redux DevTools eklentisi ile entegrasyonu sa\u011flar, bu da durum de\u011fi\u015fikliklerini izlemek ve hata ay\u0131klamak i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nAd\u0131m Ad\u0131m ngrx Uygulamas\u0131 Olu\u015fturma: Basit Bir Saya\u00e7<\/h3>\n
1. State Tan\u0131mlama<\/h4>\n
number<\/code> de\u011feri yeterli olacakt\u0131r. Genellikle durumunuzu bir aray\u00fcz (interface) ile tan\u0131mlamak iyi bir pratiktir.<\/p>\nsrc\/app\/state\/app.state.ts<\/code> (veya src\/app\/counter\/counter.state.ts<\/code> gibi daha mod\u00fcler bir yap\u0131)<\/p>\nexport interface AppState {\n counter: number;\n}\n\nexport const initialState: AppState = {\n counter: 0\n};<\/code><\/pre>\nAppState<\/code> aray\u00fcz\u00fc, uygulamam\u0131z\u0131n k\u00f6k durumunun nas\u0131l g\u00f6r\u00fcnece\u011fini belirtir. initialState<\/code> ise uygulaman\u0131n ba\u015flang\u0131\u00e7 durumunu tan\u0131mlar.<\/p>\n2. Actions Tan\u0131mlama<\/h4>\n
@ngrx\/store<\/code> paketinden createAction<\/code> ve props<\/code> fonksiyonlar\u0131n\u0131 kullanarak action’lar\u0131 tan\u0131mlayabiliriz.<\/p>\nsrc\/app\/state\/counter.actions.ts<\/code><\/p>\nimport { createAction, props } from '@ngrx\/store';\n\n\/\/ [Counter] \u00d6n eki, bu action'\u0131n hangi alana ait oldu\u011funu g\u00f6sterir.\n\/\/ Bu bir isimlendirme kural\u0131d\u0131r ve okunabilirli\u011fi art\u0131r\u0131r.\n\nexport const increment = createAction('[Counter] Increment');\nexport const decrement = createAction('[Counter] Decrement');\nexport const reset = createAction(\n '[Counter] Reset',\n props<{ value: number }>() \/\/ Bu action bir payload (y\u00fck) ta\u015f\u0131yacak\n);\n\n\/\/ Effects i\u00e7in de action'lar tan\u0131mlayabiliriz (ileride kullanaca\u011f\u0131z)\nexport const loadCounter = createAction('[Counter] Load Counter');\nexport const loadCounterSuccess = createAction(\n '[Counter] Load Counter Success',\n props<{ data: number }>()\n);\nexport const loadCounterFailure = createAction(\n '[Counter] Load Counter Failure',\n props<{ error: any }>()\n);<\/code><\/pre>\ncreateAction<\/code> fonksiyonu, benzersiz bir t\u00fcr dizesi al\u0131r. props<\/code> fonksiyonu ise action ile birlikte ta\u015f\u0131nacak ek verileri (payload) tan\u0131mlamam\u0131z\u0131 sa\u011flar. reset<\/code> action’\u0131 bir value<\/code> payload’\u0131 alarak sayac\u0131 belirli bir de\u011fere s\u0131f\u0131rlayacakt\u0131r.<\/p>\n3. Reducers Olu\u015fturma<\/h4>\n
@ngrx\/store<\/code> paketinden createReducer<\/code> ve on<\/code> fonksiyonlar\u0131n\u0131 kullanarak reducer’\u0131m\u0131z\u0131 olu\u015fturabiliriz.<\/p>\nsrc\/app\/state\/counter.reducer.ts<\/code><\/p>\nimport { createReducer, on } from '@ngrx\/store';\nimport { increment, decrement, reset, loadCounterSuccess } from '.\/counter.actions';\nimport { initialState } from '.\/app.state'; \/\/ Ba\u015flang\u0131\u00e7 durumunu import ediyoruz\n\nexport const counterReducer = createReducer(\n initialState, \/\/ Reducer'\u0131n ba\u015flang\u0131\u00e7 durumu\n on(increment, (state) => ({ ...state, counter: state.counter + 1 })), \/\/ Art\u0131rma action'\u0131\n on(decrement, (state) => ({ ...state, counter: state.counter - 1 })), \/\/ Azaltma action'\u0131\n on(reset, (state, { value }) => ({ ...state, counter: value })), \/\/ S\u0131f\u0131rlama action'\u0131 (payload ile)\n on(loadCounterSuccess, (state, { data }) => ({ ...state, counter: data })) \/\/ Async y\u00fckleme ba\u015far\u0131l\u0131\n);<\/code><\/pre>\ncreateReducer<\/code> fonksiyonu, ba\u015flang\u0131\u00e7 durumunu ve bir dizi on<\/code> fonksiyonunu al\u0131r.
\n* on<\/code> fonksiyonu, belirli bir action tetiklendi\u011finde \u00e7al\u0131\u015facak bir geri \u00e7a\u011f\u0131rma (callback) fonksiyonu tan\u0131mlar.
\n* Bu geri \u00e7a\u011f\u0131rma fonksiyonu, mevcut durumu (state<\/code>) ve action’\u0131n kendisini (e\u011fer payload varsa) al\u0131r.
\n* \u00d6nemli:<\/strong> Reducer fonksiyonlar\u0131, mevcut durumu do\u011frudan de\u011fi\u015ftirmemeli (immutable olmal\u0131). Bunun yerine, mevcut durumun bir kopyas\u0131n\u0131 almal\u0131 ve sadece de\u011fi\u015fen \u00f6zellikleri g\u00fcncellemelidir. Spread operat\u00f6r\u00fc (...state<\/code>) bu ama\u00e7la kullan\u0131l\u0131r.<\/p>\n4. Store’u Uygulamaya Entegre Etme<\/h4>\n
app.module.ts<\/code> dosyas\u0131ndaki StoreModule.forRoot()<\/code> metoduna eklememiz gerekiyor.<\/p>\n\/\/ src\/app\/app.module.ts\nimport { NgModule, isDevMode } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { StoreModule } from '@ngrx\/store';\nimport { StoreDevtoolsModule } from '@ngrx\/store-devtools';\nimport { AppComponent } from '.\/app.component';\nimport { counterReducer } from '.\/state\/counter.reducer'; \/\/ Reducer'\u0131m\u0131z\u0131 import ediyoruz\nimport { AppState } from '.\/state\/app.state'; \/\/ AppState aray\u00fcz\u00fcn\u00fc import ediyoruz\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n StoreModule.forRootStoreModule.forRootcounter<\/code> adl\u0131 bir \u00f6zelli\u011fe sahip oldu\u011funu ve bu \u00f6zelli\u011fin counterReducer<\/code> taraf\u0131ndan y\u00f6netildi\u011fini belirtiyoruz. Art\u0131k Store<\/code> servisimiz, AppState<\/code> aray\u00fcz\u00fcne uygun bir yap\u0131ya sahip olacak.<\/p>\n5. Store’u Kullanma (Component Taraf\u0131)<\/h4>\n
AppComponent<\/code>‘i g\u00fcncelleyelim.<\/p>\nsrc\/app\/app.component.ts<\/code><\/p>\nimport { Component } from '@angular\/core';\nimport { Store } from '@ngrx\/store';\nimport { Observable } from 'rxjs';\nimport { increment, decrement, reset, loadCounter } from '.\/state\/counter.actions';\nimport { AppState } from '.\/state\/app.state';\n\n@Component({\n selector: 'app-root',\n template: \n