Πώς λειτουργεί η διαχείριση κατάστασης με NgRx;

Question

Accepted Answer

**NgRx** είναι μια βιβλιοθήκη διαχείρισης κατάστασης εμπνευσμένη από το Redux για το Angular. Συγκεντρώνει την κατάσταση της εφαρμογής σε ένα ενιαίο αμετάβλητο **store**, με μια αυστηρή, προβλέψιμη, μονοκατευθυντική ροή δεδομένων που δημιουργείται στο RxJS. ## Τα βασικά στοιχεία και η ροή ```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) ``` ## Ενέργειες — περιγράφουν τι συνέβη ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — καθαρή συνάρτηση που υπολογίζει την επόμενη κατάσταση ```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 είναι **καθαροί** — δεδομένης της τρέχουσας κατάστασης και μιας ενέργειας, επιστρέφουν ένα ολοκαίνουργιο αντικείμενο κατάστασης (αμετάβλητα), δεν μεταβάλλουν ποτέ το παλιό. ## Effects — χειρίζονται παρενέργειες (HTTP, κλπ) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Τα Effects ακούν για ενέργειες, εκτελούν ασύγχρονη εργασία (όπως HTTP) και διαβιβάζουν ενέργειες αποτελέσματος — διατηρούν τις παρενέργειες εκτός των συστατικών και των reducers. ## Selectors + χρήση συστατικού ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## Πότε αξίζει το 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 ``` (Σημείωση: Το NgRx προσφέρει επίσης ένα ελαφρύτερο **SignalStore** και **ComponentStore** για λιγότερο boilerplate.) ## Γιατί είναι σημαντικό Το NgRx φέρνει τη προβλέψιμη, συγκεντρωμένη, μονοκατευθυντική διαχείριση κατάστασης του Redux στο Angular — πολύτιμη για μεγάλες εφαρμογές όπου πολλά συστατικά μοιράζονται σύνθετη κατάσταση, και όπου η αυστηρή δυνατότητα ιχνηλάτησης και διόρθωσης σφαλμάτων είναι σημαντικές. Αλλά φέρνει σημαντικό boilerplate, γι' αυτό η βασική κρίση είναι *πότε* να το χρησιμοποιήσετε (μεγάλη/σύνθετη μοιρασμένη κατάσταση) έναντι απλούστερων προσεγγίσεων (υπηρεσίες με signals ή `BehaviorSubject`) για μικρότερες εφαρμογές. Η κατανόηση της ροής action→reducer→store→selector και των effects για παρενέργειες είναι βασική για τη δουλειά σε codebases του NgRx.