प्रतिक्रिया: ऐपस्टोर श्रोता एक समारोह होना चाहिए

Question

साथी देव!

मैं अंडेहेड पर ट्यूटोरियल के लिए धन्यवाद के साथ फ्लक्स/प्रतिक्रिया में खुदाई कर रहा हूं। हालांकि मैंने सुना है कि प्रतिक्रिया चल रही है, मैंने ट्यूटोरियल का पालन करते हुए प्रतिक्रिया पुस्तकालय में कुछ बदलावों के साथ मुलाकात की है।

अब तक मैं उन सभी को ठीक करने में सक्षम हूं। अब, मैं स्टोर से संबंधित एक ईंट की दीवार में भाग गया है। ट्यूटोरियल कहता है, मैं एक शॉपिंग कार्ट बना रहा हूं, जिसमें उपयोगकर्ता अपने कार्ट में चीजें जोड़ सकता है। जटिल नहीं है। वास्तविक जोड़ कार्य करता है, लेकिन पुनः प्रतिपादन ट्रिगर नहीं किया जाता है।

addChangeListener: function(callback) { 
    this.on(CHANGE_EVENT, callback); 
}, 

कौन सा Uncaught TypeError में परिणाम है: निम्नलिखित कोड जोड़ा त्रुटि (पूर्ण कोड के साथ-साथ नीचे सूचीबद्ध हो जाएगी) देता है श्रोता एक समारोह होना चाहिए। कॉलबैक पैरामीटर अनिर्धारित है (इसलिए वह समस्या है जहां समस्या है)। हालांकि, क्योंकि मैं काम करने के नए प्रतिक्रिया के तरीके से अधिक हूं, मुझे समस्या का पता लगाने में परेशानी हो रही है। निम्नलिखित स्निपेट ट्यूटोरियल से स्टोर है:

var AppStore = assign(EventEmitter.prototype, { 

    emitChange: function() { 
     this.emit(CHANGE_EVENT); 
    }, 
    addChangeListener: function(callback) { 
     this.on(CHANGE_EVENT, callback); 
    }, 
    removeChangeListener: function(callback) { 
     this.removeChangeListener(CHANGE_EVENT, callback); 
    }, 
    getCart: function() { 
     return _cartItems; 
    }, 
    getCatalog: function() { 
     return _catalog; 
    }, 
    getCartTotals: function() { 
     return _cartTotals(); 
    }, 
    dispatcherIndex: AppDispatcher.register(function (payload) { 
     var action = payload.action; 

     switch(action.actionType) { 
      case AppConstants.ADD_ITEM: 
       _addItem(payload.action.item); 
       break; 
      case AppConstants.REMOVE_ITEM: 
       _removeItem(payload.action.index); 
       break; 
      case AppConstants.INCREASE_ITEM: 
       _increaseItem(payload.action.index); 
       break; 
      case AppConstants.DECREASE_ITEM: 
       _decreaseItem(payload.action.index); 
       break; 
     } 

     AppStore.emitChange(); 

     return true; 
    }) 
}); 

लें ध्यान दें कि यह Egghead.io पर एक ट्यूटोरियल से कोड है और मैं कोई रास्ता नहीं में स्वामी हूं (और यदि वे चाहें तो मैं निकाल देंगे कोड कहा)।

यदि अधिक कोड या स्पष्टीकरण की आवश्यकता है, तो मुझे खुशी होगी!

धन्यवाद लोग :)

संपादित करें 1: घटक है कि बदलने के लिए सुनने के लिए माना जाता है, लेकिन नहीं करता है:

var Cart = React.createClass({ 

    getInitialState: function() { 
     return cartItems(); 
    }, 
    componentWillMount: function() { 
     debugger; 
     AppStore.addChangeListener(this.onChange); 
    }, 
    componentDidMount: function() { 
     debugger; 
     AppStore.addChangeListener(this.handleChange); 
    }, 
    handleChange: function() { 
     debugger; 
     this.forceUpdate(); 
    }, 
    _onChange: function() { 
     debugger; 
     this.setState(cartItems()); 
    }, 
    render: function() { 
     var total = 0; 
     var items = this.state.items.map(function (item, i) { 
      var subtotal = item.cost * item.qty; 
      total +=subtotal; 
      return (
       <tr key={i}> 
        <td><RemoveFromCart index={i} /></td> 
        <td>{item.title}</td> 
        <td>{item.qty}</td> 
        <td> 
         <Increase index={i} /> 
         <Decrease index={i} /> 
        </td> 
        <td>${subtotal}</td> 
       </tr> 
      ); 
     }); 

     return (
      <table className="table table-hover"> 
       <thead> 
        <tr> 
         <th></th> 
         <th>Item</th> 
         <th>Qty</th> 
         <th></th> 
         <th>Subtotal</th> 
        </tr> 
       </thead> 
       <tbody> 
        {items} 
       </tbody> 
       <tfoot> 
        <tr> 
         <td colSpan="4" className="text-right">Total</td> 
         <td>${total}</td> 
        </tr> 
       </tfoot> 
      </table> 
     ); 
    } 
}); 

Answer 1

मेरे लिए

, यह लगता है कि आप बाहर इस का सबसे काम किया है पैटर्न लेकिन आप थोड़ा उलझन में मिला है। एक आखिरी कदम है जिसे आपको शामिल करने की आवश्यकता है, और यह वास्तव में आपके घटकों को उन घटनाओं के लिए सब्सक्राइब कर रहा है, जो स्टोर बाहर धकेल रहे हैं।

this.emit(CHANGE_EVENT); 

यह केवल कुछ बाहर धक्का देगा। अगर कोई भी नहीं सुन रहा है, तो कुछ भी बदलने के बारे में पता नहीं चलेगा, इसलिए आपके घटकों में, आपको वास्तव में इस घटना को सुनना होगा।

एक घटक के लिए, ऐसा ही कुछ दिख सकता है:

React.createClass({ 
    componentDidMount: function() { 
     // Called after react has rendered the HTML in the DOM. 
     AppStore.addChangeListener(this.handleChange); 
    }, 

    render: function() { 
     return <div>{AppStore.someData}</div> 
    }, 

    handleChange: function() { 
     this.forceUpdate(); 
    } 
}); 

नोट: this.emitaddChangeListener नहीं बुला जाना चाहिए। addChangeListener विधि का उपयोग कर सब्सक्राइब पर कॉलबैक को ट्रिगर करना चाहिए।

संभावित सुधार

• एक बात ध्यान रखें कि, के बावजूद अपने सभी डेटा AppStore में किया जा रहा है, अपने सभी घटकों को नहीं डेटा के सभी के बारे में परवाह नहीं है। उदाहरण के लिए, यदि आपके पास Name घटक है, जो उपयोगकर्ता नाम प्रदान करता है, तो वे केवल NAME_CHANGE_EVENT पर ध्यान देते हैं। वे हर बार थोड़ी सी चीज होने पर पुनः प्रस्तुत नहीं करना चाहते हैं। यह प्रतिक्रिया द्वारा अनावश्यक प्रसंस्करण है, हालांकि प्रतिक्रिया अनुमान लगाएगी कि कुछ भी नहीं बदला है और डीओएम अपडेट नहीं होगा।