ReactJS Flux: Speicherdatenänderungen zwischen Komponenten erkennen (nicht Eltern-Kind-Beziehung)

Question

Ich habe zwei Komponenten; Menü und Info. Ich muss die Daten zwischen den beiden Komponenten teilen. Ich verwende Facebook Flux-Muster. Die Speicherklasse hat eine Änderungserkennung von EventEmitter. Die Erkennung funktioniert zwischen Eltern- und Kinderbeziehung.

Das Blau ist Menü. Das Rot ist eine Informationskomponente. Meine Website hat ReactJS vorher nicht benutzt. Ich versuche, ReactJS in einen Teil der Website zu verwenden. Ich denke, dass die Verwendung von ReactJS für die gesamte App eine mögliche Lösung ist, react-route ..?, Aber das kann ich in dieser Zeit nicht tun.

Weiß jemand darüber?

================================

Edit 1

posted ich mein ganzes Code zu diesem Gist.

https://gist.github.com/y-zono/e1abf9e85a4707d81286b49f6a7f0117

Mein Ziel ist es Menü und Info-Counter gleichen Wert. Jetzt wird nur der Menüzähler erhöht.

========================================= =======

EDIT2 Gelöst

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Menu = require('./components/Menu.react'); 
var Info = require('./components/Info.react'); 
var CommonStore = require('./stores/CommonStore'); 

function renderMenu() { 
    var state = CommonStore.getState(); 
    ReactDOM.render(
     <Menu data={state} />, 
     document.getElementById('menu') 
    ); 
} 

CommonStore.addChangeListener(renderMenu); 
renderMenu(); 

function renderInfo() { 
    var state = CommonStore.getState(); 
    ReactDOM.render(
     <Info data={state} />, 
     document.getElementById('info') 
    ); 
} 

CommonStore.addChangeListener(renderInfo); 
renderInfo(); 

Answer 1

Statt zu den Geschäften der Zeichnung an Ihrem Komponentenebene, warum nicht subsc ribe, wo Sie die Komponenten (z. menu.js)?

Sie könnten Ihren Rendering-Code in eine Funktion einfügen und in dieser Funktion den Status des Geschäfts lesen, bevor Sie ihn als Prop zu Ihrer Komponente übergeben. Sie würden render() manuell aufrufen ersten machen zu tun, sondern auch in den Laden subscribe die Funktion als Callback machen vorbei:

// menu.js 
var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Menu = require('./components/Menu.react'); 
var CommonStore = require('../stores/CommonStore'); 

function render() { 
    var state = CommonStore.getState(); 
    ReactDOM.render(
     <Menu data={state} />, 
     document.getElementById('menu') 
); 
} 

CommonStore.addChangeListener(render); 
render(); 

Hinweis: Ich bin nicht sicher, was Getter Ihr Geschäft hat, also habe ich einfach einen Beispielcode geschrieben.

Ihre Komponente Code würde dann einfach sein:

// ./components/Menu.react.js 
var React = require('react'); 
var CommonActionCreators = require('../actions/CommonActionCreators'); 

var Menu = React.createClass({ 
    _handleClickMenu: function() { 
     CommonActionCreators.setMenuClieckOn(); 
    } 
}); 

Und dann wiederholen Sie den Vorgang für die Info Komponente.

Diese Geige zeigt ein Beispiel für diesen Ansatz in der Praxis arbeiten (mit einigen Dummy-Komponenten, zu speichern und Action Schöpfer), um zu beweisen, dass das Konzept funktioniert: https://jsfiddle.net/vgskht45/1/

Answer 2

ich das Hauptproblem denke, ist Sie mit Ihrem Geschäft nicht den Zustand, in Ihren Komponenten einzustellen.

Info.react.js sollte sein:

var React = require('react'); 
var CommonStore = require('../stores/CommonStore'); 
var CommonActionCreators = require('../actions/CommonActionCreators'); 

var Info = React.createClass({ 
    componentDidMount: function() { 
     CommonStore.addChangeListener(this._handleChangeStore); 
    }, 
    componentWillUnmount: function() { 
     CommonStore.remChangeListener(this._handleChangeStore); 
    }, 
    getInitialState() { 
     return { 
      clickFlag: CommonStore.getClickFlag() 
     }; 
    }, 
    _handleChangeStore: function() { 
     this.setState(clickFlag: CommonStore.getClickFlag(); 
     if (this.state.clickFlag) { 
      console.log("menu is clicked"); // I want to detect the change. 
     } 
    }, 
}); 

Zusätzlich wollen Sie eine Bedingung haben, die Ihre clickFlag zurücksetzt.

UPDATE:

an Ihrem Code suchen, sollten Sie jede Komponente nicht ihre eigenen separaten <script> verwenden. Stattdessen sollten Sie eine zentrale js (häufig app.js genannt) haben, die dann sowohl die Menü- als auch die Informationskomponenten anzeigt. Sie brauchen dann das Menü nicht in js/menu.js und js/components/Menu.react.js zu trennen. Ebenso sollten Sie die Informationskomponente nicht in js/info.js und js/components/Menu.react.js trennen. Sie sollten nur js/components/Menu.react.js und js/components/Info.react.js haben, wobei app.js das erledigt, was Sie gerade js/menu.js und js/info.js machen.

Beispiel:

index.html

<div> 
    <div id="app"></div> 
</div> 

<script src="js/app.js"></script> 

app.js

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Menu = require('./components/Menu.react'); 
var Info = require('./components/Info.react'); 

function renderDOM() { 
    ReactDOM.render(
     <App />, 
     document.getElementById('app') 
    ); 
} 

renderDOM(); 

Info.react.js

var Info = React.createClass({ 
    componentDidMount: function() { 
     CommonStore.addChangeListener(this._handleChangeStore); 
    }, 
    componentWillUnmount: function() { 
     CommonStore.remChangeListener(this._handleChangeStore); 
    }, 
    getInitialState() { 
     return { 
      count: CommonStore.getState() 
     }; 
    }, 
    _handleChangeStore: function() { 
     this.setState(count: CommonStore.getState(); 
    }, 
    render: function() { 
     return (
      <div> 
       info: {this.state.count} 
      </div> 
     ); 
    }, 
});