మీ చరిత్ర ప్రశ్న పారామ్‌లను కాంపోనెంట్ ఆధారాలకు బంధించే HOC

బ్లాగ్

మీ చరిత్ర ప్రశ్న పారామ్‌లను కాంపోనెంట్ ఆధారాలకు బంధించే HOC

మీ చరిత్ర ప్రశ్న పారామ్‌లను కాంపోనెంట్ ఆధారాలకు బంధించే HOC

ప్రతిచర్య-చరిత్ర-ప్రశ్న

ప్రశ్న పారామితులకు కాంపోనెంట్ ఆధారాలను కనెక్ట్ చేయడానికి ఒక సాధారణ HOC.



ఎందుకు?

అప్లికేషన్ పతన ప్రశ్న పారామితుల స్థితిని పునరుద్ధరించడానికి మరియు సమకాలీకరించడానికి మద్దతు ఇవ్వడం చాలా ముఖ్యం. పెద్ద ఫిల్టర్లు, ట్యాబ్ స్టేట్‌లు మొదలైనవి ఊహించుకోండి, ప్రస్తుతం ఉన్న రూటింగ్ పరిష్కారాలు ప్రశ్న పారామితుల విషయానికి వస్తే తగినంతగా లేదా గజిబిజిగా ఉండవు. దానికి అదనంగా సమకాలీకరించబడిన వాటి గురించి తర్కించడం సులభం కావచ్చు. ప్రత్యేకించి పెద్ద అప్లికేషన్‌లో URL లోని అన్ని పారామీటర్‌లను ట్రాక్ చేయడం కష్టం మరియు అవి భాగాలకు ఎలా ఆటుపోట్లకు గురవుతాయి లేదా అవి ఖచ్చితంగా నియంత్రించబడతాయి.

ఈరోజు నాణెం ధర

ఈ లైబ్రరీ ప్రశ్న-పారామితులుగా సమకాలీకరించబడే భాగాలపై ఆధారాలను నిర్వచించడానికి మాడ్యులర్ మార్గాన్ని అందిస్తుంది.



ఇది పూర్తిగా స్వతంత్రంగా పనిచేస్తుంది మరియు | _+_ |, | _+_ | మరియు | _+_ |.

ఇన్‌స్టాల్ చేయండి

react-router

అవసరాలు

  • రియాక్ట్ 16.4. (కొత్త సందర్భం API ని ఉపయోగిస్తుంది. లెగసీ మద్దతు కోసం దయచేసి 1.x ఉపయోగించండి.)

వినియోగం

| _+_ | ఉపయోగించండి ప్రశ్న పారామితులలో మీరు సమకాలీకరించాలనుకుంటున్న ఆధారాలను అందించడానికి HOC. మొదటి ఆర్గ్యుమెంట్ నేమ్‌స్పేస్‌ని నిర్వచిస్తుంది (ఫారమ్ పేరు మాదిరిగానే | _ _ _ |). ప్రశ్న పారామితులు | _++_ | తో ఉపసర్గ చేయబడతాయి.



రెండవ వాదన సమకాలీకరించడానికి ఆధారాలు కలిగిన వస్తువు. ఇది మూడు విధులు అమలు చేయడానికి అవసరం.

  • | _+_ |, ఇచ్చిన విలువను సీరియల్ చేయడానికి ఉపయోగిస్తారు. క్రమబద్ధీకరించిన సంస్కరణను తిరిగి ఇవ్వండి (ఉదా. దీనితో | _+_ |)
  • | _+_ |, ప్రశ్న స్ట్రింగ్ నుండి ప్రారంభంలో విలువను డీసిరియలైజ్ చేయడానికి ఉపయోగిస్తారు. సీరియలైజ్ చేయని విలువను తిరిగి ఇవ్వాల్సిన అవసరం ఉంది.
  • (_+_ |
  • redux, ఐచ్ఛికం , విలువ ఆధారంగా url లోని ప్రాపర్టీని వదలివేయడానికి ట్రూని తిరిగి ఇవ్వండి.

| _+_ | మరియు | _+_ | మీ కాంపోనెంట్‌కు పంపబడే ఆధారాలకు మీకు యాక్సెస్ ఇవ్వండి. మీరు ఉదా ఉపయోగిస్తే. | _+_ | నుండి | _+_ | మీ గ్లోబల్ అప్లికేషన్ స్టేట్‌తో విలువలను సమకాలీకరించడానికి మీరు డిస్పాచ్ లేదా మీ అనుకూల యాక్షన్ క్రియేటర్‌లను కాల్ చేయవచ్చు. | _+_ | సులభంగా కూడా ఉపయోగించవచ్చు (ఉదాహరణలు చూడండి).

ఉదాహరణ

redux-form

కనెక్ట్ చేయబడిన భాగం కాకుండా, ప్రశ్న పారామితులను నిర్వహించే కంటైనర్ మాకు అవసరం. ఇది ప్రొవైడర్ మాదిరిగానే పనిచేస్తుంది | _+_ |. ఇది ఒకే బిడ్డను మాత్రమే అంగీకరిస్తుంది.

npm install react-history-query //.. or with yarn yarn add react-history-query

రాష్ట్రంతో వ్యవహరించడం

మీరు ఇచ్చిన నేమ్‌స్పేస్ యొక్క ప్రస్తుత ప్రశ్న పారామితులకు యాక్సెస్ కావాలనుకోవచ్చు. ఇదే | |++_ | hoc కోసం. ఇది కింది ఆధారాలను అందిస్తుంది:

  • | _+_ | - ప్రతి నేమ్‌స్పేస్ కోసం సీరియలైజ్డ్ క్వెరీలు, ఉదాహరణకు మీరు ప్రస్తుతం లెక్కించిన స్టేట్‌తో లింక్‌ను క్రియేట్ చేద్దాం.

  • | _+_ | - | _+_ | జాబితాను పాస్ చేయండి వాదనగా, ఉదా. | _+_ |. ఇది దాని కోసం ప్రస్తుత ప్రశ్న స్ట్రింగ్‌ని రూపొందిస్తుంది.

  • | _+_ | - ఇది నేమ్‌స్పేస్ యొక్క ప్రారంభ స్థితిని ప్రస్తుత స్థితితో భర్తీ చేస్తుంది. దీని అర్థం, ఈ నేమ్‌స్పేస్ కోసం పాక్షికంగా ప్రశ్న పారామితులు లేని ఏ ప్రదేశానికి అయినా మీరు తిరిగి వెళితే, అది ఈ కొత్త ప్రారంభ స్థితి నుండి వాటిని లోడ్ చేస్తుంది.

  • | _+_ | - ఇది మీకు నేరుగా క్వెరీ మేనేజర్‌కి యాక్సెస్ ఇస్తుంది. మీరు ఇక్కడ ఏమి చేస్తున్నారో జాగ్రత్తగా ఉండండి, ఎందుకంటే ఇది రాష్ట్ర నిర్వహణను విచ్ఛిన్నం చేస్తుంది

సర్వర్ సైడ్ రెండరింగ్

పరీక్షించబడింది మరియు బాగా పనిచేస్తుంది. బదులుగా | _+_ | ఉపయోగించండి | _+_ | నుండి _ _+_ | ప్యాకేజీ.

నవీకరణ చక్రాన్ని దాటవేయి

మీరు a | _+_ | పాస్ చేయవచ్చు ఆసరా | _+_ | మరియు ప్రోప్స్ యొక్క ఏదైనా అప్‌డేట్‌పై పూర్తిగా పుష్ని దాటవేయాలని నిర్ణయించుకోండి.

connectQueryToProps

థర్డ్ పార్టీ లైబ్రరీలు

రియాక్ట్-రౌటర్

మీరు రెండింటికీ ఒకే చరిత్ర ఉదాహరణను అందించారని నిర్ధారించుకోండి | _+_ | మరియు | _+_ |.

ఉదాహరణలు

ఉదాహరణలను | _+_ | తో తనిఖీ చేయండి మరియు | _+_ |.

ఒక వ్యక్తికి ట్వీట్లను ఎలా చూడాలి

డౌన్‌లోడ్ వివరాలు:

రచయిత: బౌలింగ్‌ఎక్స్

GitHub: https://github.com/BowlingX/react-history-query

#రివ్యూ #జావాస్క్రిప్ట్ #రియాక్ట్స్