Kako upravljanje stanjem s NgRx-om funkcionira?

Question

Accepted Answer

**NgRx** je Redux-inspirirana biblioteka za upravljanje stanjem za Angular. Centralizira stanje aplikacije u jednoj nepromjenjivoj **store**, sa strogom, predvidivom, jednostavnom tokom podataka izgrađenom na RxJS-u. ## Ključni dijelovi i tok ```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) ``` ## Akcije — opisuju što se dogodilo ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — čista funkcija koja izračunava sljedeće stanje ```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 su **čisti** — s obzirom na trenutno stanje i akciju, vraćaju novi objekat stanja (nepromjenjivo), nikad ne mijenjajući stari. ## Efekti — rukuju nuspojavama (HTTP, itd.) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Efekti slušaju akcije, izvršavaju asinkroni rad (poput HTTP-a) i otpuštaju akcije rezultata — držeći nuspojave izvan komponenti i reducersa. ## Selektori + korištenje komponente ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## Kada je NgRx vrijedan? ```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 ``` (Napomena: NgRx nudi i lakši **SignalStore** i **ComponentStore** za manje boilerplate.) ## Zašto je to važno NgRx donosi Redux-ovo predvidljivo, centralizirano, jednostavno upravljanje stanjem u Angular — dragocjeno za velike aplikacije gdje mnogo komponenti dijeli složeno stanje, i gdje su važni stroga praćivost i otklanjanje grešaka. Ali dolazi s značajnom količinom boilerplate-a, pa je ključna prosudba *kada* ga koristiti (velike/složeno dijeljeno stanje) u odnosu na jednostavnije pristupe (servisi sa signalima ili `BehaviorSubject`) za manje aplikacije. Razumijevanje toka akcija→reducer→store→selektor i efekata za nuspojave temeljna je za rad u NgRx codebasama.