反应和助焊剂 - 如何配合查看存储数据

Question

我开始学习与Flux的反应，我遇到了一些麻烦。

我有一个商店和两个视图（组件），我想更新一个视图，当商店数据发生变化时，但我不知道如何将两者结合在一起。

什么情况是这样的：

我点击视图按钮，该修改的存储数据，那么这应该更新视图中的两个。

厂景的onClick =>派遣行动=>修改存储数据=>更新视图2

我所拥有的一切，除了最后一部分，追平查看和更改时店里做实体店。目前所有这些都是修改类名，但我可以在稍后看到其他函数。

所以我的问题是，我如何将商店与视图状态联系起来？

视图2（首页）

var React = require('react'); 
var DefaultLayout = React.createFactory(require('../layouts/Default')); 
var ReactGridLayout = React.createFactory(require('react-grid-layout')); 

var desktopStore = require("../stores/DesktopStore"); 
// var classNames = require('classnames'); 

var HomePage = React.createClass({ 
    displayName: 'Index.jsx', 

    getInitialState: function(){ 
    return {zoomed: desktopStore.get('zoom')}; 
    }, 

    getDefaultProps: function() { 
    return { 
     layout: DefaultLayout 
    }; 
    }, 

    render: function() { 
    var parentClassString = "desktop"; // base class 

    if(this.state.zoomed){ 
     parentClassString += " zoomed"; // add a class based on the zoomed property 
    } 

    return (
     <div className={parentClassString}> 

      <ReactGridLayout className="layout" cols={80} rowHeight={30} verticalCompact={false} 
       initialWidth={10} autoSize={false} isResizable={false}> 
       <div key={1} _grid={{x: 0, y: 0, w: 1, h: 1}} >1</div> 
       <div key={2} _grid={{x: 0, y: 0, w: 1, h: 1}} >2</div> 
       <div key={3} _grid={{x: 0, y: 0, w: 1, h: 1}} >3</div> 
       <div key={4} _grid={{x: 0, y: 0, w: 1, h: 1}} >4</div> 
       <div key={5} _grid={{x: 0, y: 0, w: 1, h: 1}} >5</div> 
       <div key={6} _grid={{x: 0, y: 0, w: 1, h: 1}} >6</div> 
      </ReactGridLayout> 

     </div> 
    ); 
    } 
}); 

module.exports = HomePage; 

视图1（头）

var _name = 'TopHeader.jsx'; 
var React = require('react'); 
var DesktopApi = require('../utilities/DesktopApi'); 

var TopHeader = React.createClass({ 

    displayName: _name, 

    handleClick: function(){ 
    DesktopApi.toggleZoom(); // this goes to the dispatcher and emits a change to update the desktopStore 
    }, 

    render() { 
    return (
     <div className="top-header"> 
      <span>Header</span> 
      <span className="plus" onClick={this.handleClick}> [+] </span> 
     </div> 
    ); 
    } 

}); 

module.exports = TopHeader; 

Answer 1

的Facebook官方指南帮助在这里，我可以componentDidMount创建听众与componentWillUnmount

componentDidMount: function() { 
    desktopStore.addChangeListener(this._onChange); 
}, 

componentWillUnmount: function() { 
    desktopStore.removeChangeListener(this._onChange); 
}, 

_onChange: function(){ 
    this.setState({zoom: true}); 
} 

删除

Answer 2

如果你想创建一个mixin绑定v浏览商店，你可以阅读fluxxor的来源。以下是storeWatchMixin的示例。或者您可以使用higher order component来包装您的组件。