React Context എങ്ങനെ സെറ്റപ്പ് ചെയ്യാം

Prop drilling നിങ്ങളുടെ കോഡിനെ നശിപ്പിക്കുന്നു. ആവശ്യമില്ലാത്ത അഞ്ച് ഘട്ടങ്ങളിലൂടെ (layers) നിങ്ങൾ ഡാറ്റ കൈമാറുന്നു. React Context ഇത് പരിഹരിക്കുന്നു. എന്നാൽ, മിക്ക സെറ്റപ്പുകളും പുതിയൊരു പ്രശ്നം സൃഷ്ടിക്കുന്നു.

ഒരു context hook-ൽ "Go to Definition" ഉപയോഗിക്കുമ്പോൾ, പലപ്പോഴും ഒരു ചെറിയ useContext call മാത്രമുള്ള ഒരു ഫയലിൽ നിങ്ങൾ എത്തും. യഥാർത്ഥ ലോജിക് മറ്റൊരു ഫയലിലായിരിക്കും. സ്റ്റേറ്റ് ലോജിക് (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. The context object.
  2. കംപോണന്റുകൾ ഉപയോഗിക്കാൻ ഒരു public hook. context null ആണെങ്കിൽ ഈ hook ഒരു error നൽകണം (throw an error). ഇത്, കംപോണന്റുകൾ provider-ന് പുറത്താണെങ്കിൽ അവ പെട്ടെന്ന് തന്നെ പിശക് (fail fast) കണ്ടെത്തുന്നു എന്ന് ഉറപ്പാക്കുന്നു.
  3. State management-നായി ഒരു private hook. നിങ്ങളുടെ useState അല്ലെങ്കിൽ useReducer calls ഈ hook-ൽ ആയിരിക്കും ഉണ്ടാവുക.

Public hook-ഉം private logic-ഉം ഒരേ ഫയലിൽ വെക്കുന്നതിലൂടെ, "Go to Definition" കൃത്യമായി പ്രവർത്തിക്കും. കംപോണന്റിൽ നിന്ന് നേരിട്ട് ലോജിക്കിലേക്ക് നിങ്ങൾക്ക് മാറാൻ സാധിക്കും.

ഇതിൽ ഒരു റിസ്ക് ഉണ്ട്. Provider ഉപയോഗിക്കാൻ വേണ്ടി private hook export ചെയ്യുന്നതുകൊണ്ട്, ഒരു സഹപ്രവർത്തകൻ അത് തെറ്റായ സ്ഥലത്ത് ഉപയോഗിച്ചേക്കാം. അങ്ങനെ സംഭവിച്ചാൽ, ഷെയർ ചെയ്ത context ഉപയോഗിക്കുന്നതിന് പകരം അവർ ഒരു പുതിയ, ഒറ്റപ്പെട്ട (isolated) സ്റ്റേറ്റ് നിർമ്മിക്കുന്നു.

ഇത് തടയാൻ കമന്റുകൾ ഉപയോഗിക്കുന്നത് നിർത്തുക. പകരം ഒരു ESLint rule ഉപയോഗിക്കുക.

ഇത് പരിഹരിക്കാനായി ഞാൻ eslint-plugin-restrict-callers നിർമ്മിച്ചു. ഏതൊക്കെ ഫംഗ്ഷനുകൾക്കാണ് പ്രത്യേക ഹുക്കുകൾ (hooks) വിളിക്കാൻ അനുവാദമുള്ളതെന്ന് നിങ്ങൾക്ക് ഇതിലൂടെ നിശ്ചയിക്കാം.

ഉദാഹരണത്തിന്, useGameStateManagement വിളിക്കാൻ GameProvider-ന് മാത്രമേ അനുവാദമുള്ളൂ എന്ന് ESLint-നോട് പറയാം. മറ്റാരെങ്കിലും ഇത് ചെയ്യാൻ ശ്രമിച്ചാൽ, വ്യക്തമായ ഒരു error മെസ്സേജോടെ ബിൽഡ് പരാജയപ്പെടും.

വർക്ക്ഫ്ലോയുടെ സംഗ്രഹം (Summary):

  • Context, public hooks, കൂടാതെ private logic എന്നിവ ഒരൊറ്റ ഫയലിൽ ഗ്രൂപ്പ് ചെയ്യുക.
  • Provider value-ലേക്ക് ഹുക്ക് റിസൾട്ട് പാസ്സ് ചെയ്യാൻ വേണ്ടി മാത്രം Provider ഉപയോഗിക്കുക.
  • Context ഇല്ലെങ്കിൽ public hook-ൽ error throw ചെയ്യുക.
  • Public, private hooks എന്നിവയ്ക്കിടയിൽ അതിർവരമ്പുകൾ നിശ്ചയിക്കാൻ ESLint ഉപയോഗിക്കുക.

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