Jinsi ya Kusanidi React Context

Prop drilling inaharibu kodi yako. Unapitisha data kupitia tabaka tano za vipengele (components) ambavyo havihitaji. React Context inatatua hili. Hata hivyo, mipangilio mingi inasababisha tatizo jipya.

Unapotumia "Go to Definition" kwenye context hook, mara nyingi unaishia kwenye faili lenye mwito mdogo tu wa useContext. Mantiki (logic) halisi ipo kwenye faili tofauti. Unatumia siku yako kutafuta mantiki ya state (state logic).

Unaweza kurekebisha hili kwa muundo bora zaidi.

Fuata mfumo huu:

  • Weka context, public hook, na mantiki ya state kwenye faili moja.
  • Weka Provider kama ganda jepesi (thin shell).
  • Tumia kanuni ya lint kulinda mantiki yako ya siri (private logic).

Panga faili zako hivi:

src/context/ • GameContext.ts (Context, public hook, na mantiki ya state) • GameProvider.tsx (Ganda jepesi)

Ndani ya GameContext.ts, tengeneza sehemu tatu:

  1. Kitu (object) cha context.
  2. Public hook kwa ajili ya vipengele kutumia. Hook hii inapaswa kutoa kosa (error) ikiwa context ni null. Hii inahakikisha vipengele vyako vinashindwa haraka ikiwa viko nje ya provider.
  3. Private hook kwa ajili ya usimamizi wa state. Hook hii inajumuisha miito yako ya useState au useReducer.

Kwa kuweka public hook na mantiki ya siri kwenye faili moja, "Go to Definition" inafanya kazi vizuri sana. Unaruka moja kwa moja kutoka kwenye component hadi kwenye mantiki.

Kuna hatari moja. Kwa sababu private hook inatolewa (exported) ili Provider iweze kuitumia, mwanachama wa timu anaweza kuitumia mahali pasipofaa. Akifanya hivyo, anatengeneza state mpya na iliyotengwa badala ya kutumia context inayoshirikiwa.

Acha kutumia maoni (comments) kuzuia hili. Tumia kanuni ya ESLint badala yake.

Nilitengeneza eslint-plugin-restrict-callers ili kutatua hili. Unaweza kuainisha ni kazi (functions) zipi zinazoruhusiwa kuita hook maalum.

Kwa mfano, unaweza kuwaambia ESLint kuwa ni GameProvider pekee inayoweza kuita useGameStateManagement. Ikiwa mtu mwingine atajaribu, ujenzi (build) utashindwa kwa ujumbe wa kosa ulio wazi.

Muhtasari wa mtiririko wa kazi:

  • Unganisha context, public hooks, na mantiki ya siri kwenye faili moja.
  • Tumia Provider tu kupitisha matokeo ya hook kwenye provider value.
  • Toa makosa (errors) kwenye public hook ikiwa context haipo.
  • Tumia ESLint kusimamia mipaka kati ya public na private hooks.

Chanzo: https://dev.to/jareddlewis/how-to-set-up-react-context-2c9h