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 ) ) ) ); ``` असરો ક્રિયાઓ માટે સાંભળે છે, async કાર્ય કરે છે (જેવું HTTP) અને પરિણામ ક્રિયાઓ વિતરિત કરે છે — આડઅસરોને કમ્પોનેન્ટ્સ અને reducers ની બહાર રાખે છે. ## Selectors + કમ્પોનેન્ટ ઉપયોગ ```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 માં લાવે છે — મોટી apps માટે મૂલ્યવાન જ્યાં ઘણા કમ્પોનેન્ટ્સ જટિલ સ્થિતિ શેર કરે છે, અને જ્યાં કઠોર ટ્રેસેબિલિટી અને ડીબગિંગ મહત્ત્વપૂર્ણ છે. પરંતુ તે નોંધપાત્ર boilerplate સાથે આવે છે, તેથી મુખ્ય નિર્ણય *ક્યારે* તેનો ઉપયોગ કરવો (મોટો/જટિલ શેર કરેલ સ્થિતિ) વર્સેસ સરળ અભિગમો (signals અથવા `BehaviorSubject` સાથે સેવાઓ) નાની apps માટે. action→reducer→store→selector પ્રવાહ અને આડअसरો માટે effects સમજવું NgRx codebases માં કામ કરવા માટે મૂળ છે.