反應/回流數據流：DOM中一個組件兩次

Question

假設我有以下樹：

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

我們關心的組件是ShoppingCart 。

掛載（componentDidMount）后，ShoppingCart會觸發一個動作，以便ShoppingCartStore向服務器發出請求並返回商品列表-觸發ShoppingCart的重新呈現。

現在的設置方式將始終有兩個請求和兩個重發，因為這兩個組件都在dom中。

一種解決方案是讓公共根觸發這些請求，但這將是LandingPage-一種解決方案是必須通過PageHeader和Menu and 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。