2016-04-15 4 views
7

मैंने हाल ही में रिएक्ट-रेडक्स-एक्सप्रेस-मोंगोस स्टैक का उपयोग करके कुछ आइसोमोर्फिक/यूनिवर्सल प्रोजेक्ट्स का निर्माण किया है।आइसोमोर्फिक में डेटा मॉडल और व्यावसायिक तर्क (प्रतिक्रिया/रेडक्स/एक्सप्रेस/मोंगो) ऐप

मेरे मोंगोज़ मॉडल में बहुत सारे व्यवसाय-तर्क शामिल हैं। एक बहुत ही बुनियादी उदाहरण (बहाना मेरी ES6) के रूप में:

import mongoose, {Schema} from 'mongoose'; 

const UserSchema = new Schema({ 
    name: String, 
    password: String, 
    role: String 
}); 

UserSchema.methods.canDoSomeBusinessLogic = function(){ 
    return this.name === 'Jeff'; 
}; 

UserSchema.methods.isAdmin = function(){ 
    return this.role === 'admin'; 
}; 

इस सर्वर पर सभी महान है, लेकिन जब इन मॉडलों सादा JSON ऑब्जेक्ट के रूप ब्राउज़र में हाइड्रेटेड हैं, मैं तो यह एक ही व्यवसाय को फिर से लागू करने के लिए है कुछ प्रतिक्रिया घटक या रेडक्स reducer में तर्क, जो मुझे बहुत साफ महसूस नहीं करता है। मैं सोच रहा हूं कि इस तक कैसे पहुंचे।

मोंगोस के आसपास पढ़ने से, ब्राउज़र प्रमाणीकरण के लिए सीमित ब्राउज़र समर्थन लगता है। कुछ "सामान्य" जे एस वर्गों में

  • ले जाएँ सभी व्यापार तर्क है, और हर जगह उन का दृष्टांत: मुझे लगता है कि मेरी मुख्य विकल्प हैं। उदाहरण के लिए:

    # JS Class definition - classes/user.js 
    export default class User { 
        constructor(data = {}){ 
         Object.assign(this,data); 
        } 
    
        canDoSomeBusinessLogic(){ 
         return this.name === 'Jeff'; 
        }; 
    
        isAdmin(){ 
         return this.role === 'admin'; 
        } 
    } 
    
    # Server - api/controllers/user.js 
    import UserClass from 
    User.findById(1,function(err,user){ 
        let user = new UserClass(user.toJSON(); 
    }); 
    
    # Client - reducers/User.js 
    export default function authReducer(state = null, action) { 
        switch (action.type) { 
        case GET_USER: 
         return new UserClass(action.response.data); 
        } 
    } 
    
    # Client - containers/Page.jsx 
    import {connect} from 'react-redux'; 
    
    @connect(state => ({user: state.user})) 
    export default class Page extends React.Component { 
        render(){ 
         if(this.props.user.isAdmin()){ 
         // Some admin 
         } 
        } 
    } 
    
  • सभी व्यावसायिक तर्क को कुछ स्थिर सहायक कार्यों में ले जाएं। मैं फिर से पूरे उदाहरण बाहर लिखेंगे नहीं है, लेकिन अनिवार्य रूप से:

    # helpers/user.js 
    export function isAdmin(user){ 
        return user.role === 'admin'; 
    } 
    

मैं ऊपर 2 के बीच अंतर लगता है सिर्फ व्यक्तिगत वरीयता है। लेकिन क्या किसी के पास आइसोमोर्फिक ऐप्स और डेटा मॉडलिंग के बारे में कोई अन्य विचार है? या इस समस्या को हल करने वाले लोगों का कोई खुला स्रोत उदाहरण देखा है।

उपरोक्त के विस्तार के रूप में, एक आइसोमोर्फिक सेव() फ़ंक्शन उदा। User.save()। इसलिए यदि क्लाइंट पर कॉल किया गया तो यह प्रासंगिक एपीआई एंडपॉइंट पर एक पोस्ट कर सकता है, और यदि सर्वर पर चलाया जाता है तो यह मोंगोस सेव() फ़ंक्शन को कॉल करेगा।

उत्तर

1

स्पोइलर: एक उत्तरदायी उत्तर की उम्मीद करें। ऐसा करने का कोई 'सही' तरीका नहीं है।

सबसे पहले, मैं, difference between isomorphic and universal स्पष्ट बनाना चाहते हैं ताकि आप जानते हैं कि हम वास्तव में क्या बात कर रहे हैं:

समाकृतिकता मूल ग्राहक और सर्वर साइड प्रतिपादन के बीच स्विच करने के कार्यात्मक पहलू है राज्य खोने के बिना। सार्वभौमिक शब्द इस तथ्य पर जोर देने के लिए प्रयोग किया जाता है कि जावास्क्रिप्ट कोड का एक विशेष भाग कई वातावरण में चलाने में सक्षम है।

क्या यह एक सार्वभौमिक ऐप में इतना अमूर्त है?

आम तौर पर आप जो सार्वभौमिक ऐप चाहते हैं वह क्लाइंट और सर्वर है जो ऐप को एक ही कोड लोड करने से पूर्व-प्रस्तुत करता है। यद्यपि आप एपीआई को उसी सर्वर से चला सकते हैं जो ऐप को प्री-रेंडर करता है, मैं इसे प्रॉक्सी कर दूंगा और इसे एक अलग प्रक्रिया में चलाऊंगा।

Erikras प्रसिद्ध बॉयलरप्लेट विश्व स्तर पर निर्भरता साझा करने के लिए अपने सार्वभौमिक एप्लिकेशन का उपयोग करता है, और कोड:

मैं आपको दो अलग-अलग प्रतिक्रिया खजाने दिखाने दें उस सर्वर के बीच जो पृष्ठ और क्लाइंट को पूर्व-प्रस्तुत करता है। हालांकि वह कर सकता था, वह सत्यापन साझा नहीं करता है। Survey API validationSurvey client validation

वेललीशेन में कोई एपीआई नहीं है, लेकिन वह केवल सर्वर और क्लाइंट के बीच अपनी निर्भरता और कोड साझा करता है। server क्लाइंट ऐप द्वारा चलाए जा रहे मार्ग, स्टोर और सब कुछ लोड करता है। यह आइसोमोर्फिज्म प्रदान करना है।

यह कहकर, यह आपके ऊपर है कि सभी सत्यापन एक स्थान पर ले जाएं या नहीं। मैं शायद इसे जटिल सत्यापन मामलों के बारे में सोचूंगा, जैसे ईमेल सत्यापन, जिसके लिए आप वास्तव में सहायक हो सकते हैं। (यह केवल एक उदाहरण था, ईमेल सत्यापन के लिए आपके पास पहले से ही validator है)। कुछ अवसरों में, एपीआई सत्यापन पर भरोसा करना अधिक सुविधाजनक हो सकता है, भले ही सर्वश्रेष्ठ अभ्यास न हो।

सरल उदाहरण, जैसे कि आपके उदाहरणों में से, redux-form के साथ आसानी से किया जा सकता है, जो मुझे पता है कि एपीआई पर इसका अनुवाद करने का कोई सीधा तरीका नहीं है। इसके बजाय आपको शायद express-validator पर देखना चाहिए।

एक और बात यह है कि इस तथ्य के बावजूद कि कुछ बहुत लोकप्रिय रिएक्ट बॉयलरप्लेट्स में एपीआई और क्लाइंट एक साथ होगा, मैं दो अलग-अलग भंडारों के साथ काम करता हूं: प्रतिक्रिया + सर्वर-साइड प्रतिपादन और एपीआई। लंबे समय तक चलने के परिणामस्वरूप इसका एक क्लीनर कोड होगा जो दूसरे से पूरी तरह से स्वतंत्र होगा। organizing-large-react-applications

संबंधित मुद्दे

 संबंधित मुद्दे