如何處理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