ngrx agnular in hindi

 NgRx in Angular पर हिंदी में विस्तार से जानकारी दी जा रही है। NgRx Angular के लिए एक powerful state management लाइब्रेरी है, जो Redux से प्रेरित है। यह खास तौर पर बड़े और जटिल Angular एप्लिकेशन्स में state management के लिए उपयोगी है।

NgRx की मुख्य विशेषताएँ हैं:

• Store: एप्लिकेशन के पूरे state को एक जगह पर रखना।
• Actions: State में बदलाव लाने वाले events को डिज़ाइन करना।
• Reducers: Actions के आधार पर state को बदलना।
• Selectors: State से specific डेटा प्राप्त करना।
• Effects: Asynchronous operations (जैसे API calls) को handle करना।

NgRx के मुख्य कॉम्पोनेंट्स

1. Store
   Store वह जगह है जहां एप्लिकेशन का state रखा जाता है। यह सभी components के लिए एक centralized state है। Angular एप्लिकेशन में store को configure करने के लिए NgRx का StoreModule इस्तेमाल होता है।

2. Actions
   Actions, events होते हैं जो state में बदलाव लाते हैं। प्रत्येक action एक plain object होता है जिसमें कम से कम एक type property होती है, जो कि action का नाम बताती है।

3. Reducers
   Reducers वह pure functions होते हैं जो एक action के response में state को update करते हैं। Reducers को किसी भी mutable state के बिना काम करना चाहिए, यानी वे पुराने state को बदलते नहीं हैं, बल्कि नए state को return करते हैं।

4. Selectors
   Selectors का उपयोग store से specific data को retrieve करने के लिए किया जाता है। यह डेटा को effectively query करने का तरीका प्रदान करता है, जिससे आपकी components में केवल वही डेटा आता है जो ज़रूरी हो।

5. Effects
   Effects का उपयोग side-effects (जैसे API calls) को handle करने के लिए किया जाता है। जब कोई action dispatch होता है, तो effects asynchronous operations को manage करते हैं और फिर एक नया action dispatch करते हैं।

NgRx को Angular में सेटअप करना

1. NgRx को इंस्टॉल करना
   सबसे पहले, आपको NgRx को अपने Angular प्रोजेक्ट में इंस्टॉल करना होगा:

   bash
   ng add @ngrx/store
   ng add @ngrx/effects
   

2. State और Reducer सेटअप करना
   State और Reducers को सेटअप करने के लिए, सबसे पहले एक state model बनाएं, जैसे एक simple user state:

   typescript
   // user.reducer.ts
   import { createReducer, on } from '@ngrx/store';
   import { setUser, logout } from './user.actions';
   
   export interface UserState {
     user: any;
     loggedIn: boolean;
   }
   
   export const initialState: UserState = {
     user: null,
     loggedIn: false
   };
   
   export const userReducer = createReducer(
     initialState,
     on(setUser, (state, { user }) => ({
       ...state,
       user,
       loggedIn: true
     })),
     on(logout, state => ({
       ...state,
       user: null,
       loggedIn: false
     }))
   );
   

3. Actions बनाना
   Actions, जो state को update करते हैं, को create करना होता है:

   typescript
   // user.actions.ts
   import { createAction, props } from '@ngrx/store';
   
   export const setUser = createAction(
     '[User] Set User',
     props<{ user: any }>()
   );
   
   export const logout = createAction('[User] Logout');
   

4. Selectors सेट करना
   Selectors के द्वारा हम state से specific डेटा निकाल सकते हैं:

   typescript
   // user.selectors.ts
   import { createFeatureSelector, createSelector } from '@ngrx/store';
   import { UserState } from './user.reducer';
   
   export const selectUserState = createFeatureSelector<UserState>('user');
   
   export const selectUser = createSelector(
     selectUserState,
     (state: UserState) => state.user
   );
   

5. Effects का सेटअप
   Effects का इस्तेमाल side-effects को handle करने के लिए किया जाता है, जैसे API कॉल्स:

   typescript
   // user.effects.ts
   import { Injectable } from '@angular/core';
   import { Actions, ofType } from '@ngrx/effects';
   import { of } from 'rxjs';
   import { map, mergeMap, catchError } from 'rxjs/operators';
   import { UserService } from './user.service';
   import { setUser } from './user.actions';
   
   @Injectable()
   export class UserEffects {
     loadUser$ = createEffect(() =>
       this.actions$.pipe(
         ofType('[User] Load User'),
         mergeMap(() => this.userService.getUser()
           .pipe(
             map(user => setUser({ user })),
             catchError(() => of({ type: '[User] Load User Failed' }))
           ))
       )
     );
   
     constructor(
       private actions$: Actions,
       private userService: UserService
     ) {}
   }
   

6. Store Module का रजिस्टर करना
   Store और Effects को AppModule में रजिस्टर करें:

   typescript
   // app.module.ts
   import { NgModule } from '@angular/core';
   import { StoreModule } from '@ngrx/store';
   import { EffectsModule } from '@ngrx/effects';
   import { userReducer } from './store/user.reducer';
   import { UserEffects } from './store/user.effects';
   
   @NgModule({
     imports: [
       StoreModule.forRoot({ user: userReducer }),
       EffectsModule.forRoot([UserEffects])
     ]
   })
   export class AppModule {}
   

NgRx के फायदे:

• Predictable State: NgRx में state predictable होता है क्योंकि state केवल actions के माध्यम से बदलता है।
• Time-travel Debugging: NgRx के साथ Redux DevTools का इस्तेमाल करके आप state की हर बदलाव को देख सकते हैं और समय के साथ state को ट्रैक कर सकते हैं।
• Side Effects Handling: NgRx Effects के जरिए API calls या अन्य side-effects को आसानी से manage किया जा सकता है।
• Scalability: NgRx बड़े और complex apps के लिए आदर्श है, क्योंकि इसमें state management एक structured way में होता है।

NgRx के नुकसान:

• Boilerplate Code: NgRx में बहुत सारा boilerplate code होता है, जैसे actions, reducers, effects, और selectors। यह छोटे प्रोजेक्ट्स के लिए थोड़ा ज़्यादा हो सकता है।
• Learning Curve: NgRx का इस्तेमाल करने में थोड़ा समय लग सकता है, खासकर जब आप Redux के concepts से नए हों।
• Overhead for Small Apps: छोटे और साधारण apps के लिए NgRx थोड़ा भारी हो सकता है। छोटे apps के लिए ngxs या Akita जैसी अन्य state management लाइब्रेरीज़ का इस्तेमाल किया जा सकता है।

---

निष्कर्ष

NgRx एक शक्तिशाली और structured state management लाइब्रेरी है जो Angular एप्लिकेशन्स के लिए उपयुक्त है, खासकर बड़े और जटिल एप्लिकेशन्स में। इसके साथ आप state को manage कर सकते हैं, side-effects को handle कर सकते हैं और एप्लिकेशन को scalable बना सकते हैं। हालांकि, इसका इस्तेमाल करने से पहले आपको इसकी थोड़ी-बहुत समझ होनी चाहिए और इसे सही context में उपयोग करना चाहिए।

NgRx को छोटे ऐप्स में इस्तेमाल करना थोड़े अधिक boilerplate की वजह से कठिन हो सकता है, लेकिन बड़े एंटरप्राइज़-लेवल एप्लिकेशन्स में इसका इस्तेमाल बहुत लाभकारी हो सकता है।