如何處理Flux / React中的數據更改？

Question

到目前為止，我通過兩個官方的Flux架構示例（ https://github.com/facebook/flux ）進行了徹底的工作。

但是，我真的不確定在初始數據渲染后如何完成數據更改。

例如，假設由於服務器響應，示例中的todo項目發生了更改，如何在不使用項目組件中的setProps（）的情況下正確更新相應項目（實際上，據我所知，禁止） ？

這可能更多與React相關的誤解 - 期待您的建議！

Answer 1

flux的想法是每次商店更改時，將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>
        );
    }
});

此示例組件的作用是呈現駐留在名為ItemStore的商店中的this.state.items列表，並由ItemStore.getItems()訪問。 所以看看在componentDidMount它獲取商店，結合一個回調每當商店改變onStoreChange ，然后設置的電流分量的狀態items ，以所提供的項目陣列store.getItems()

因此，當組件首次安裝時，它從商店獲取當前項並顯示它們，每當商店更改它將執行onStoreChange ，它再次從商店獲取項目並通過this.setState()再次設置它們。

當然，我們希望保持干凈，因此該組件在卸載組件時也會刪除onStoreChange綁定。

注意：請記住，在componentDidMount中調用this.setState() 不會導致組件重新渲染:)

有關這方面的更多信息，請訪問facebook-flux文檔： http ： //facebook.github.io/flux/docs/todo-list.html#listening-to-changes-with-a-controller-view