NgRx হল Angular এর জন্য Redux-অনুপ্রাণিত স্টেট-ম্যানেজমেন্ট লাইব্রেরি। এটি অ্যাপ্লিকেশন স্টেটকে একটি একক অপরিবর্তনীয় store এ কেন্দ্রীভূত করে, RxJS এর উপর নির্মিত একটি কঠোর, পূর্বাভাসযোগ্য, একমুখী ডেটা প্রবাহ সহ।
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)
import { createAction, props } from "@ngrx/store";
export const loadUsers = createAction("[Users] Load");
export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>());
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 })),
);
রিডিউসাররা খাঁটি — বর্তমান স্টেট এবং একটি অ্যাকশন দেওয়া হলে, তারা একটি সম্পূর্ণ নতুন স্টেট অবজেক্ট ফেরত দেয় (অপরিবর্তনীয়ভাবে), কখনো পুরাতনটি পরিবর্তন করে না।
loadUsers$ = createEffect(() =>
this.actions$.pipe(
ofType(loadUsers),
switchMap(() =>
this.api.getUsers().pipe(
map(users => loadUsersSuccess({ users })) // dispatch success with the data
)
)
)
);
ইফেক্টগুলি অ্যাকশনের জন্য শোনে, অ্যাসিঙ্ক কাজ সম্পাদন করে (HTTP এর মতো), এবং ফলাফল অ্যাকশন ডিসপ্যাচ করে — উপাদান এবং রিডিউসারদের বাইরে পার্শ্বপ্রতিক্রিয়া রাখে।
export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized
// component
users$ = this.store.select(selectUsers);
load() { this.store.dispatch(loadUsers()); }
<li *ngFor="let u of users$ | async">{{ u.name }}</li>
✓ 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 ও অফার করে।)
NgRx Redux এর পূর্বাভাসযোগ্য, কেন্দ্রীভূত, একমুখী স্টেট ম্যানেজমেন্ট Angular এ নিয়ে আসে — বড় অ্যাপগুলির জন্য মূল্যবান যেখানে অনেক উপাদান জটিল স্টেট শেয়ার করে, এবং যেখানে কঠোর ট্রেসেবিলিটি এবং ডিবাগিং গুরুত্বপূর্ণ।
কিন্তু এটি উল্লেখযোগ্য বয়লারপ্লেট নিয়ে আসে, তাই মূল বিচার হল কখন এটি ব্যবহার করতে হবে (বড়/জটিল শেয়ারড স্টেট) বনাম সহজ পদ্ধতি (সিগন্যাল বা BehaviorSubject সহ সেবা) ছোট অ্যাপগুলির জন্য।
অ্যাকশন→রিডিউসার→স্টোর→সিলেক্টর প্রবাহ এবং পার্শ্বপ্রতিক্রিয়ার জন্য ইফেক্ট বোঝা NgRx কোডবেসে কাজ করার মূল বিষয়।