REST (HATEOAS) और ReactJS

Question

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

HATEOAS का उपयोग कर यूआई से व्यापार तर्क को दूर करने की वैचारिक उदाहरण:

• Delegating valid bank account actions to the REST service
• Delegating role-based access control to the REST service

मैं केवल एक लिंक है कि React/Flux is not compatible with a HATEOAS strategy पता चलता है, और कहीं कोई सार्थक चर्चा मिल गया है । क्या यह वास्तव में एक प्रतिक्रिया/प्रवाह ऐप में व्यवहार्य नहीं है? उस SO पोस्ट को पर्याप्त ध्यान नहीं मिला। क्या किसी के पास सफलता प्राप्त करने के लिए पसंदीदा या अनुशंसित दृष्टिकोण है (फ्लक्स या रेडक्स के साथ या उसके बिना)?

किसी ने leveraging HATEOAS in the context of Angular का एक विस्तृत विस्तृत उदाहरण दिया। मैं प्रतिक्रिया के लिए कुछ इसी तरह की तलाश में हूं।

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

मुझे लगता है कि हाइपरमीडिया लिंक HAL कार्यान्वयन द्वारा प्रदान किए जाते हैं, या अन्यथा एटीओएम फ़ीड सम्मेलन (RFC4287) के अनुरूप होते हैं।

Answer 1

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

यह मामला है, मुझे कोई कारण नहीं दिख रहा है कि आप अपने कार्यों में गतिशील यूआरएल AJAX कॉल क्यों लागू नहीं कर सकते हैं जो आपके एसपीए के आवेदन स्थिति (यानी रेडक्स) को आपके द्वारा प्रदान की गई चीज़ों के आधार पर बदल देगा, हालांकि , आपको अभी भी अपने आवेदन के सभी हिस्सों के लिए दृश्य तरीके से राज्य का प्रतिनिधित्व करने की आवश्यकता होगी।

// 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 
    }) 
} 

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

Answer 2

100% हेटोएस प्रतिक्रिया & फ्लक्स के साथ संगत है, हेटोएस कोणीय के साथ संगत है, हैटओएएस JQuery और यहां तक ​​कि वेनिला जेएस के साथ संगत है।

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

HATEOAS बस एक अवधारणा के लिए जो आप अपने एपीआई डिज़ाइन कर सकते हैं

मूल रूप से (आप कई मानकों हालांकि तरह HAL से एक का उपयोग कर सकते हैं) आप एक API कॉल तो आप एक HATEOAS ग्राहक लागू कर सकते हैं कर सकते हैं वास्तव में है।

तो कैसे वहाँ पाने के:

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

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

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

इस से

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

लेकिन अगर मैं निम्नलिखित प्रतिक्रिया प्राप्त किया था:

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

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

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