Is leabharlann bhainistíochta stáit atá inspíorathe ag Redux NgRx do Angular. Láraithíonn sí stát an fheidhmchláir i stór imshínte amháin store, le sreabhadh sonraí docht, réamhinspreagtha agus aontreorach i dtógáil ar 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 })),
);
Is íon na reducers — agus an stát reatha agus gníomh tugtha duit, filleann siad réad stáit nua (go imshínte), ní mhoillítear an tseanfhear riamh.
loadUsers$ = createEffect(() =>
this.actions$.pipe(
ofType(loadUsers),
switchMap(() =>
this.api.getUsers().pipe(
map(users => loadUsersSuccess({ users })) // dispatch success with the data
)
)
)
);
Eisneoidh gníomhartha éifeachtaí, oibrí asincronach a dhéanamh (ar nós HTTP) agus gníomhartha toradh a dhíscaoileadh — geilleagair taobhghníomhartha a choinneáil lasmuigh de chomhpháirteanna agus laghdaitheoirí.
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
(Nóta: Cuireann NgRx SignalStore agus ComponentStore níos éadroime ar fáil freisin le níos lú boilerplate.)
Tugann NgRx bainistiú stáit dhocht, lárnaithe agus aontreorach Redux do Angular — luachmhar do fheidhmchláir mhóra ina raibh go leor comhpháirteanna stát casta i bpáirt, agus áit ar thábhacht an tráchtas dhocht agus an dífhabhraíteoireacht.
Ach tá boilerplate suntasach aici, mar sin is é an breithiúnas ríthábhachtach cathain a úsáid (stát mór/casta roinnte) i gcomparáid le cásanna níos simplí (seirbhísí le comharthaí nó BehaviorSubject) do fheidhmchláir níos lú.
Bheith i dtuiscint ar an sreabhadh gníomh→reducer→store→selector agus éifeachtaí le haghaidh geilleagair taobhghníomhartha is bunús do bhheith ag obair i mbunaidí kód NgRx.