rest आराम(हैटेस) और रिएक्टजेएस




reactjs redux (2)

मुझे एसएपी आवेदन में व्यापारिक तर्क को कम करने के लिए बाकी के HATEOAS सिद्धांत का उपयोग करने में दिलचस्पी है। एक प्रतिक्रिया-विशिष्ट संदर्भ में, मैं जानना चाहता हूं कि चुनौतियां हैं जो इस अव्यवहारिक बनाते हैं और यदि नहीं, तो क्या एक अच्छी रणनीति का पालन करना है?

UI से व्यावसायिक तर्क को हटाने के लिए HATEOAS का उपयोग करने के संकल्पनात्मक उदाहरण:

मुझे केवल एक लिंक मिला है जो सुझाव देता है कि प्रतिक्रिया / फ्लक्स एक हैटेस रणनीति के साथ संगत नहीं है , और कहीं और कोई सार्थक चर्चा नहीं है। क्या वास्तव में प्रतिक्रिया / फ्लक्स ऐप में यह संभव नहीं है? कि इतने पद पर पर्याप्त ध्यान नहीं मिला क्या किसी के पास सफलता प्राप्त करने के लिए कोई पसंदीदा या अनुशंसित दृष्टिकोण है (फ्लक्स या रेड्यूक्स के साथ या बिना)?

किसी ने कोनेरी के संदर्भ में हैटेओस का लाभ उठाने का एक विस्तृत विस्तृत उदाहरण दिया मैं प्रतिक्रिया के लिए कुछ इसी तरह की तलाश कर रहा हूं।

निजी तौर पर, मैं हाइपरमीडिया लिंक्स में rel टैग को दर्शा रहा हूं जो नियंत्रित करता है कि जेएसएक्स घटकों को प्रदान किया जाता है ( सशर्त जेएसएक्स )। क्या वास्तविक दुनिया के ऐप के लिए यह अनुभवहीन है? शायद सशर्त रूप से प्रस्तुत किए गए घटकों को इस तरह से इस्तेमाल करने के लिए बहुत मोटे अनाज हैं?

मैं मान रहा हूं कि hypermedia लिंक एचएएल कार्यान्वयन द्वारा प्रदान किए जाते हैं, या अन्यथा एटीओएम फ़ीड सम्मेलन ( आरएफसी 4287 ) के अनुरूप हैं।


100% हैटेस रिएक्ट और फ्लक्स के साथ संगत है, हैटेस कॉन्युलर के साथ संगत है, हेटास JQuery और यहां तक ​​कि वेनिला जेएस के साथ संगत है।

हैटेस उपभोक्ता क्लाइंट पर किसी भी तकनीकी या कार्यान्वयन आवश्यकताओं को लागू नहीं करता है

हैटेस वास्तव में एक ऐसी अवधारणा है जिसमें आप अपने एपीआई डिजाइन कर सकते हैं (आप एचएएल की तरह कई मानकों में से एक का उपयोग कर सकते हैं)

असल में यदि आप एपीआई कॉल कर सकते हैं तो आप एक हैतीस क्लाइंट को लागू कर सकते हैं।

तो वहां कैसे पहुंचे:

  • चरण 1, आप आम तौर पर प्रतिक्रिया में एक एपीआई कॉल कैसे करेंगे? ऐसा ही करो
  • चरण 2, जवाब पूछताछ
  • प्रतिक्रिया के आधार पर चरण 3, यूआई में उचित रूप से प्रतिक्रिया दें।

उदाहरण के लिए आदेश एपीआई /orders करने के लिए एक कॉल दी, मुझे निम्नलिखित प्रतिक्रिया मिलती है:

{
    "_links": {
        "self": { "href": "/orders" },
        "next": { "href": "/orders?page=2" }
    }
}

इससे मैं अनुमान लगा सकता हूं कि next एक मान्य संबंध है, और यदि मैं उस href पर जाता हूं तो मुझे वास्तव में आदेश का एक दूसरा पृष्ठ प्राप्त होगा, इसलिए यूआई में इस स्थिति में अगले बटन दिखाएं।

हालांकि अगर मुझे निम्नलिखित प्रतिक्रिया मिली है:

{
    "_links": {
        "self": { "href": "/orders" },
    }
}

तो मैं अनुमान लगा सकता हूं कि next कोई मान्य संबंध नहीं है, और मेरी UI में मुझे अक्षम करना चाहिए या अगले बटन को प्रदर्शित नहीं करना चाहिए।

कोई जादू नहीं है, यह केवल सोच में एक बदलाव है, एक नया प्रतिमान


इससे पहले कि मैं अपने संभावित गलत / अप्रासंगिक उत्तर को दूर करता हूं, मैं आपको यह बताना चाहता हूं कि मैं अभी हाटेस क्या है पर पढ़ता हूं। यह चेतावनी, जो मैंने संक्षेप में पढ़ी है, से हैटोज़ को एपीआई के बारे में अधिक जानकारी मिलती है कि आपको बताए गए संसाधनों के लिए प्रासंगिक लिंक हैं जो आपसे अनुरोध किया था।

यह मामला होने पर, मुझे कोई कारण नहीं दिख रहा है कि आप अपने कार्यों में डायनामिक यूआरएल एजेक्स कॉल्स को लागू नहीं कर सकते, जो आपके एसपीए के एप्लीकेशन स्टेट (यानी रेड्यूक्स) को आपको जो कुछ भी प्रदान किया गया है उसके आधार पर बदल देगा। आपके आवेदन के सभी हिस्सों के लिए अभी भी एक दृश्य तरीके से राज्य का प्रतिनिधित्व करने के लिए कुछ आवश्यक है। यहाँ एक कच्चा अर्ध-छद्म है और मेरे बैंक खाते के उदाहरण पर आधारित ढीलेपन से मेरा क्या मतलब है इसका बहुत अच्छा विचार नहीं है:

// our component file
import React from 'react'
import { makeAWithdrawl } from './actions'

export default React.createClass({
  handleClick: function(e) {
    e.preventDefault()
    makeAWithdrawl(this.props.account.withdraw.href)
  },
  render: function () {
    <div className="account">
      <p className="account_number">{this.props.account.accountNumber}</p>
      <p className="balance">{this.props.account.balance}</p>
      <p><a href={this.props.account.deposit.href}>Deposit</a></p>
      {this.props.account.withdraw ? <p><a onClick={this.handleClick}>Withdraw</a></p> : ''}
    </div>
  }
})


// our actions file
import store from 'store' // our redux store
import axios from 'axios' // an ajax library

export function makeAWithdrawl(url) {
  return axios.post(url).then(function(resp){
    store.dispatch({
      type: 'MAKE_WITHDRAWL',
      action: resp.data
    }) // do your reducer stuff
  })
}

आपका आवेदन अभी भी जानता है कि यह एसपीए में क्या कर रहा है, हालांकि, एपीआई आपको यह निर्देशित करने की अनुमति देगा कि कौन सी कार्रवाई करने की जरूरत है आशा करता हूँ की ये काम करेगा।







hateoas