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) ``` ## 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 **தூய** — தற்போதைய நிலை மற்றும் ஒரு action-ஐ கொடுத்து, அவை முற்றிலும் புதிய நிலை பொருளை திருப்பி வைக்கின்றன (மாறாத வகையில்), பழையதை ποτε மாற்றுவதில்லை. ## Effects — பக்க விளைவுகளைக் கையாள்வது (HTTP, முதலியன) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Effects actions-ஐ கேட்கின்றன, ஆசிங്ক்ரோனাস பணிகளைச் செய்கின்றன (HTTP போன்ற), மற்றும் ফলாফல் actions-ஐ அனுப்புகின்றன — பக்க விளைவுகளை பொருள்கள் மற்றும் reducers-ஐ விட்டு வெளியே வைக்கிறது. ## Selectors + component பயன்பாடு ```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 மேலும் ஒரு இலகுவான **SignalStore** மற்றும் **ComponentStore**-ஐ குறைந்த boilerplate-க்கு வழங்குகிறது.) ## ஏன் இது முக்கியம் NgRx Redux-ன் முன்னறிவிப்பான, மையப்படுத்தப்பட்ட, ஒற்றை-திசை நிலை-ব్యवस్థាपन-ஐ Angular-க்கு கொண்டு வருகிறது — பெரிய பயன்பாடுகளுக்கு மதிப்புள்ளதாக இருக்கிறது இங்கே பல பொருள்கள் சிக்கலான நிலையைப் பகிர்ந்து கொள்கின்றன, மற்றும் கடுமையான கண்காணிப்பு மற்றும் debugging பொருத்தமாக இருக்கும் இடங்களில். ஆனால் இது குறிப்பிடத்தக்க boilerplate-ஐ கொண்டு வருகிறது, எனவே முக்கிய판断्धा *எப்போது* இதைப் பயன்படுத்த வேண்டும் (பெரிய/சிக்கலான பகிரப்பட்ட நிலை) எளிய পद்ধதிகளுக்கு (signals அல்லது `BehaviorSubject` உடன் சேவைகள்) சிறிய பயன்பாடுகளுக்கு என்ன. Action→reducer→store→selector ஓட்டத்தை மற்றும் விளைவுகளை பக்க விளைவுகளுக்கு புரிந்து கொள்வது NgRx codebase-களில் பணி செய்ய மையமாக உள్ளது.