NgRx ఉపయోగించి స్థితి నిర్వహణ ఎలా పనిచేస్తుంది?

Question

Accepted Answer

**NgRx** అనేది Angular కోసం Redux-ఆనుకూల స్థితి-నిర్వహణ లైబ్రరీ. ఇది అప్లికేషన్ స్థితిని ఒకే నిరపేక్ష **store**లో కేంద్రీకృత చేస్తుంది, RxJS పై నిర్మితమైన కఠినమైన, సూచన, ఏక-దిశ డేటా ప్రవాహం. ## ప్రధాన భాగాలు మరియు ప్రవాహం ```text 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) ``` ## చర్యలు — ఏమి జరిగిందో వివరించండి ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — తరువాతి స్థితిని లెక్కించే స్వచ్ఛ ఫంక్షన్ ```ts 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 **స్వచ్ఛ** — ప్రస్తుత స్థితి మరియు చర్యను ఇచ్చినప్పుడు, అవి చాలా కొత్త స్థితి వస్తువును అందిస్తాయి (మార్పు లేకుండా), పూర్వం కూడా ఎప్పుడూ మార్చవు. ## ప్రభావాలు — పక్ష ప్రభావాలను నిర్వహించండి (HTTP, మొదలైనవి) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Effects చర్యల కోసం శ్రవణ చేస్తాయి, అసమకాలిక పనిని సম్పాదిస్తాయి (HTTP వంటి), మరియు ఫలిత చర్యలను పంపుతాయి — పక్ష ప్రభావాలను భాగాలు మరియు reducers నుండి దూరంగా ఉంచుతాయి. ## సెలెక్టర్‌లు + భాగ ఉపయోగం ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## NgRx ఎప్పుడు విలువైనది? ```text ✓ 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` కలిగిన సేవలు) చిన్న అనువర్తనాల కోసం. చర్య→reducer→store→selector ప్రవాహం మరియు పక్ష ప్రభావాల కోసం ప్రభావాలను అర్థం చేసుకోవడం NgRx codebase లో పనిచేయటానికి ప్రధానమైనది.