NgRx ব্যবহার করে State Management

Angular অ্যাপ্লিকেশনগুলিতে State Management হল এমন একটি পদ্ধতি যা অ্যাপ্লিকেশনের মধ্যে ডেটা এবং ইউজার ইন্টারঅ্যাকশন পরিচালনা করে। NgRx হল একটি Reactive State Management লাইব্রেরি যা Angular অ্যাপ্লিকেশনের জন্য তৈরি করা হয়েছে এবং এটি Redux এর উপর ভিত্তি করে। NgRx ব্যবহার করে অ্যাপ্লিকেশনের স্টেট সেন্ট্রালাইজড এবং রিএকটিভভাবে ম্যানেজ করা যায়।

NgRx এর মৌলিক কনসেপ্ট

NgRx এ store, actions, reducers, এবং effects এর মাধ্যমে স্টেট ম্যানেজমেন্ট পরিচালনা করা হয়। এখানে মূল উপাদানগুলি নিম্নরূপ:

• Store: অ্যাপ্লিকেশনের সেন্ট্রালাইজড স্টেট।
• Actions: স্টেট পরিবর্তনের জন্য বার্তা।
• Reducers: স্টেট পরিবর্তন করার লজিক।
• Effects: অ্যসিনক্রোনাস অপারেশন (যেমন HTTP রিকোয়েস্ট) পরিচালনা করার জন্য ব্যবহৃত হয়।

১. NgRx ইনস্টলেশন

প্রথমে আপনাকে NgRx ইনস্টল করতে হবে:

ng add @ngrx/store

এটি আপনার অ্যাপ্লিকেশনে NgRx এবং তার dependencies ইনস্টল করবে।

২. Store সেটআপ

Store হলো অ্যাপ্লিকেশনের সেন্ট্রাল স্টেট যেখানে অ্যাপের সমস্ত ডেটা সঞ্চিত থাকে। প্রথমে StoreModule ইম্পোর্ট করতে হবে আপনার মূল মডিউলে।

Store Setup Example

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

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

এখানে, আমরা counter নামক স্টেটকে counterReducer দিয়ে ম্যানেজ করছি।

৩. Actions

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

Actions Example

import { createAction } from '@ngrx/store';

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

এখানে, দুটি অ্যাকশন তৈরি করা হয়েছে: increment এবং decrement।

৪. Reducers

Reducers হলো ফাংশন যা অ্যাকশনের উপর ভিত্তি করে স্টেট পরিবর্তন করে। Reducer স্টেটের বর্তমান মান এবং অ্যাকশন ইনপুট হিসেবে নিয়ে নতুন স্টেট রিটার্ন করে।

Reducer Example

import { createReducer, on } from '@ngrx/store';
import { increment, decrement } from './counter.actions';

export const initialState = 0;

export const counterReducer = createReducer(
  initialState,
  on(increment, state => state + 1),
  on(decrement, state => state - 1)
);

এখানে, counterReducer ফাংশনটি increment এবং decrement অ্যাকশনের জন্য স্টেট পরিবর্তন করবে। on ফাংশনটি অ্যাকশন এবং তার সাথে সম্পর্কিত স্টেট পরিবর্তন লজিক সংজ্ঞায়িত করে।

৫. Store থেকে ডেটা নির্বাচন (Selectors)

Selectors হলো ফাংশন যা store থেকে নির্দিষ্ট ডেটা নির্বাচন করতে সাহায্য করে। এটি অ্যাপ্লিকেশনের অন্যান্য অংশে ব্যবহার করার জন্য স্টেটকে পাস করে।

Selector Example

import { createFeatureSelector, createSelector } from '@ngrx/store';

export const selectCounter = createFeatureSelector<number>('counter');

export const selectCounterValue = createSelector(
  selectCounter,
  (state: number) => state
);

এখানে, selectCounter হল একটি ফিচার সিলেক্টর যা counter স্টেট নির্বাচন করে এবং selectCounterValue হল একটি সিলেক্টর যা সেই মানটি রিটার্ন করে।

৬. Components এ Store ব্যবহার করা

স্টোরে রাখা ডেটা কম্পোনেন্টে ব্যবহার করতে Store ইঞ্জেক্ট করতে হবে এবং select ফাংশন দিয়ে ডেটা গ্রহণ করতে হবে। অ্যাকশনের জন্য dispatch ব্যবহার করা হয়।

Component Example

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { increment, decrement } from './store/counter.actions';
import { selectCounterValue } from './store/counter.selectors';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <button (click)="increment()">Increment</button>
      <button (click)="decrement()">Decrement</button>
      <h1>{{ counter$ | async }}</h1>
    </div>
  `
})
export class AppComponent {
  counter$ = this.store.select(selectCounterValue);

  constructor(private store: Store) {}

  increment() {
    this.store.dispatch(increment());
  }

  decrement() {
    this.store.dispatch(decrement());
  }
}

এখানে, counter$ হলো observable যা selectCounterValue সিলেক্টরের মাধ্যমে store থেকে ডেটা নেয় এবং UI তে দেখানো হয়। increment() এবং decrement() মেথডগুলি স্টেটে পরিবর্তন আনার জন্য dispatch ব্যবহার করে।

৭. Effects (অ্যাসিনক্রোনাস অপারেশন)

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

Effect Example

import { Injectable } from '@angular/core';
import { Actions, ofType } from '@ngrx/effects';
import { Observable } from 'rxjs';
import { map, mergeMap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { loadData, loadDataSuccess } from './data.actions';

@Injectable()
export class DataEffects {

  loadData$ = createEffect(() => this.actions$.pipe(
    ofType(loadData),
    mergeMap(() => this.http.get('https://api.example.com/data')
      .pipe(
        map(data => loadDataSuccess({ data }))
      ))
  ));

  constructor(
    private actions$: Actions,
    private http: HttpClient
  ) {}
}

এখানে, DataEffects একটি অ্যাসিনক্রোনাস অপারেশন পরিচালনা করছে যা loadData অ্যাকশন ট্রিগার হলে HTTP রিকোয়েস্ট করে এবং সফল হলে loadDataSuccess অ্যাকশন ডিসপ্যাচ করে।

সারাংশ

• Store: স্টেট সেন্ট্রালাইজড ম্যানেজমেন্টে ব্যবহৃত হয়।
• Actions: স্টেট পরিবর্তনের জন্য অ্যাকশন বার্তা।
• Reducers: স্টেট পরিবর্তন করার লজিক।
• Selectors: স্টেট থেকে ডেটা নির্বাচন করে।
• Effects: অ্যাসিনক্রোনাস অপারেশন পরিচালনা করে, যেমন API কল।

NgRx ব্যবহার করে, আপনি অ্যাঙ্গুলার অ্যাপ্লিকেশনে একটি ক্লিন, মেনটেইনেবল এবং স্কেলেবল স্টেট ম্যানেজমেন্ট সিস্টেম তৈরি করতে পারেন, যা রিএকটিভ প্যাটার্ন ব্যবহার করে সিঙ্ক্রোনাস এবং অ্যাসিনক্রোনাস ডেটা ফ্লো ম্যানেজ করে।