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 शुद्ध छन् — वर्तमान स्टेट र एक action दिएर, तिनीहरू एक बिल्कुल नयाँ स्टेट अबजेक्ट फर्काउछन् (अपरिवर्तनीय रूपमा), कहिले पनि पुरानोलाई परिवर्तन गरिन्न।
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 को डिस्प्याच गर्छन् — साइड इफेक्ट कम्पोनेन्ट र 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 को पूर्वानुमानयोग्य, केन्द्रीभूत, एकदिशात्मक स्टेट म्यानेजमेन्ट Angular मा ल्याउछ — ठूला अनुप्रयोगको लागि मूल्यवान जहाँ धेरै कम्पोनेन्ट जटिल स्टेट साझा गर्छन्, र जहाँ कठोर ट्रेसेबिलिटी र डिबगिङ महत्त्वपूर्ण छ।
तर यो महत्त्वपूर्ण boilerplate लिएर आउछ, त्यसैले मुख्य निर्णय कहिले यो प्रयोग गर्ने हो (ठूलो/जटिल साझा स्टेट) बनाम सरल दृष्टिकोण (signals वा BehaviorSubject को साथ services) साना अनुप्रयोगको लागि।
action→reducer→store→selector प्रवाह र साइड इफेक्टको लागि effects को बोध NgRx codebases मा काम गर्नको लागि मूल छ।