NgRx ایک Redux سے متاثر state-management لائبریری ہے جو Angular کے لیے ہے۔ یہ application state کو ایک single 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 واپس کرتے ہیں (تبدیل کر کے)، کبھی بھی پرانے کو تبدیل نہیں کرتے۔
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)، اور نتیجہ کی 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 ایک ہلکا SignalStore اور ComponentStore بھی فراہم کرتا ہے کم boilerplate کے لیے۔)
NgRx Redux کی قابل پیش گوئی، مرکزی، یک طرفہ state management کو Angular میں لاتی ہے — بڑی applications کے لیے قیمتی جہاں بہت سے components پیچیدہ state شیئر کرتے ہیں، اور جہاں سخت traceability اور debugging اہم ہو۔
لیکن یہ قابلِ غور boilerplate لے کر آتی ہے، تو اہم فیصلہ یہ ہے کہ کب اسے استعمال کریں (بڑی/پیچیدہ shared state) بمقابلہ سادہ طریقوں کے (services جو signals یا BehaviorSubject کے ساتھ) چھوٹی applications کے لیے۔
action→reducer→store→selector کا بہاؤ اور effects کو side effects کے لیے سمجھنا NgRx codebases میں کام کرنے کا بنیادی ہے۔