MobX-এর প্রতিক্রিয়াশীল স্টেট মডেল Redux থেকে কীভাবে আলাদা?

Question

Accepted Answer

**MobX** Redux-এর থেকে একটি মৌলিকভাবে আলাদা পদ্ধতি গ্রহণ করে: স্পষ্ট actions এবং অপরিবর্তনীয় আপডেটের পরিবর্তে, এটি **স্বচ্ছ প্রতিক্রিয়াশীলতা** ব্যবহার করে — আপনি সরাসরি পর্যবেক্ষণযোগ্য স্টেটকে পরিবর্তন করেন, এবং MobX স্বয়ংক্রিয়ভাবে নির্ভরতা ট্র্যাক করে এবং এটির উপর নির্ভরশীল যেকোনো কিছু আপডেট করে (Vue-এর প্রতিক্রিয়াশীলতা বা Signals-এর মতো)। ## MobX — পরিবর্তনযোগ্য পর্যবেক্ষণযোগ্য, স্বয়ংক্রিয় ট্র্যাকিং ```js import { makeAutoObservable } from "mobx"; import { observer } from "mobx-react-lite"; class CounterStore { count = 0; constructor() { makeAutoObservable(this); } // make fields observable increment() { this.count++; } // ✅ DIRECT mutation — no actions, no immutability get double() { return this.count * 2; } // computed — auto-derived & cached } const store = new CounterStore(); // observer components auto-re-render when the observables they read change const Counter = observer(() => ( )); ``` আপনি সরাসরি স্টেট পরিবর্তন করেন (`this.count++`), এবং MobX স্বয়ংক্রিয়ভাবে শুধুমাত্র `observer` কম্পোনেন্টগুলি পুনরায় রেন্ডার করে যা `count` পড়ে। কোনো reducers, actions, dispatch, বা ম্যানুয়াল immutability নেই। ## দর্শনে মূল পার্থক্য ```text Redux MobX Updates immutable (return new state) mutable (change in place) Mechanism explicit actions + reducers transparent reactive tracking Data flow strict one-way, predictable automatic dependency reactions Boilerplate more less Derived values selectors (manual) computed (automatic, cached) Mental model functional / explicit OOP / reactive / implicit ``` ## MobX নির্ভরতা কীভাবে ট্র্যাক করে ```text MobX wraps observables in proxies. When an observer component renders, MobX records which observables it READ. When any of those change, MobX re-runs exactly that component — fine-grained, automatic, no selectors needed. ``` এটি Vue-এর প্রতিক্রিয়াশীলতা এবং Signals-এর পিছনের track-on-read/trigger-on-write ধারণার মতোই। ## ট্রেড-অফ ```text MobX pros: less boilerplate, automatic reactivity, easy derived values, OOP-friendly MobX cons: "magic" can be less explicit/traceable than Redux's logged actions; mutation-based flow is harder to time-travel debug than pure reducers ``` ## এটি কেন গুরুত্বপূর্ণ MobX স্টেট ম্যানেজমেন্টের **প্রতিক্রিয়াশীল/পরিবর্তনযোগ্য** স্কুলকে প্রতিনিধিত্ব করে — Redux-এর **স্পষ্ট/অপরিবর্তনীয়** পদ্ধতির বিপরীত। পার্থক্যটি বোঝা একটি মূল ডিজাইন অক্ষকে স্পষ্ট করে: স্পষ্ট-এবং-পূর্বাভাসযোগ্য (Redux: প্রতিটি action ট্র্যাস করুন, কিন্তু আরও বেশি boilerplate) বনাম স্বয়ংক্রিয়-এবং-সংক্ষিপ্ত (MobX: স্বাধীনভাবে পরিবর্তন করুন, কম কোড, কিন্তু কম স্পষ্ট)। একই প্রতিক্রিয়াশীল নীতি Vue এবং Signals-এর অন্তর্নিহিত, তাই MobX বোঝা স্টেট টুলসের একটি সম্পূর্ণ পরিবারকে আলোকিত করে এবং আপনাকে একটি নির্দিষ্ট প্রকল্পের জন্য পূর্বাভাসযোগ্যতা এবং ergonomics-এর মধ্যে বেছে নিতে সাহায্য করে।