Si funksionon menaxhimi i gjendjes me NgRx?

Question

Accepted Answer

**NgRx** është një bibliotekë menaxhimi i gjendjes e inspiruar nga Redux për Angular. Ajo centralizon gjendjen e aplikacionit në një **store** të vetëm të pandryshueshem, me një rrjedh të dhënash të rreptë, të parashikueshme, të njëanshme të ndërtuar në RxJS. ## Copëzat qendrore dhe rrjedha ```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) ``` ## Aksionet — përshkruajnë se çfarë ndodhi ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reduktor — funksion i pastër që llogarit gjendjen e ardhshme ```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 })), ); ``` Redaktorët janë **të pastër** — duke pasur gjendjen aktuale dhe një aksion, ata kthejnë një objekt gjendeje plotësisht të ri (në mënyrë të pandryshueshem), nuk ndryshojnë kurrë të vjetrin. ## Efektet — trajtojnë efektet anësorë (HTTP, etj.) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Efektet dëgjojnë për aksione, kryejnë punë asinkrone (si HTTP), dhe dërgojnë aksione rezultati — duke mbajtur efektet anësorë larg komponenteve dhe reduktorëve. ## Selektorët + përdorimi i komponenteve ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## Kur vlen pena NgRx? ```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 ``` (Shënim: NgRx ofron gjithashtu një **SignalStore** më të lehtë dhe **ComponentStore** për më pak kod bazë.) ## Pse është e rëndësishme NgRx sjell menaxhimin e gjendjes Redux-it të parashikueshëm, të centralizuar, të njëanshëm në Angular — i vlefshëm për aplikacionet e mëdha ku shumë komponentë ndajnë gjendje komplekse, dhe ku gjurmueshmëria e rreptë dhe debugging kanë rëndësi. Por ajo mbart kod bazë të konsiderueshëm, kështu që gjykimi kryesor është *kur* ta përdorni atë (gjendje e madhe/komplekse të ndarë) kundrejt qasjeve më të thjeshta (shërbime me sinjale ose `BehaviorSubject`) për aplikacione më të vogla. Përvetësimi i rrjedhës aksion→reduktor→store→selektor dhe efektet për efektet anësorë është themelor për punën në bazat e kodit NgRx.