NgRx হল Angular অ্যাপ্লিকেশনগুলির জন্য একটি জনপ্রিয় স্টেট ম্যানেজমেন্ট লাইব্রেরি। এটি Redux এর একটি Angular উপস্থাপনা, যা অ্যাপ্লিকেশন স্টেট ম্যানেজমেন্টকে আরও সহজ, কার্যকর এবং স্কেলেবল করে তোলে। NgRx মূলত Flux আর্কিটেকচার অনুসরণ করে, যেখানে অ্যাপ্লিকেশনের স্টেট একটি একক কেন্দ্রীয় অবস্থান থেকে পরিচালিত হয়, এবং সেই স্টেটের উপর যেকোনো পরিবর্তন ঘটানোর জন্য নির্দিষ্ট "actions" এবং "reducers" ব্যবহার করা হয়।

NgRx এর মূল ধারণা

NgRx চারটি প্রধান ধারণার উপর ভিত্তি করে কাজ করে:

• Store: অ্যাপ্লিকেশন স্টেটের একটি একক স্থান যেখানে সমস্ত ডেটা রাখা হয়।
• Actions: স্টেট পরিবর্তন করার জন্য অ্যাপ্লিকেশন থেকে পাঠানো সিগন্যাল বা কমান্ড।
• Reducers: Actions এর মাধ্যমে স্টেটে পরিবর্তন করার জন্য নির্দিষ্ট ফাংশন।
• Effects: স্টেট পরিবর্তন করতে API কল বা অন্যান্য অ্যাসিঙ্ক্রোনাস কার্যক্রম পরিচালনা করার জন্য ব্যবহৃত।

NgRx ইন্সটলেশন

এটি Angular প্রজেক্টে ইন্সটল করতে প্রথমে নিচের কমান্ডটি ব্যবহার করুন:

ng add @ngrx/store

এটি আপনার প্রজেক্টে NgRx এর স্টোর লাইব্রেরি ইন্সটল করবে এবং আপনার মডিউলে প্রয়োজনীয় সেটআপ করে দেবে।

NgRx স্টেট ম্যানেজমেন্টের মূল উপাদানসমূহ

১. Store

NgRx Store অ্যাপ্লিকেশনের কেন্দ্রীয় স্টেট ধারণ করে। এটি একটি Immutable অবস্থা (state) যার মধ্যে সমস্ত অ্যাপ্লিকেশন ডেটা থাকবে। অ্যাপ্লিকেশনে যেকোনো পরিবর্তন actions এর মাধ্যমে reducer এ পাঠানো হয় এবং reducer সেই পরিবর্তন করে store আপডেট করে।

স্টোর সেটআপ:

1. স্টেট ডিফাইন করুন:

// app.state.ts
export interface AppState {
  counter: number;
}

2. স্টোর তৈরি করুন:

// app.reducer.ts
import { Action, createReducer, on } from '@ngrx/store';
import { increment, decrement } from './app.actions';

export const initialState: AppState = {
  counter: 0,
};

const _counterReducer = createReducer(
  initialState,
  on(increment, (state) => ({ ...state, counter: state.counter + 1 })),
  on(decrement, (state) => ({ ...state, counter: state.counter - 1 }))
);

export function counterReducer(state: AppState | undefined, action: Action) {
  return _counterReducer(state, action);
}

২. Actions

Actions হল এমন যেকোনো ইভেন্ট যা অ্যাপ্লিকেশন স্টেট পরিবর্তন করার জন্য ট্রিগার হয়। এটি সাধারণত কমান্ডের মতো কাজ করে এবং নির্দিষ্ট reducer ফাংশন দ্বারা প্রক্রিয়া হয়।

অ্যাকশন তৈরি করুন:

// app.actions.ts
import { createAction } from '@ngrx/store';

export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');

এখানে, increment এবং decrement হল দুটি অ্যাকশন যা স্টেটের counter ভ্যালু পরিবর্তন করবে।

৩. Reducers

Reducers হল ফাংশন যা অ্যাকশনের ভিত্তিতে স্টেট আপডেট করে। এটি নতুন স্টেটের কপি তৈরি করে এবং অ্যাকশন অনুযায়ী সেই স্টেট পরিবর্তন করে।

Reducers তৈরি করুন:

// app.reducer.ts (আগের উদাহরণ)
export const counterReducer = createReducer(
  initialState,
  on(increment, (state) => ({ ...state, counter: state.counter + 1 })),
  on(decrement, (state) => ({ ...state, counter: state.counter - 1 }))
);

৪. Selectors

Selectors হল ফাংশন যা স্টোর থেকে ডেটা সিলেক্ট করে, এবং কম্পোনেন্টে সেই ডেটা ব্যবহার করা যায়। এটা Store থেকে ডেটা পাওয়ার একটি সহজ উপায়।

Selectors তৈরি করুন:

// app.selectors.ts
import { createSelector } from '@ngrx/store';
import { AppState } from './app.state';

export const selectCounter = (state: AppState) => state.counter;

export const selectCounterValue = createSelector(
  selectCounter,
  (counter) => counter
);

৫. Effects

NgRx Effects অ্যাসিঙ্ক্রোনাস কার্যকলাপ (যেমন HTTP কল) পরিচালনা করতে ব্যবহৃত হয়। Effects ইন্টারঅ্যাক্ট করে অ্যাকশন ট্রিগার করার মাধ্যমে স্টোরের বাইরে (API কল, টাস্ক, বা অন্যান্য কার্যক্রম) কার্যক্রম পরিচালনা করে।

Effects তৈরি করুন:

// app.effects.ts
import { Injectable } from '@angular/core';
import { Actions, ofType } from '@ngrx/effects';
import { Observable, of } from 'rxjs';
import { map, catchError, switchMap } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import { increment, decrement } from './app.actions';

@Injectable()
export class AppEffects {
  constructor(private actions$: Actions, private store: Store) {}

  loadData$ = createEffect(() =>
    this.actions$.pipe(
      ofType('[App Component] Load Data'),
      switchMap(() => {
        // API কল বা অন্যান্য কার্যক্রম
        return of(increment()); // ডেটা লোডের পর increment action ট্রিগার করুন
      })
    )
  );
}

এখানে, loadData$ অ্যাসিঙ্ক্রোনাস কার্যকলাপটি সম্পাদন করে এবং পরবর্তীতে একটি অ্যাকশন (যেমন increment) পাঠায়।

NgRx Store Module ব্যবহার করা

একবার আপনি অ্যাকশন, reducer, এবং effects তৈরি করলে, আপনাকে Angular মডিউলে NgRx Store এবং Effects মডিউলগুলো অন্তর্ভুক্ত করতে হবে।

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { AppComponent } from './app.component';
import { counterReducer } from './app.reducer';
import { AppEffects } from './app.effects';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot({ counter: counterReducer }),
    EffectsModule.forRoot([AppEffects]),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

এখানে StoreModule.forRoot এর মাধ্যমে স্টোর সেটআপ করা হচ্ছে এবং EffectsModule.forRoot এর মাধ্যমে অ্যাসিঙ্ক্রোনাস কার্যকলাপ পরিচালনা করার জন্য AppEffects মডিউল যোগ করা হচ্ছে।

NgRx ব্যবহার করে State Management এর সুবিধা

• একক স্টেট ম্যানেজমেন্ট: অ্যাপ্লিকেশনের সমস্ত স্টেট একটি কেন্দ্রীয় স্টোরে রাখা হয়, যা অ্যাপ্লিকেশনকে আরও স্কেলেবল এবং সুসংগঠিত করে।
• ডিবাগিং সহজ: NgRx DevTools ব্যবহার করে স্টেট ম্যানেজমেন্ট সহজে ডিবাগ করা যায়।
• অ্যাসিঙ্ক্রোনাস কার্যকলাপ: Effects এর মাধ্যমে API কল এবং অন্যান্য অ্যাসিঙ্ক্রোনাস কার্যকলাপ কার্যকরভাবে পরিচালিত হয়।

সারাংশ

NgRx একটি শক্তিশালী স্টেট ম্যানেজমেন্ট লাইব্রেরি যা Angular অ্যাপ্লিকেশনগুলির স্টেট ম্যানেজমেন্টকে আরও কার্যকর ও স্কেলেবল করে তোলে। এটি Flux আর্কিটেকচারের উপর ভিত্তি করে তৈরি, যেখানে স্টোর, অ্যাকশন, reducers, এবং effects এর মাধ্যমে স্টেট পরিবর্তন এবং অ্যাসিঙ্ক্রোনাস কার্যকলাপ পরিচালনা করা হয়। NgRx ব্যবহার করার মাধ্যমে অ্যাপ্লিকেশনগুলোতে স্টেট ম্যানেজমেন্টের জটিলতা অনেকটাই কমানো যায়, এবং এটি ডিবাগিংয়ের জন্যও খুবই সহায়ক।