لطفا صبر کنید ...

آشنایی با اصول اولیه استفاده از Redux

الهام غایب

توسط الهام غایب

دیدگاه ها: 0
بازدید ها : 139
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

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


برای اینکه مطمئن شویم شما با وضعیت اپلیکیشن آشنا هستید اجازه دهید از شما سوالی بپرسم. به اپلیکیشن زیر نگاه کنید، آیا tab انتخاب شده بخشی از وضعیت است؟ آیا داده‌هایی که در نمودار قرار گرفته‌اند بخشی از وضعیت اپلیکیشن هستند؟ آیا داده‌های به دست آمده از API و tab انتخاب شده بخشی از وضعیت اپلیکیشن هستند؟

Redux

مطالعه بیشتر:

فرض کنید، کاربری که با فناوری آشنایی ندارد از اپلیکیشن قبلی استفاده کرده و این اکشن‌ها را انجام می‌دهد. اول، کاربر اپلیکیشن را برای اولین بار اجرا می‌کند. اپلکیشن در ابتدا یک تب با گزینه روز انتخاب شده و نموداری با داده‌های مربوط به آن روز را نشان می‌دهد. سپس، اپلیکیشن داده‌های مربوط به ماه جاری را از یک API واکشی کرده و نمودار جدیدی را نمایش می‌دهد. در این نقطه، کاربر اپلیکیشن دیگری را باز می‌کند. پس از چند دقیقه، کاربر به اپلیکیشن قبلی برمی‌گردد.

فرض کنید به این کاربر ناآشنا به تکنولوژی گفته‌اید که وفتی از اپلیکیشن استفاده کرده و به اپلیکیشن دیگری می‌رود و سپس به اپلیکیشن قبلی برمی‌گردد، اپلیکیشن را در همان وضعیت خواهد یافت. فکر می‌کنید کاربر انتظار دارد چه چیزی ببیند؟ کاربر انتظار دارد همان تب و نمودار را ببیند. بنابراین، داده‌های UI و داده‌های API هر دو بخشی از وضعیت هستند.

برخی از برنامه نویسان ممکن است به اشتباه فکر کنند که فقط داده‌هایی که از API به دست می‌آید بخشی از وضعیت هستند. در واقع، خیلی جای تعجبی ندارد وقتی در نظر بگیریم چندین سال برنامه نویسان فرانت اند، وضعیت را به UI مرتبط دانسته و برای مثال از خصوصیات داده و حتی کلاس‌های CSS استفاده می‌کرده‌اند.

تشبیه Redux به یک جعبه

می‌توانید Redux را به عنوان یک جعبه تصور کنید:

- جعبه وضعیت را در یک جای ساده سازماندهی می‌کند

- شما می‌توانید از جعبه بپرسید وضعیت کنونی چیست

- شما می‌توانید تغییرات وضعیت جعبه را توصیف کنید

- جعبه می‌تواند تغییرات را به مشترکان اطلاع دهد.

Redux

۳ اصل مهم در استفاده از Redux

- وضعیت اپلیکیشن در یک شئ جاوا اسکریپت ذخیره می‌شود

- وضعیت در حالت read-only قرار دارد اما شما می‌توانید با توصیف یک تغییر با شئ جاوا اسکریپتی دیگری، آن را تغییر دهیم

- تغییرات با توابع خالص به نام reducer اجرا می‌شود. یک کاهنده وضعیت فعلی و اکشن جاری را پذیرفته و یک وضعیت جدید یا همان وضعیت را باز می‌گرداند.

مخزن

مخزن (Store) هسته کتابخانه است و سه اصل بالا را به هم مرتبط می‌کند. Store حاوی سه متد زیر است:

- getState

- dispatch

- subscribe

کدهای زیر مخزن Redux را با بیست خط کد پیاده سازی می‌کنند. واضح است که کتابخانه پیچیده‌تر و کارامدتر بوده و پیاده سازی کتابخانه بسیار بیشتر از چند خط کد زیر است. این نسخه ساده شده بسیار کاربردی بوده و به شما در درک سه بخش اصلی که کتابخانه Redux را تشکیل می‌دهند، کمک می‌کند:

export const createStore = reducer => {
  let state = reducer(undefined, { type: "@INIT" });
  let listeners = [];

  const getState = () => state;

  const dispatch = action => {
    state = reducer(state, action);
    listeners.forEach(listener => listener());
  };

  const subscribe = listener => {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter(item => item !== listener);
    };
  };

  return { getState, dispatch, subscribe };
};

برای آنکه نشان دهیم پیاده سازی ما کاربردی است، در اینجا یک نمونه از استفاده از آن را آورده‌ایم که در لینک https://codesandbox.io/s/00o0lr67lp?from-embed می‌توانید مشاهده کنید.

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

با سایر مقالات تخصصی لیداوب در زمینه برنامه نویسی و طراحی وب همراه باشید.

منبع :

5 از 1 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند



متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین مطالب

آموزش در لیداوب

از مقالات و ویدیو های آموزشی خودتان کسب درآمد کنید!

جدیدترین سرویس ما برای دوستان متخصص و خوش بیان در زمینه طراحی وب ارائه شد. این سرویس به شما این امکان را می دهد که به آسانی مقالات و یا ویدیو های آموزشی خود را در لیداوب منتشر کنید. فرصت مناسبی است که بدون داشتن وب سایت و یا وبلاگ و مهم تر از همه بدون هزینه، مطالب خود را در لیداوب منتشر کنید و مهم تر از همه با فروش آنها کسب درآمد کنید. همین حالا شروع کنید و این فرصت استثنایی را از دست ندهید.