React Context-ஐ எவ்வாறு அமைப்பது

Prop drilling உங்கள் குறியீட்டைச் சிதைக்கும். தேவைப்படாத ஐந்து அடுக்கு கூறுகளின் (components) வழியாக நீங்கள் தரவை அனுப்புகிறீர்கள். React Context இதைச் சரிசெய்கிறது. இருப்பினும், பெரும்பாலான அமைப்புகள் ஒரு புதிய சிக்கலை உருவாக்குகின்றன.

ஒரு context hook-இல் "Go to Definition" என்பதைப் பயன்படுத்தும்போது, பெரும்பாலும் ஒரு சிறிய useContext அழைப்பு மட்டுமே உள்ள ஒரு கோப்பிற்கு நீங்கள் செல்வீர்கள். உண்மையான தர்க்கம் (logic) வேறொரு கோப்பில் இருக்கும். நீங்கள் நாள் முழுவதும் state logic-ஐத் தேடுவதிலேயே நேரத்தைச் செலவிடுவீர்கள்.

சிறந்த கட்டமைப்பின் மூலம் இதைச் சரிசெய்யலாம்.

இந்த முறையைப் பின்பற்றுங்கள்:

  • context, public hook மற்றும் state logic ஆகியவற்றை ஒரே கோப்பில் வைக்கவும்.
  • Provider-ஐ ஒரு மெல்லிய அடுக்காக (thin shell) மட்டும் வைத்திருக்கவும்.
  • உங்கள் private logic-ஐப் பாதுகாக்க ஒரு lint விதியைப் (lint rule) பயன்படுத்தவும்.

உங்கள் கோப்புகளை இவ்வாறு கட்டமைக்கவும்:

src/context/ • GameContext.ts (Context, public hook மற்றும் state logic) • GameProvider.tsx (ஒரு மெல்லிய அடுக்கு)

GameContext.ts-க்குள், மூன்று பகுதிகளை உருவாக்கவும்:

  1. The context object.
  2. கூறுகள் (components) பயன்படுத்துவதற்கான ஒரு public hook. context null ஆக இருந்தால், இந்த hook ஒரு பிழையை (error) உருவாக்க வேண்டும். இது உங்கள் கூறுகள் provider-க்கு வெளியே இருந்தால் உடனடியாகத் தோல்வியடைவதை (fail fast) உறுதி செய்கிறது.
  3. state management-க்கான ஒரு private hook. இந்த hook-இல் உங்கள் useState அல்லது useReducer அழைப்புகள் இருக்கும்.

public hook மற்றும் private logic ஆகியவற்றை ஒரே கோப்பில் வைப்பதன் மூலம், "Go to Definition" மிகச் சரியாகச் செயல்படும். நீங்கள் நேரடியாக component-லிருந்து logic-க்குச் செல்லலாம்.

இதில் ஒரு ஆபத்து உள்ளது. Provider-ஆல் பயன்படுத்த ஏதுவாக private hook export செய்யப்படுவதால், உங்கள் குழு உறுப்பினர் அதைத் தவறான இடத்தில் அழைக்கக்கூடும். அப்படிச் செய்தால், அவர்கள் பகிரப்பட்ட context-ஐப் பயன்படுத்துவதற்குப் பதிலாக, ஒரு புதிய, தனிமைப்படுத்தப்பட்ட state-ஐ உருவாக்கிவிடுவார்கள்.

இதைத் தடுக்க கமெண்ட்களைப் (comments) பயன்படுத்துவதை நிறுத்துங்கள். அதற்குப் பதிலாக ஒரு ESLint விதியைப் பயன்படுத்துங்கள்.

இதைத் தீர்க்க நான் eslint-plugin-restrict-callers-ஐ உருவாக்கினேன். எந்தெந்தச் செயல்பாடுகள் (functions) குறிப்பிட்ட hooks-ஐ அழைக்க அனுமதிக்கப்பட வேண்டும் என்பதை நீங்கள் வரையறுக்கலாம்.

உதாரணமாக, GameProvider மட்டுமே useGameStateManagement-ஐ அழைக்க முடியும் என்று ESLint-இடம் கூறலாம். வேறு யாராவது முயற்சித்தால், தெளிவான பிழைச் செய்தியுடன் build தோல்வியடையும்.

பணிப்பாய்வின் (workflow) சுருக்கம்:

  • context, public hooks மற்றும் private logic ஆகியவற்றை ஒரே கோப்பில் குழுவாக்கவும்.
  • hook முடிவை provider value-க்கு அனுப்ப மட்டுமே Provider-ஐப் பயன்படுத்தவும்.
  • context இல்லையென்றால் public hook-இல் பிழைகளை (errors) உருவாக்கவும்.
  • public மற்றும் private hooks இடையே எல்லைகளைக் கட்டாயப்படுத்த ESLint-ஐப் பயன்படுத்தவும்.

மூலம்: https://dev.to/jareddlewis/how-to-set-up-react-context-2c9h