NgRx Angular के लिए एक Redux-प्रेरित राज्य-प्रबंधन लाइब्रेरी है। यह एप्लिकेशन राज्य को एक एकल अपरिवर्तनीय 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
)
)
)
);
प्रभाव क्रियाओं के लिए सुनते हैं, async कार्य करते हैं (जैसे HTTP) और परिणाम क्रियाएं भेजते हैं — साइड इफेक्ट्स को घटकों और 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 के साथ आता है, इसलिए मुख्य निर्णय कब इसे उपयोग करना है (बड़ा/जटिल साझा राज्य) बनाम सरल दृष्टिकोण (signals के साथ सेवाएं या BehaviorSubject) छोटे ऐप्स के लिए।
action→reducer→store→selector प्रवाह और साइड इफेक्ट्स के लिए प्रभावों को समझना NgRx codebases में काम करने के लिए मुख्य है।