React Context ని ఎలా సెటప్ చేయాలి

Prop drilling మీ కోడ్‌ను దెబ్బతీస్తుంది. అవసరం లేని ఐదు పొరల కంపొనెంట్స్ (components) ద్వారా మీరు డేటాను పంపిస్తారు. React Context దీనిని పరిష్కరిస్తుంది. అయితే, చాలా సెటప్‌లు ఒక కొత్త సమస్యను సృష్టిస్తాయి.

మీరు ఒక context hook పై "Go to Definition" ఉపయోగించినప్పుడు, తరచుగా మీరు కేవలం ఒక చిన్న useContext కాల్ మాత్రమే ఉన్న ఫైల్‌లోకి చేరుకుంటారు. అసలు లాజిక్ వేరే ఫైల్‌లో ఉంటుంది. స్టేట్ లాజిక్ (state logic) కోసం వెతుకుతూనే మీ రోజంతా గడిచిపోతుంది.

మెరుగైన స్ట్రక్చర్‌తో మీరు దీనిని పరిష్కరించవచ్చు.

ఈ ప్యాటర్న్‌ను అనుసరించండి:

  • context, public hook, మరియు state logic ని ఒకే ఫైల్‌లో ఉంచండి.
  • Provider ని ఒక thin shell లాగా ఉంచండి.
  • మీ private logic ని రక్షించడానికి ఒక lint rule ని ఉపయోగించండి.

మీ ఫైల్స్‌ను ఈ విధంగా స్ట్రక్చర్ చేయండి:

src/context/ • GameContext.ts (Context, public hook, మరియు state logic) • GameProvider.tsx (ఒక thin shell)

GameContext.ts లోపల, మూడు భాగాలు సృష్టించండి:

  1. context object.
  2. కంపొనెంట్స్ ఉపయోగించుకోవడానికి ఒక public hook. ఒకవేళ context null అయితే, ఈ hook ఒక error ని త్రో (throw) చేయాలి. దీనివల్ల మీ కంపొనెంట్స్ provider బయట ఉన్నట్లయితే అవి వెంటనే ఫెయిల్ అవుతాయి.
  3. state management కోసం ఒక private hook. ఈ hook లో మీ useState లేదా useReducer కాల్స్ ఉంటాయి.

public hook మరియు private logic ని ఒకే ఫైల్‌లో ఉంచడం వల్ల, "Go to Definition" పర్ఫెక్ట్‌గా పనిచేస్తుంది. మీరు నేరుగా కంపొనెంట్ నుండి లాజిక్‌కి వెళ్లవచ్చు.

ఇక్కడ ఒక రిస్క్ ఉంది. Provider ఉపయోగించుకోవడానికి private hook ని export చేయడం వల్ల, మీ టీమ్ మెంబర్ దానిని తప్పు ప్రదేశంలో పిలవవచ్చు (call చేయవచ్చు). అలా చేస్తే, వారు shared context ని ఉపయోగించే బదులు, ఒక కొత్త, ఐసోలేటెడ్ స్టేట్‌ను (isolated state) సృష్టిస్తారు.

దీనిని నివారించడానికి కామెంట్స్ ఉపయోగించడం ఆపండి. దానికి బదులుగా ESLint rule ని ఉపయోగించండి.

దీనిని పరిష్కరించడానికి నేను eslint-plugin-restrict-callers ని సృష్టించాను. ఏ ఫంక్షన్లు నిర్దిష్ట hooks ని పిలవడానికి అనుమతించబడతాయో మీరు నిర్వచించవచ్చు.

ఉదాహరణకు, useGameStateManagement ని కేవలం GameProvider మాత్రమే పిలవగలదని మీరు ESLint కి చెప్పవచ్చు. మరెవరైనా ప్రయత్నిస్తే, స్పష్టమైన ఎర్రర్ మెసేజ్‌తో బిల్డ్ ఫెయిల్ అవుతుంది.

వర్క్‌ఫ్లో సమ్మరీ (Summary of the workflow):

  • context, public hooks, మరియు private logic ని ఒకే ఫైల్‌లో గ్రూప్ చేయండి.
  • hook రిజల్ట్‌ను provider value కి పంపడానికి మాత్రమే Provider ని ఉపయోగించండి.
  • context లేకపోతే public hook లో ఎర్రర్స్‌ను త్రో చేయండి.
  • public మరియు private hooks మధ్య సరిహద్దులను (boundaries) అమలు చేయడానికి ESLint ని ఉపయోగించండి.

మూలం: https://dev.to/jareddlewis/how-to-set-up-react-context-2c9h