迴流：組件未從商店獲取觸發的事件

Question

從udemy獲得一個良好的React課程後，我使用Reflux創建商店，但商店觸發的事件無法被組件捕獲。

我的問題：爲什麼 使用ImageStore.orderImage（在component.jsx TODO 1）不工作：this.onChange不會被觸發，同時兼具ImageStore.getImage和Actions.orderImage工作。

感謝您的任何幫助。

內component.jsx：

mixins: [ 
    Reflux.listenTo(ImageStore,'onChange') 
    ], 

    componentWillMount: function() { 
    //TODO 1: why ImageStore.orderImage does not work: this.onChange will not be triggered 
    // ImageStore.orderImage(this.props.params.id);  // WHY this does not work? this.onChange will not be triggered. 
    // ImageStore.getImage(this.props.params.id);  // this works 
    Actions.orderImage(this.props.params.id);   // this works, will use this method 
    }, 

    onChange: function() { 
    console.log("imageComponent: get a new event from imageStore"); 
    this.setState({ 
     image: ImageStore.findImage(this.props.params.id) 
    }); 
    } 

內store.jsx

listenables: [Actions], 

    getImage: function (imageID) { 
    API.get('gallery/image/'+imageID) 
    .then(function(json){ 
     if(this.images){ 
     this.images.push(json.data); 
     } else { 
     this.images = [json.data]; 
     } 
     this.updateStore(); 
    }.bind(this)); 
    }, 

    orderImage: function (imageID) { 
    console.log("imageStore: get a new image order:", imageID); 
    var image = _.findWhere(this.images, {id:imageID}); 
    if (!image) { 
     this.getImage(imageID); 
     console.log("imageStore: I start to get image:", imageID); 
    } 
    else { 
     console.log("imageStore: I already have the image:", imageID); 
     this.trigger('change',this.images); 
     this.updateStore(); 
    } 
    }, 

    findImage: function (imageID) { 
    var image = _.findWhere(this.images, {id:imageID}); 
    if (image) { 
     return image; 
    } else { 
     return null; 
    } 
    }, 

    updateStore: function() { 
    console.log("imageStore: trigger the change"); 
    this.trigger('change',this.images); 
    } 

Answer 1

ImageStore.findImage是不冷靜。您想要使用某個操作讓商店執行查找圖像。然後觸發一個事件。伴隨着反流，您可以在選擇更新的觸發器中添加一個參數。

import Reflux from 'reflux'; 
 

 
import Actions from '../actions/sa.Actions'; 
 
import AddonStore from './Addon.Store'; 
 
import MixinStoreObject from './Mixin.Store'; 
 

 
function _GotData(data) { this.data1 = data; BasicStore.trigger('data1'); } 
 

 
let BasicStoreObject = { 
 
    init() { this.listenTo(AddonStore, this.onAddonTrigger); }, 
 
    data1: {}, 
 
    listenables: Actions, 
 
    mixins: [MixinStoreObject], 
 
    onGotData1: _GotData, 
 
    onAddonTrigger() { BasicStore.trigger('data2'); }, 
 
    getData1() { return this.data1; }, 
 
    getData2() { return AddonStore.data2; }, 
 
    getData3() { return this.data3; } 
 
} 
 
const BasicStore = Reflux.createStore(BasicStoreObject); 
 
export default BasicStore;

import React from 'react'; 
 

 
import BasicStore from '../stores/Basic.Store'; 
 

 
let AppCtrlSty = { 
 
    height: '100%', 
 
    padding: '0 10px 0 0' 
 
} 
 

 
const getState =() => { 
 
    return { 
 
    Data1: BasicStore.getData1(), 
 
    Data2: BasicStore.getData2(), 
 
    Data3: BasicStore.getData3() 
 
    }; 
 
}; 
 

 
class AppCtrlRender extends React.Component { 
 
    render() { 
 
    let data1 = JSON.stringify(this.state.Data1, null, 2); 
 
    let data2 = JSON.stringify(this.state.Data2, null, 2); 
 
    let data3 = JSON.stringify(this.state.Data3, null, 2); 
 
    return (
 
     <div id='AppCtrlSty' style={AppCtrlSty}> 
 
     React 0.14 ReFlux with SuperAgent<br/><br/> 
 
     Data1: {data1}<br/><br/> 
 
     Data2: {data2}<br/><br/> 
 
     Data3: {data3}<br/><br/> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default class AppCtrl extends AppCtrlRender { 
 
    constructor() { 
 
    super(); 
 
    this.state = getState(); 
 
    } 
 

 
    componentDidMount =() => { this.unsubscribe = BasicStore.listen(this.storeDidChange); } 
 
    componentWillUnmount =() => { this.unsubscribe(); } 
 
    storeDidChange = (id) => { 
 
    switch (id) { 
 
     case 'data1': this.setState({Data1: BasicStore.getData1()}); break; 
 
     case 'data2': this.setState({Data2: BasicStore.getData2()}); break; 
 
     case 'data3': this.setState({Data3: BasicStore.getData3()}); break; 
 
     default: this.setState(getState()); 
 
    } 
 
    } 
 
}