NgRx ile durum yönetimi nasıl çalışır?

Question

Accepted Answer

**NgRx**, Angular için Redux'tan esinlenen bir durum yönetimi kütüphanesidir. Uygulama durumunu tek bir değişmez **store**'da merkezi hale getirir ve RxJS üzerinde yerleşik katı, öngörülebilir, tek yönlü veri akışına sahiptir. ## Temel parçalar ve akış ```text Component dispatches an ACTION → REDUCER produces new state (pure function) → STORE updates → SELECTORS read state → Component re-renders (EFFECTS handle side effects like HTTP, dispatching new actions) ``` ## Actions — ne olduğunu tanımlar ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — sonraki durumu hesaplayan saf fonksiyon ```ts import { createReducer, on } from "@ngrx/store"; export const usersReducer = createReducer( initialState, on(loadUsers, state => ({ ...state, loading: true })), on(loadUsersSuccess, (state, { users }) => ({ ...state, users, loading: false })), ); ``` Reducers **safdır** — mevcut durum ve bir işlem verildiğinde, tamamen yeni bir durum nesnesi döndürürler (değişmezlik), eski olanı asla değiştirmezler. ## Effects — yan etkileri işler (HTTP, vb.) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Effects eylemleri dinler, eşzamansız çalışma gerçekleştirir (HTTP gibi) ve sonuç eylemleri gönderir — yan etkileri bileşenlerin ve reducers'ın dışında tutar. ## Selectors + bileşen kullanımı ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## NgRx ne zaman buna değer? ```text ✓ Large apps with lots of shared state across many components ✓ Complex state interactions, need for time-travel debugging / strict predictability ✗ Small/medium apps → it's heavy boilerplate; a service + signals/BehaviorSubject is simpler ``` (Not: NgRx ayrıca daha hafif bir **SignalStore** ve daha az boilerplate için **ComponentStore** sunmaktadır.) ## Neden önemli NgRx, Redux'un öngörülebilir, merkezi, tek yönlü durum yönetimini Angular'a getirir — birçok bileşenin karmaşık durumu paylaştığı ve katı izlenebilirlik ile hata ayıklamanın önemli olduğu büyük uygulamalar için değerlidir. Ancak önemli ölçüde boilerplate'le birlikte gelir, bu nedenle temel karar *ne zaman* kullanılacağı (büyük/karmaşık paylaşılan durum) ve daha küçük uygulamalar için daha basit yaklaşımlar (sinyaller veya `BehaviorSubject` ile hizmetler) ile karşılaştırıldığında karar vermektir. Action→reducer→store→selector akışını ve yan etkiler için effects'i anlamak, NgRx kod tabanlarında çalışmanın temelini oluşturur.