آموزش React مقدماتی قسمت دهم: مدیریت داده های ناهمزمان

قسمت ها

در قسمت های قبل، در مورد مدیریت داده ها در برنامه وب React خود یاد گرفته اید. در یک سناریوی واقعی شما همچنین باید یاد بگیرید که چگونه با داده هایی که از خارج برنامه شما می آیند (مثلاً از یک وب سرویس، پایگاه داده و غیره) برخورد کنید. این امر مستلزم این است که ما همچنین مدیریت داده های ناهمزمان (asynchronous data) را بیاموزیم. این قسمت شما را با استفاده از داده های ناهمزمان در برنامه React آشنا می کند. در اولین تلاش ما فقط داده های ناهمزمان را در برنامه خود شبیه سازی می کنیم.

تغییر نام آرایه دوره ها

ابتدا، اجازه دهید نام آرایه ای را که شامل داده های نمونه دوره است،از courses به courses_data تغییر نام دهیم:

const courses_data = [ ... ]

افزودن state به کامپوننت Courses

در مرحله دوم ما یک بار دیگر از State Hook استفاده می کنیم تا یک State جدید با نام courses در کامپوننت App ایجاد کنیم. بنابراین کد زیر را در تابع App وارد کنید:

const [courses, setCourses] = useState([]);

این state جدید برای ذخیره لیست دوره های داخل کامپوننت App استفاده خواهد شد.

بازیابی آرایه دوره ها به روشی ناهمزمان (Asynchronous)

از آنجا که این آموزش در مورد مدیریت داده های ناهمزمان در برنامه های React شماست، با اجرای تابع زیر در کامپوننت برنامه، یک data source ناهمزمان را در کامپوننت App شبیه سازی می کنیم:

const getCoursesAsync = () => 
  new Promise(resolve => 
    setTimeout(
      () => resolve({ courses: courses_data }),
      2000
    )
  );

تابع getCoursesAsync یک Promise را برمی گرداند که پس از دو ثانیه resolve می شود (با استفاده از تابع setTimeout). وقتی Promise حل و فصل شد، یک شی حاوی ویژگی courses برگشت داده می شود که به آن آرایه courses_data اختصاص داده می شود.

این تابع به ما کمک می کند تا یک منبع داده ناهمزمان (asynchronous data source ) را که داده های دوره های ما را با تأخیر تحویل می دهد، شبیه سازی کنیم (به عنوان مثال ما آن را با استفاده از REST درخواست می کنیم).

استفاده از Effect Hook برای مقدار دهی اولیه state دوره ها

سپس از تابع getCoursesAsync برای مقدار دهی state دوره ها استفاده می شود. وضعیت دوره ها باید در ابتدای lifecycle کامپوننت تنظیم شود. همانطور که قبلاً در قسمت آخر توضیح داده شد، ما می توانیم از یک Effect Hook (با یک لیست خالی از متغیرهای وابسته) برای اتصال به lifecycle کامپوننت استفاده کنیم و تابع getCoursesAsync را فراخوانی کرده و مقدار state را پس از resolve شدن Promise برگشتی تنظیم کنیم:


  useEffect(() => {
    getCoursesAsync().then(result => {
      setCourses(result.courses);
    })
  }, []);

Loading Indicator

هنگام دسترسی به برنامه در مرورگر، می توانید اثر تغییرات ایجاد شده را مشاهده کنید. پس از بارگیری صفحه، فقط می توانید عنوان و قسمت جستجو را مشاهده کنید. لیست دوره ها به طور خودکار پس از 2 ثانیه ظاهر می شود. برای اینکه به کاربر اطلاع دهید که ابتدا داده ها بارگیری می شوند، می توانیم یک نشانگر بارگیری (indicator) به برنامه اضافه کنیم. برای این منظور state دیگری (isLoading) به کامپوننت App اضافه کنید و state را با مقدار false مقداردهی اولیه کنید.

const [isLoading, setIsLoading] = useState(false);

اکنون ما از این state در داخل فراخوانی useEffect استفاده می کنیم:

قبل از فراخوانی تابع getCoursesAsync، ما مقدار را روی true تنظیم می کنیم. پس از resolve شدن Promise بازگشت داده شده (و وقتی که داده های دوره ها در دسترس است) ما آن را دوباره به false تنظیم می کنیم

در داخل کد JSX کامپوننت App، اکنون آماده نوشتن rendering مشروط بر اساس مقدار isLoading هستیم:

وقتی بارگذاری داده در حال انجام است (isLoading روی true تنظیم شده است) ما فقط متن “Loading Courses …” را چاپ می کنیم تا به کاربر اطلاع دهیم که چه خبر است.

پس از اتمام بارگذاری ( isLoading به false تغییر می کند) ما از کامپوننت CoursesList برای خروجی گرفتن از لیست دوره ها استفاده می کنیم. پیغام loading دیگر در خروجی رندر نمی شود.

در نهایت، می توانید source code کامل کامپوننت App را در زیر مشاهده کنید:

سعید نصیری
سعید نصیری

من برنامه نویس لاراول، PHP و طراح سایت هستم. برنامه نویسی موبایل و تولید اپلیکیشن های موبایل نیز بخش دیگری از توانایی های فردی من هست. تقریبا ده دوازده سالی تجربه مستمر در زمینه طراحی سایت دارم و نزدیک به یک سال هم میشه که در برنامه نویسی موبایل وارد شده ام.

× در حال پاسخ به: