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 हे शुद्ध आहेत — वर्तमान स्टेट आणि क्रिया दिली जाते तर ते अगदी नवीन स्टेट ऑब्जेक्ट परत करतात (अपरिवर्तनीयरित्या), कधीही जुने बदलत नाहीत.
loadUsers$ = createEffect(() =>
this.actions$.pipe(
ofType(loadUsers),
switchMap(() =>
this.api.getUsers().pipe(
map(users => loadUsersSuccess({ users })) // dispatch success with the data
)
)
)
);
Effects क्रियांचे ऐकते, अॅसिंक कार्य (HTTP प्रमाणे) करते आणि परिणाम क्रिया पाठवते — साइड इफेक्ट्स घटकांच्या आणि कमीकरणकारांच्या बाहेर ठेवते.
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 देखील ऑफर करते कमी बॉयलरप्लेटसह.)
NgRx Angular मध्ये Redux च्या पूर्वानुमानयोग्य, केंद्रीभूत, एकदिशीय स्टेट मॅनेजमेंट आणते — मोठ्या अॅप्लिकेशन्ससाठी मूल्यवान जेथे अनेक घटक जटिल स्टेट सामायिक करतात, आणि जेथे कठोर ट्रेसेबिलिटी आणि डिबगिंग महत्त्वपूर्ण आहे.
पण हे लक्षणीय बॉयलरप्लेट वहन करते, म्हणून मुख्य निर्णय हा आहे कधी ते वापरायचे (मोठे/जटिल सामायिक स्टेट) बनाम सोपे दृष्टिकोन (सिग्नल्स किंवा BehaviorSubject सह सेवा) लहान अॅप्ससाठी.
action→reducer→store→selector प्रवाह आणि साइड इफेक्ट्ससाठी effects समजणे हे NgRx कोडबेसमध्ये काम करण्यासाठी मूलभूत आहे.