NgRx არის Redux-ით შთამჯობილი სახელმწიფო მენეჯმენტის ბიბლიოთეკა Angular-ისთვის. ის აკონცენტრებს აპლიკაციის სახელმწიფოს ერთ უცვლელ store-ში, მკაცრი, პროგნოზირებადი, ცალმხრივი ডেটა ნაკადით რომელიც 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 არის სუფთა — მოცემული მიმდინარე სახელმწიფო და action, ისინი აბრუნებენ სრულიად ახალ სახელმწიფო ობიექტს (უცვლელად), არასდროს არ პირდებენ ძველს.
loadUsers$ = createEffect(() =>
this.actions$.pipe(
ofType(loadUsers),
switchMap(() =>
this.api.getUsers().pipe(
map(users => loadUsersSuccess({ users })) // dispatch success with the data
)
)
)
);
Effects უსმენენ actions-ს, ასრულებენ async სამუშაოს (როგორიცაა HTTP) და dispatching-ებენ შედეგის actions — გვერდითი ეფექტები შორს ინახავენ კომპონენტებიდან და 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
(შენიშვნა: NgRx ასევე გთავაზობს უფრო მსუბუქ SignalStore და ComponentStore ნაკლები boilerplate-ით.)
NgRx წამოიტანს Redux-ის პროგნოზირებადი, კონცენტრირებული, ცალმხრივი სახელმწიფო მენეჯმენტი Angular-ში — ღირებული დიდი აპლიკაციებისთვის სადაც ბევრი კომპონენტი საერთო რთულ სახელმწიფოს იზიარებს, და სადაც მკაცრი აკვირებლობა და ხარვეზის აკრეფა მნიშვნელოვანია.
მაგრამ იგი მოაქვს მნიშვნელოვან boilerplate, ამიტომ ძირითადი განზომილება არის როდის უნდა ის გამოიყენოთ (დიდი/რთული საერთო სახელმწიფო) სხვებთან პირუკუ მარტივი მიდგომები (services სიგნალებით ან BehaviorSubject-ით) პატარა აპლიკაციებისთვის.
action→reducer→store→selector ნაკადის გაცნობიერება და effects გვერდითი ეფექტებისთვის არის ქვაკუჭლი NgRx codebase-ში მუშაობისთვის.