ریداکس در جاوااسکریپت خالص: مدیریت State بدون ری‌اکت

استفاده از Redux بدون React: مدیریت وضعیت در جاوا اسکریپت خالص

بسیاری از توسعه‌دهندگان جاوا اسکریپت، Redux را با React مرتبط می‌دانند. در حالی که این دو ابزار اغلب با هم استفاده می‌شوند، Redux یک کتابخانه مستقل و قدرتمند برای مدیریت وضعیت (state management) است که می‌توان از آن در هر پروژه‌ی جاوا اسکریپتی، از جمله پروژه‌های نوشته‌شده با جاوا اسکریپت خالص (Vanilla JavaScript) استفاده کرد. این مقاله به بررسی چالش‌ها، راه‌حل‌ها و درس‌های آموخته‌شده از به‌کارگیری Redux بدون React می‌پردازد.

چرا به مدیریت وضعیت نیاز داریم؟

در اپلیکیشن‌های وب پیچیده، وضعیت برنامه (state) می‌تواند در مکان‌های مختلفی پراکنده باشد: در متغیرهای سراسری، در خود DOM، یا در اشیاء مختلف. این پراکندگی، پیگیری تغییرات، دیباگ کردن و افزودن ویژگی‌های جدید را دشوار می‌کند. یک راهکار مدیریت وضعیت متمرکز مانند Redux، با ایجاد یک «منبع حقیقت واحد» (Single Source of Truth)، این پیچیدگی را کاهش داده و کد را قابل پیش‌بینی‌تر و نگهداری آن را آسان‌تر می‌کند.

مفاهیم اصلی Redux

قدرت Redux در سه اصل اساسی آن نهفته است که از معماری Flux الهام گرفته شده‌اند:

• یک منبع حقیقت واحد (Single Source of Truth): کل وضعیت اپلیکیشن شما در یک شیء واحد به نام «Store» ذخیره می‌شود.
• وضعیت فقط-خواندنی است (State is Read-Only): تنها راه برای تغییر وضعیت، ارسال یک «Action» است؛ یک شیء ساده که توصیف‌کننده اتفاقی است که افتاده.
• تغییرات با توابع خالص انجام می‌شود (Changes are Made with Pure Functions): برای مشخص کردن چگونگی تغییر وضعیت در پاسخ به اکشن‌ها، شما «Reducer» می‌نویسید. ردیوسرها توابع خالصی هستند که وضعیت قبلی و یک اکشن را دریافت کرده و وضعیت جدید را برمی‌گردانند.

این اصول به شما کمک می‌کنند تا جریان داده در اپلیکیشن خود را به سادگی درک کنید.

راه‌اندازی Redux در یک پروژه جاوا اسکریپت خالص

برای شروع، کافی است Redux را از طریق CDN یا npm به پروژه خود اضافه کنید. سپس، اولین قدم ایجاد یک ردیوسر و یک استور است. ردیوسر مشخص می‌کند که وضعیت برنامه چگونه به اکشن‌ها واکنش نشان می‌دهد.

به عنوان مثال، یک ردیوسر ساده برای یک شمارنده به شکل زیر است:

function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    case 'DECREMENT':
      return { value: state.value - 1 };
    default:
      return state;
  }
}

// ایجاد استور Redux با استفاده از ردیوسر
const store = Redux.createStore(counterReducer);

اتصال Redux به DOM

در پروژه‌های بدون React، پل ارتباطی بین Redux و رابط کاربری (UI) شما، متد store.subscribe() است. این متد یک تابع callback می‌پذیرد که هر بار پس از تغییر وضعیت، اجرا می‌شود. درون این تابع، شما می‌توانید آخرین وضعیت را با store.getState() دریافت کرده و DOM را به‌روزرسانی کنید.

// تابعی برای رندر کردن رابط کاربری بر اساس وضعیت فعلی
function render() {
  const currentState = store.getState();
  document.getElementById('counter-value').innerText = currentState.value;
}

// مشترک شدن در تغییرات استور
store.subscribe(render);

// اجرای اولیه برای نمایش مقدار اولیه
render();

ارسال اکشن‌ها برای تغییر وضعیت

برای ایجاد تغییر در وضعیت، باید اکشن‌ها را با استفاده از store.dispatch() ارسال کنید. اکشن‌ها اشیاء ساده جاوا اسکریپت هستند که حداقل یک کلید type دارند. برای مثال، می‌توانیم دکمه‌های رابط کاربری را به ارسال اکشن‌ها متصل کنیم:

document.getElementById('increment-btn').addEventListener('click', () => {
  store.dispatch({ type: 'INCREMENT' });
});

document.getElementById('decrement-btn').addEventListener('click', () => {
  store.dispatch({ type: 'DECREMENT' });
});

با هر بار کلیک، یک اکشن ارسال می‌شود، ردیوسر وضعیت جدید را محاسبه می‌کند، استور به‌روز می‌شود و در نهایت تابع ثبت‌شده در subscribe فراخوانی شده و DOM را با مقدار جدید به‌روز می‌کند.

مزایا و درس‌های آموخته‌شده

استفاده از Redux در جاوا اسکریپت خالص مزایای قابل توجهی دارد:

• قابلیت پیش‌بینی: جریان داده یک‌طرفه و صریح است که دیباگ کردن را بسیار ساده می‌کند.
• جداسازی منطق: منطق کسب‌وکار شما (در ردیوسرها) کاملاً از منطق نمایش (دستکاری DOM) جدا می‌شود.
• قابلیت تست: ردیوسرها توابع خالص هستند، به این معنی که تست واحد آن‌ها بسیار آسان است.

البته، برای پروژه‌های بسیار کوچک، Redux ممکن است کمی سنگین به نظر برسد. اما برای اپلیکیشن‌هایی که وضعیت‌های پیچیده و مشترک دارند، ساختاری که Redux ارائه می‌دهد بسیار ارزشمند است.

نتیجه‌گیری

Redux فقط یک ابزار برای اکوسیستم React نیست؛ بلکه یک الگوی قدرتمند برای مدیریت وضعیت در هر نوع اپلیکیشن جاوا اسکریپت است. با درک مفاهیم اصلی آن، می‌توانید از قدرت و قابلیت پیش‌بینی Redux برای ساخت اپلیکیشن‌های قوی‌تر و قابل نگهداری‌تر در جاوا اسکریپت خالص بهره‌مند شوید.