NgRx hija librerija ta' ġestjoni tal-istati inspirata minn Redux għal Angular. Tikkentralizza l-istati tal-applikazzjoni f'store waħid immutabbli, b'fluss ta' data rigidu, prevedibil, u unidirezzjonali mibni fuq RxJS.
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)
import { createAction, props } from "@ngrx/store";
export const loadUsers = createAction("[Users] Load");
export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>());
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 huma puri — mogħtija l-istati attwali u azzjoni, huma jirritornaw oġġett ta' stat kompletament ġdid (b'mod immutabbli), qatt ma jbiddlu l-wieħed antik.
loadUsers$ = createEffect(() =>
this.actions$.pipe(
ofType(loadUsers),
switchMap(() =>
this.api.getUsers().pipe(
map(users => loadUsersSuccess({ users })) // dispatch success with the data
)
)
)
);
Effects jsaħħu l-azzjoni, iwettqu xogħol asinkroniku (bħal HTTP), u jippreżentaw azzjonijiet ta' riżultat — iweqfu effetti sekondarja barra minn komponenti u reducers.
export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized
// component
users$ = this.store.select(selectUsers);
load() { this.store.dispatch(loadUsers()); }
<li *ngFor="let u of users$ | async">{{ u.name }}</li>
✓ 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
(Nota: NgRx joffri wkoll SignalStore u ComponentStore aktar ħaffifa għal boilerplate inqas.)
NgRx iġib il-ġestjoni tal-istati prevedibli, tikkentralizzata, u unidirezzjonali ta' Redux lil Angular — ta' valur għal apps kbar fejn ħafna komponenti jaqsmu stat kumplesso, u fejn trakkabilità stretta u debugging huma importanti.
Iżda tmexxija boilerplate sinifikanti, allura l-ġudizzju prinċipali huwa meta tuża (stat kondiviż kbir/kumplesso) versus approċċi aktar sempliċi (servizzi b'sinjali jew BehaviorSubject) għal apps iżgħar.
L-għarfien tal-fluss action→reducer→store→selector u effects għal effetti sekondarja huwa essenzjali għat-taħdem f'codebases NgRx.