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