NgRx Angular ਲਈ ਇੱਕ Redux-ਪ੍ਰੇਰਿਤ state-management library ਹੈ। ਇਹ ਐਪਲੀਕੇਸ਼ਨ state ਨੂੰ ਇੱਕ ਸਿੰਗਲ immutable 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 ਸ਼ੁੱਧ ਹਨ — ਮੌਜੂਦਾ state ਅਤੇ ਇੱਕ action ਦਿੱਤੇ ਜਾਣ ਤੇ, ਉਹ ਇੱਕ ਬਿਲਕੁਲ ਨਵੀਂ state object ਵਾਪਸ ਕਰਦੇ ਹਨ (immutably), ਕਦੇ ਪੁਰਾਣੇ ਨੂੰ mutate ਨਹੀਂ ਕਰਦੇ।
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 ਵਰਗਾ), ਅਤੇ result actions dispatch ਕਰਦੇ ਹਨ — side effects ਨੂੰ components ਅਤੇ 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 ਕਮ boilerplate ਲਈ ਇੱਕ ਹਲਕਾ SignalStore ਅਤੇ ComponentStore ਵੀ ਪੇਸ਼ ਕਰਦਾ ਹੈ।)
NgRx Redux ਦੇ ਪੂਰਵਅਨੁਮਾਨਯੋਗ, ਕੇਂਦਰੀ, ਇੱਕ-ਦਿਸ਼ਾ state management ਨੂੰ Angular ਵਿੱਚ ਲਿਆਉਂਦਾ ਹੈ — ਵੱਡੀਆਂ apps ਲਈ ਮੁੱਲਵਾਨ ਜਿੱਥੇ ਬਹੁਤ ਸਾਰੇ components ਗੁੰਝਲਦਾਰ state ਸਾਂਝਾ ਕਰਦੇ ਹਨ, ਅਤੇ ਜਿੱਥੇ ਸਖ਼ਤ ਟ੍ਰੇਸੇਬਿਲਿਟੀ ਅਤੇ debugging ਮਹੱਤਵਪੂਰਨ ਹਨ।
ਪਰ ਇਹ ਮਹਾਨ boilerplate ਲੈ ਕੇ ਆਉਂਦਾ ਹੈ, ਇਸ ਲਈ ਮੁੱਖ ਨਿਰਣਾ ਹੈ ਕਦੋਂ ਇਸਨੂੰ ਵਰਤਣਾ ਹੈ (ਵੱਡਾ/ਗੁੰਝਲਦਾਰ ਸਾਂਝਾ state) ਬਨਾਮ ਸਰਲ ਤਰੀਕਾ (signals ਵਾਲੀਆਂ services ਜਾਂ BehaviorSubject) ਛੋਟੀਆਂ apps ਲਈ।
action→reducer→store→selector ਵਹਾਅ ਅਤੇ side effects ਲਈ effects ਨੂੰ ਸਮਝਣਾ NgRx codebases ਵਿੱਚ ਕੰਮ ਕਰਨ ਲਈ ਅਹਿਮ ਹੈ।