React 和 Flux - 如何绑定视图来存储数据

Question

我开始使用 Flux 学习 React，但遇到了一些麻烦。

我有一个商店和两个视图（组件），我想在商店数据更改时更新一个视图，但我不确定如何将两者联系在一起。

这是怎么回事：

我在视图 1 中单击一个按钮，这会修改商店中的数据，然后这应该会更新视图二。

view1 onClick => dispatch action => 修改商店数据 => update view2

除了最后一部分，我拥有所有内容，在对商店进行更改时绑定视图和商店。目前所做的只是修改一个 class 名称，但稍后我可以看到它的其他功能。

所以我的问题是，我怎样才能将商店绑定到视图的状态？

view2（主页）

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 来将视图绑定到商店，你可以阅读 fluxxor 的源代码。这是 storeWatchMixin. Or you can use higher order component 包装组件的示例。

React 和 Flux - 如何绑定视图来存储数据

React and Flux - how to tie view to store data

javascript

flux

reactjs

react-jsx