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

React and Flux - how to tie view to store data

本文关键字：绑定 视图 数据 存储 Flux 何绑定 React      更新时间：2023-09-26

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

我有一个商店和两个视图(组件)，当商店数据发生变化时，我想更新一个视图，但我不确定如何将两者联系在一起。

结果是这样的:

我点击视图1中的一个按钮，这修改了存储中的数据，然后这应该更新视图2。

view1 onClick => dispatch action => modify store data => update view2

我拥有了所有内容，除了最后一部分，当对存储进行更改时将视图和存储绑定在一起。目前所做的一切都是修改类名，但我可以在后面看到它的其他函数。

所以我的问题是，我如何将存储绑定到视图的状态?

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;

View1(头)

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;

官方facebook指南在这里提供了帮助，我可以使用componentDidMount创建侦听器，并使用componentWillUnmount删除它们

componentDidMount: function() {
  desktopStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
  desktopStore.removeChangeListener(this._onChange);
},
_onChange: function(){ 
    this.setState({zoom: true});
}

如果你想创建一个mixin来将视图绑定到store，你可以阅读fluxxor的源代码。下面是storeWatchMixin的示例。或者你可以使用更高阶的组件来包装你的组件。

相关文章：