فرادرسایجاد حالت سراسری در ری اکت با قلاب و بدون context – از صفر تا صد
در این مقاله با روش ساخت یک کتابخانه برای ایجاد حالت سراسری در ری‌اکت با استفاده از قلاب و بدون نیاز به context آشنا می‌شویم. امیدواریم این راهنمای گام به گام به شما کمک کند با ماهیت و روش ساخت این حالت سراسری آشنا شوید. کد کامل این کتابخانه را می‌توانید در این ریپوی گیت‌هاب (+) ملاحظه کنید.
گام 1: متغیر سراسری
در ابتدا باید یک متغیر سراسری داشته باشیم:
در سراسر این مقاله از همین ساختار استفاده می‌کنیم.
در ادامه یک قلاب ری‌اکت برای خواندن این متغیر سراسری می‌سازیم:
البته این عملاً یک قلاب ری‌اکت نیست، زیرا به قلاب‌های ابتدایی ری‌اکت وابستگی ندارد. در واقع این چیزی نیست که معمولاً انتظار داریم، زیرا در زمان تغییر یافتن متغیر سراسری، رندر مجد نمی‌شود.
گام 2: رندر مجدد در زمان به‌روزرسانی
ما باید از قلاب useState در ری‌اکت برای واکنشی ساختن قلاب خودمان استفاده کنیم:
بدین ترتیب امکان به‌روزرسانی حالت ری‌اکت از خارج فراهم می‌شود. اگر متغیر سراسری را به‌روزرسانی کنیم، باید به شنونده‌ها اطلاع دهیم. بنابراین در ادامه یک تابع برای به‌روزرسانی می‌سازیم:
بدین ترتیب می‌توانیم useGlobalState را طوری تغییر دهیم که یک چندتایی مانند useState بازگشت دهد:
گام 3: کانتینر
به طور معمول، متغیر سراسری در یک «دامنه فایل» (File Scope) قرار دارد. آن را در دامنه تابع قرار می‌دهیم تا کمی محدودتر شده و خوانایی آن افزایش یابد.
در این مقاله قصد نداریم وارد جزییات کد تایپ اسکریپت شویم، اما فرم فوق به ما امکان می‌دهد که انواع useGlobalState را با استنباط از انواع initialState حاشیه‌نویسی (annotate) کنیم.
گام 4: دسترسی دامنه‌دار
با این که امکان ساخت چندین کانتینر وجود دارد، اما به طور معمول چندین آیتم را در یک حالت سراسری قرار می‌دهیم.
کتابخانه‌های معمول برای حالت سراسری کارکردهای دامنه‌ای را صرفاً برای بخشی از حالت ارائه می‌کنند. برای نمونه React-Redux از یک اینترفیس سلکتور برای به دست آوردن مقدار مشتق شده از یک حالت سراسری بهره می‌گیرد.
ما در این کتابخانه از رویکرد ساده‌تری استفاده می‌کنیم و از یک کلید رشته‌ای برای حالت سراسری بهره می‌گیریم. در این مثال از count و text استفاده کرده‌ایم.
به منظور سادگی بیشتر در این کد از useCallback استفاده نمی‌کنیم، اما استفاده از آن در کتابخانه‌ها به طور کلی توصیه شده است.
گام 5: به‌روزرسانی‌های تابعی
با استفاده از useState در ری‌اکت امکان انجام به‌روزرسانی‌های تابعی فراهم می‌آید. این خصوصیت را نیز پیاده‌سازی می‌کنیم:
گام 6: Reducer
افرادی که با ریداکس آشنا هستند، استفاده از اینترفیس Reducer را ترجیح می‌دهند. قلاب ری‌اکت به نام useReducer نیز اساساً همان اینترفیس را ارائه می‌کند.
گام 7: وضعیت همزمان (Concurrent mode)
برای این که از مزیت وضعیت همزمان بهره‌مند شویم، باید از حالت ری‌اکت به جای یک متغیر خارجی بهره بگیریم. راه‌حل کنونی این است که حالت ری‌اکت را به یک حالت سراسری پیوند دهیم.
پیاده‌سازی آن کمی پیچیده است، اما در اصل یک قلاب برای ایجاد حالت ایجاد کرده و سپس آن را لینک می‌کنیم.
patchedReducer برای این که setGlobalState بتواند حالت سراسری را به‌روزرسانی کند، ضروری است. قلاب useGlobalStateProvider باید در یک کامپوننت پایدار از قبیل کامپوننت ریشه اپلیکیشن مورد استفاده قرار گیرد.
توجه کنید که این تکنیک متداولی نیست و ممکن است محدودیت‌هایی داشته باشد. برای نمونه فراخوانی شنونده‌ها در رندر عملاً توصیه نمی‌شود. برای این که از وضعیت همزمان به صورت صحیحی پشتیبانی شود، باید از پشتیبانی core برخوردار باشیم. در حال حاضر قلاب useMutableSource در این RFC (+) پیشنهاد شده است.
سخن پایانی
در این مقاله با بخش عمده پیاده‌سازی حالت سراسری در قلاب‌های ری‌اکت آشنا شدیم. البته کد واقعی در تایپ اسکریپت کمی پیچیده‌تر و شامل getGlobalState برای خواندن حالت سراسری از خارج است و پشتیبانی محدودی برای میان‌افزار ریداکس و DevTools دارد.
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های برنامهنویسی
- آموزش ساخت پروژه با فریم ورک React Native
- مجموعه آموزش‌های JavaScript (جاوا اسکریپت)
- آموزش ری اکت (React) — مجموعه مقالات مجله فرادرس
- هشت ترفند مفید برای توسعه اپلیکیشن های React — راهنمای کاربردی
==
