如何处理Flux/React中的数据更改？

Question

到目前为止，我通过两个正式的Flux体系结构示例（https://github.com/facebook/flux）非常全面地工作。

但是，我真的不确定您将如何完成初始数据渲染后的数据更改。

例如，假设由于服务器响应，示例中的待办事项发生更改，如何实现相关项目正确更新而不使用项目组件中的setProps（）（就我而言理解，禁止）？

这可能是更多与反应有关的误解 - 期待您的建议！

Answer 1

带助推的想法在于，每当存储发生更改时，都会将React组件的内部状态（或其一部分）设置为来自存储的对象或值。

因此，例如，像这样（没有真正的代码，而是给你一个想法）：

var Component = react.createClass({ 
    getInitialState: function() { 
     return { 
      items: Flux.getStore("ItemStore").getItems() 
     } 
    }, 

    componentDidMount: function() { 
     this.store = Flux.getStore("ItemStore"); 
     this.store.addChangeListener(this.onStoreChange) 
    }, 

    componentWillUnmount: function() { 
     this.store.removeChangeListener(this.onStoreChange); 
    }, 

    onStoreChange: function() { 
     this.setState({ 
      items: this.store.getItems() 
     }); 
    }, 

    render: function() { 

     var items = []; 
     for (var i = 0; i < this.state.items; i++) { 
      items.push(
       <li key={i}>{this.state.items[i]}</li> 
      ); 
     } 

     return (
      <ul>{items}</ul> 
     ); 
    } 
}); 

什么这个例子成分的作用是使驻留在一家商店的this.state.items列表称为ItemStore并访问ItemStore.getItems()。因此，请查看获取商店的componentDidMount，并在每次更改商店时绑定回调onStoreChange，然后将items的当前组件状态设置为由store.getItems()提供的商品数组。

因此，当组件第一次安装时，它会从商店获取当前商品并显示它们，只要商店更改它将执行onStoreChange，该商店将再次从商店获取商品并通过this.setState()再次设置商品。

当然，我们希望保持清洁，因此此组件在拆卸组件时也会删除onStoreChange绑定。

注：记住，调用this.setState()内componentDidMount不不事业的组成部分重新渲染:)

更多关于这个Facebook的通量文档在这里：http://facebook.github.io/flux/docs/todo-list.html#listening-to-changes-with-a-controller-view