反應，和/迴流數據流：在DOM

Question

單組分兩次

假設我有樹如下：

<LandingPage> 
    <PageHeader> 
     <Menu> 
      <ShoppingCart> 
     </Menu> 
    </PageHeader> 
    <MainPage> 
     <ShoppingCart> 
    </MainPage> 
</LandingPage> 

我們關心的組件是我的購物。

安裝它（componentDidMount）時，ShoppingCart會觸發一個操作，以便ShoppingCartStore向服務器發出請求並返回文章列表 - 觸發ShoppingCart的重新呈現。

它現在設置的方式，總是會有兩個請求和兩個rerender，因爲這兩個組件都在dom中。

一個解決方案是讓公共根觸發這些請求，但這將是LandingPage - 而且必須通過PageHeader和Menu和MainPage傳遞數據。

有沒有更好的解決方案？這足夠好嗎？

Answer 1

我對所有數據請求使用api.store。我在條目app.js中調用了api.store。然後，我使用api.store偵聽初始數據請求的操作。 app.js

'use strict'; 
 

 
import React from 'react'; 
 
import ReactDom from 'react-dom'; 
 

 
import AppCtrl from './components/app.ctrl.js'; 
 
import Actions from './actions/api.Actions'; 
 
import ApiStore from './stores/Api.Store'; 
 

 
window.ReactDom = ReactDom; 
 

 
Actions.apiInit(); 
 

 
ReactDom.render(<AppCtrl />, document.getElementById('react'));

api.store

import Reflux from 'reflux'; 
 

 
import Actions from '../actions/api.Actions'; 
 
import ApiFct from '../utils/sa.api'; 
 

 
let ApiStoreObject = { 
 
    newData: { 
 
    "React version": "0.14", 
 
    "Project": "ReFluxSuperAgent", 
 
    "currentDateTime": new Date().toLocaleString() 
 
    }, 
 
    listenables: Actions, 
 
    apiInit() { ApiFct.setData(this.newData); }, 
 
    apiInitDone() { ApiFct.getData(); }, 
 
    apiSetData(data) { ApiFct.setData(data); } 
 
} 
 
const ApiStore = Reflux.createStore(ApiStoreObject); 
 
export default ApiStore;

在連接到存儲初始狀態調用存儲數據的組件，因此，如果數據已經在那裏你得到它。

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()); 
 
    } 
 
    }; 
 
}

從https://github.com/calitek/ReactPatterns React.14/ReFluxSuperAgent。