प्रतिक्रिया/प्रवाह

Question

में स्टोर डेटा निर्भरता प्रबंधित करना मेरे पास फेसबुक के फ्लक्स आर्किटेक्चर का उपयोग करके एक वेब ऐप विकसित किया गया है। पृष्ठ में दो विचार हैं: एक TODO आइटम की एक सूची प्रदर्शित करता है। दूसरा दृश्य TODO आइटमों का यादृच्छिक सेट प्रदर्शित करता है।

स्पष्ट रूप से दो चिंताएं हैं जिन्हें स्टोर द्वारा प्रबंधित करने की आवश्यकता है। पहला उपलब्ध TODO की सूची है। दूसरा यादृच्छिक रूप से चयनित TODO आइटमों की सूची है।

इस प्रकार मेरे पास TODOStore है, जो चिंता केवल उपलब्ध TODO आइटमों का प्रबंधन करने का है। इसमें loadTODOs, addTODO, deleteTODO, editTODO पर कार्रवाई है। स्टार्टअप पर, यह स्टोर सभी TODO आइटम लोड नहीं करता है। मैं चाहता हूं कि जब आवश्यक हो तो डेटाबेस से TODO आइटमों की सूची पुनर्प्राप्त करें।

दूसरा स्टोर RandomTODOListStore है। यादृच्छिक रूप से चयनित TODO आइटमों का प्रबंधन करना ज़िम्मेदारी है। मुझे लगता है कि RandomTODOListStore को TODOStore के माध्यम से TODOStore.getTODOItems() का उपयोग करके TODO आइटमों तक पहुंच प्राप्त करनी चाहिए।

function RandomTODOListStore() { 
    var $randomTODOs = []; 

    dispatcher.register(function(payload) { 
     var action = payload.action; 

     switch (action.actionType) { 
      case Constants.LOAD_RANDOM_TODO: 
       loadRandomTODO(); 
       break; 
     } 
    }); 

    function loadRandomTODO() { 
     $randomTODOs = selectRandom(TODOStore.getTODOList()); 
     emit("change"); 
    } 
} 

इस के साथ

मुद्दा यह है कि, जैसा कि पहले कहा गया है, TODOStore स्टार्टअप पर TODO आइटम लोड नहीं करता है।

सवाल यह है: "कैसे RandomTODOListStore गारंटी नहीं है कि पहले से ही TODOStore TODO आइटम लिया गया है करता है"।

Answer 1

मैं इस बारे में सोच रहा है क्यों फ्लक्स वास्तुकला mentionned here

आप अपनी दुकानों सिंक करने के लिए चाहते हैं waitFor विधि के साथ दुकानों सिंक्रनाइज़ करने के लिए की जरूरत का उल्लेख है, अपने RandomTODOListStore शायद तरह दिखना चाहिए:

case Constants.LOAD_RANDOM_TODO: 
    Dispatcher.waitFor([TodoStore.dispatcherIndex],this.loadRandomTODO); 
    break; 

फिर अपने टोडोस्टोर पर, आप Constants.LOAD_RANDOM_TODO पर प्रतिक्रिया कर सकते हैं और टोडोस की सूची लोड कर सकते हैं यदि वे अभी तक लोड नहीं हैं।

हालांकि मुझे लगता है कि यह अधिक जटिल है, और शायद आपको यादृच्छिक टोडोस के लिए एक और स्टोर नहीं बनाना चाहिए क्योंकि यह स्टोर (मुझे लगता है) हमेशा असली todo स्टोर में प्रतिनिधि होगा। बस TodoStore.getRandom() का उपयोग बजाय

संपादित:

हाँ TodoStore पता करने के लिए इसे उपयोग किए जाने की जरूरत नहीं है। इस प्रकार जब आप एक यादृच्छिक कार्य करने की प्राप्त करना चाहते हैं, तो आप शायद Constants.LOAD_TODOS की तरह एक ही घटना का उपयोग करें, उपयोग कर सकते हैं और उसके बाद दोनों घटकों समवर्ती ईवेंट सक्रिय हैं TodoStore.getTodos()[randomIndex]

साथ उस दुकान से एक यादृच्छिक कार्य करने होंगे, तो आप 2 अनदेखा कर सकते हैं

case Constants.TODOS_LOADED: 
    this.randomTodos = randomSubset(TodoStore.getTodos,subsetSize); 
    break; 

आप Async exemple from Fluxxor से अपने आप को प्रेरित करते हैं कर सकते हैं:: async डेटा के लिए घटना

एक अन्य समाधान RandomTODOListStore है भरी हुई घटना पर प्रतिक्रिया और उन्हें RandomTODOListStore में डालने के लिए मुख्य दुकान के कुछ सब चयन करने के लिए है , केवल एक ही नहीं है घटना को निकाल दिया गया है लेकिन 2 (कमांड + सफलता/विफलता)

Answer 2

आपके RandomTODOListStore को TODOStore के लिए प्रतीक्षा करने की आवश्यकता है।आप आसानी से इस पुस्तकालय (मेरा) https://github.com/kjda/ReactFlux

var ReactFlux = require('react-flux'); 

var TODOConstants = ReactFlux.createConstants(['LOAD'], 'TODO'); 

var TODOActions = ReactFlux.createActions({ 
    load: [TODOConstants.TODO_LOAD, function(){ 
     //load your todos here 
     return { todos: [{title: 'do this'}, {title: 'do that'}]} 
    }] 
}); 

var TODOStore = ReactFlux.createStore({ 
    getTodos: function(){ 
     return this.getState().todos; 
    } 
}, [ 
    [TODOConstants.TODO_LOAD_SUCCESS, function(payload){ 
     this.setState({ 
      todos: payload.todos 
     }); 
    }] 
]); 

var RandomTODOListStore = ReactFlux.createStore({ 
    selectRandomFromList: function(todos){ 
     //..... select some here 
    } 
}, [ 

    /** 
    * This waits for TODOStore to process the message first 
    */ 
    [TODOConstants.TODO_LOAD_SUCCESS, [TODOStore], function(payload){ 
     this.selectRandomFromList(payload.todos); 
    }] 

]); 

अब

का उपयोग कर अपने ऐप तुम सिर्फ

TODOActions.load() कॉल कार्रवाई करने की जरूरत है शुरू होता है इस लक्ष्य को हासिल कर सकते हैं;

Answer 3

प्रस्तावित फ्लक्स कार्यान्वयन स्टोर को सिंक्रनाइज़ करने के लिए waitFor विधि का उपयोग करता है। मैंने दुकानों को अन्य स्टोरों को सुनने में सक्षम होने के कारण इसे और अधिक आसानी से संभालने के लिए Reflux बनाया। उस सुविधा का प्रभाव यह है कि यह गारंटी देगा कि श्रृंखला में पिछले स्टोर ने इसका डेटा संभाला है।

इंटरफ़ेस थोड़ा अलग है, क्योंकि रेफ्लक्स क्रियाओं को समझने के लिए स्ट्रिंग स्थिरांक पर निर्भर नहीं है, इसलिए यहां एक उदाहरण है।

var TodoActions = Reflux.createActions(['load']); 

var todoStore = Reflux.createStore({ 
    init: function() { 
     // Listen to the load action 
     this.listenTo(TodoActions.load, this.loadActions); 
    }, 
    loadActions: functions() { 
     var loadedActions = []; 
     // load your actions into loadedActions 
     // and do then the following inside the ajax 
     // callback when it is done: 
     this.trigger(loadedActions); 
    } 
}); 

var randomTodoStore = Reflux.createStore({ 
    init: function() { 
     // You may listen to stores as well 
     this.listenTo(todoStore, onLoadedActions); 
    }, 
    onLoadedActions: function(loadedActions) { 
     // loaded actions will be passed in from the 
     // dotoStores change event trigger 

     // you may do your select random from loaded 
     // actions list 
    } 
}); 

// Invoke the action 
TodoActions.load(); 

आशा है कि यह समझ में आता है।