نحوه راهاندازی React Context
Prop drilling کد شما را خراب میکند. شما دادهها را از طریق پنج لایه از کامپوننتها عبور میدهید که اصلاً به آنها نیازی ندارند. React Context این مشکل را حل میکند. با این حال، اکثر روشهای راهاندازی، مشکل جدیدی ایجاد میکنند.
وقتی از قابلیت "Go to Definition" روی یک هوکِ context استفاده میکنید، اغلب به فایلی میرسید که چیزی جز یک فراخوانی کوچک useContext در آن نیست. منطق اصلی در فایل دیگری قرار دارد. شما روز خود را صرف جستجو برای منطق state میکنید.
میتوانید این مشکل را با یک ساختار بهتر حل کنید.
این الگو را دنبال کنید:
- Context، هوک عمومی و منطق state را در یک فایل قرار دهید.
- Provider را به عنوان یک لایه بسیار ساده (thin shell) نگه دارید.
- از یک قانون lint برای محافظت از منطق خصوصی خود استفاده کنید.
ساختار فایلهای خود را به این صورت تنظیم کنید:
src/context/ • GameContext.ts (Context، هوک عمومی و منطق state) • GameProvider.tsx (یک لایه بسیار ساده)
داخل GameContext.ts سه بخش ایجاد کنید:
- شیء context.
- یک هوک عمومی برای استفاده کامپوننتها. این هوک باید اگر context برابر با null بود، یک خطا پرتاب (throw) کند. این کار باعث میشود اگر کامپوننتها خارج از محدوده provider باشند، سریعاً با خطا مواجه شوند (fail fast).
- یک هوک خصوصی برای مدیریت state. این هوک شامل فراخوانیهای
useStateیاuseReducerشماست.
با قرار دادن هوک عمومی و منطق خصوصی در یک فایل، قابلیت "Go to Definition" به درستی کار میکند. شما مستقیماً از کامپوننت به سراغ منطق میروید.
یک ریسک وجود دارد. از آنجایی که هوک خصوصی اکسپورت (export) میشود تا Provider بتواند از آن استفاده کند، ممکن است یکی از همتیمیهای شما آن را در جای اشتباهی فراخوانی کند. اگر این کار را انجام دهند، به جای استفاده از context مشترک، یک state جدید و ایزوله ایجاد میکنند.
از استفاده از کامنتها برای جلوگیری از این اتفاق دست بردارید. در عوض از یک قانون ESLint استفاده کنید.
من eslint-plugin-restrict-callers را برای حل این مشکل ساختم. شما میتوانید تعریف کنید که کدام توابع اجازه دارند هوکهای خاصی را فراخوانی کنند.
برای مثال، میتوانید به ESLint بگویید که فقط GameProvider اجازه دارد useGameStateManagement را فراخوانی کند. اگر شخص دیگری سعی کند این کار را انجام دهد، فرآیند build با یک پیام خطای واضح متوقف میشود.
خلاصه گردش کار (workflow):
- Context، هوکهای عمومی و منطق خصوصی را در یک فایل گروهبندی کنید.
- از Provider فقط برای پاس دادن نتیجه هوک به
valueپروایدر استفاده کنید. - اگر context وجود نداشت، در هوک عمومی خطا پرتاب کنید.
- از ESLint برای اعمال مرز بین هوکهای عمومی و خصوصی استفاده کنید.
منبع: https://dev.to/jareddlewis/how-to-set-up-react-context-2c9h