NgRx হল Angular অ্যাপ্লিকেশনগুলির জন্য একটি জনপ্রিয় স্টেট ম্যানেজমেন্ট লাইব্রেরি। এটি Redux এর একটি Angular উপস্থাপনা, যা অ্যাপ্লিকেশন স্টেট ম্যানেজমেন্টকে আরও সহজ, কার্যকর এবং স্কেলেবল করে তোলে। NgRx মূলত Flux আর্কিটেকচার অনুসরণ করে, যেখানে অ্যাপ্লিকেশনের স্টেট একটি একক কেন্দ্রীয় অবস্থান থেকে পরিচালিত হয়, এবং সেই স্টেটের উপর যেকোনো পরিবর্তন ঘটানোর জন্য নির্দিষ্ট "actions" এবং "reducers" ব্যবহার করা হয়।
NgRx চারটি প্রধান ধারণার উপর ভিত্তি করে কাজ করে:
এটি Angular প্রজেক্টে ইন্সটল করতে প্রথমে নিচের কমান্ডটি ব্যবহার করুন:
ng add @ngrx/store
এটি আপনার প্রজেক্টে NgRx এর স্টোর লাইব্রেরি ইন্সটল করবে এবং আপনার মডিউলে প্রয়োজনীয় সেটআপ করে দেবে।
NgRx Store অ্যাপ্লিকেশনের কেন্দ্রীয় স্টেট ধারণ করে। এটি একটি Immutable অবস্থা (state) যার মধ্যে সমস্ত অ্যাপ্লিকেশন ডেটা থাকবে। অ্যাপ্লিকেশনে যেকোনো পরিবর্তন actions এর মাধ্যমে reducer এ পাঠানো হয় এবং reducer সেই পরিবর্তন করে store আপডেট করে।
স্টোর সেটআপ:
// app.state.ts
export interface AppState {
counter: number;
}
// 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 হল এমন যেকোনো ইভেন্ট যা অ্যাপ্লিকেশন স্টেট পরিবর্তন করার জন্য ট্রিগার হয়। এটি সাধারণত কমান্ডের মতো কাজ করে এবং নির্দিষ্ট 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 তৈরি করুন:
// 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 হল ফাংশন যা স্টোর থেকে ডেটা সিলেক্ট করে, এবং কম্পোনেন্টে সেই ডেটা ব্যবহার করা যায়। এটা 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
);
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) পাঠায়।
একবার আপনি অ্যাকশন, 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 একটি শক্তিশালী স্টেট ম্যানেজমেন্ট লাইব্রেরি যা Angular অ্যাপ্লিকেশনগুলির স্টেট ম্যানেজমেন্টকে আরও কার্যকর ও স্কেলেবল করে তোলে। এটি Flux আর্কিটেকচারের উপর ভিত্তি করে তৈরি, যেখানে স্টোর, অ্যাকশন, reducers, এবং effects এর মাধ্যমে স্টেট পরিবর্তন এবং অ্যাসিঙ্ক্রোনাস কার্যকলাপ পরিচালনা করা হয়। NgRx ব্যবহার করার মাধ্যমে অ্যাপ্লিকেশনগুলোতে স্টেট ম্যানেজমেন্টের জটিলতা অনেকটাই কমানো যায়, এবং এটি ডিবাগিংয়ের জন্যও খুবই সহায়ক।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
