React：AppStore 监听器必须是一个函数

Question

各位开发者！

感谢 Egghead 的教程，我一直在深入研究 Flux / React。虽然我听说 React 正在移动，但我在遵循上述教程时遇到了 React 库中的一些变化。

到目前为止，我已经能够解决所有问题。现在，我遇到了关于商店的砖墙。正如教程所述，我正在制作一个购物车，用户可以在其中将东西添加到他们的购物车中。没那么复杂。实际添加有效，但未触发重新渲染。下面的代码给出了添加的错误（下面也会列出完整的代码）：

addChangeListener: function(callback) {
    this.on(CHANGE_EVENT, callback);
},

这会导致 Uncaught TypeError: listener must be a function。回调参数未定义（这就是问题所在）。然而，因为我不仅仅是新的 React 的工作方式，我在定位问题时遇到了麻烦。以下 sn-p 是教程中的 Store：

var AppStore = assign(EventEmitter.prototype, {

    emitChange: function() {
        this.emit(CHANGE_EVENT);
    },
    addChangeListener: function(callback) {
        this.on(CHANGE_EVENT, callback);
    },
    removeChangeListener: function(callback) {
        this.removeChangeListener(CHANGE_EVENT, callback);
    },
    getCart: function() {
        return _cartItems;
    },
    getCatalog: function() {
        return _catalog;
    },
    getCartTotals: function() {
        return _cartTotals();
    },
    dispatcherIndex: AppDispatcher.register(function (payload) {
        var action = payload.action;

        switch(action.actionType) {
            case AppConstants.ADD_ITEM:
                _addItem(payload.action.item);
                break;
            case AppConstants.REMOVE_ITEM:
                _removeItem(payload.action.index);
                break;
            case AppConstants.INCREASE_ITEM:
                _increaseItem(payload.action.index);
                break;
            case AppConstants.DECREASE_ITEM:
                _decreaseItem(payload.action.index);
                break;
        }

        AppStore.emitChange();

        return true;
    })
});

请注意，这是来自 Egghead.io 教程的代码，我绝不是所有者（如果他们愿意，我将删除所述代码）。

如果需要更多代码或解释，我很乐意提供帮助！

谢谢大家:)

编辑 1：应该监听更改但没有更改的组件：

var Cart = React.createClass({

    getInitialState: function() {
        return cartItems();
    },
    componentWillMount: function() {
        debugger;
        AppStore.addChangeListener(this.onChange);
    },
    componentDidMount: function() {
        debugger;
        AppStore.addChangeListener(this.handleChange);
    },
    handleChange: function() {
        debugger;
        this.forceUpdate();
    },
    _onChange: function() {
        debugger;
        this.setState(cartItems());
    },
    render: function() {
        var total = 0;
        var items = this.state.items.map(function (item, i) {
            var subtotal = item.cost * item.qty;
            total +=subtotal;
            return (
                <tr key={i}>
                    <td><RemoveFromCart index={i} /></td>
                    <td>{item.title}</td>
                    <td>{item.qty}</td>
                    <td>
                        <Increase index={i} />
                        <Decrease index={i} />
                    </td>
                    <td>${subtotal}</td>
                </tr>
            );
        });

        return (
            <table className="table table-hover">
                <thead>
                    <tr>
                        <th></th>
                        <th>Item</th>
                        <th>Qty</th>
                        <th></th>
                        <th>Subtotal</th>
                    </tr>
                </thead>
                <tbody>
                    {items}
                </tbody>
                <tfoot>
                    <tr>
                        <td colSpan="4" className="text-right">Total</td>
                        <td>${total}</td>
                    </tr>
                </tfoot>
            </table>
        );
    }
});

Answer 1

对我来说，听起来你已经解决了大部分这种模式，但你有点困惑。您需要包括最后一步，这实际上是将您的组件订阅到商店推出的事件。

this.emit(CHANGE_EVENT);

这只会推出一些东西。如果没有人在听，那么什么都不会改变，所以在你的组件中，你需要实际监听这个事件。

对于一个组件，可能类似于：

React.createClass({
    componentDidMount: function() {
        // Called after react has rendered the HTML in the DOM.
        AppStore.addChangeListener(this.handleChange);
    },

    render: function() {
        return <div>{AppStore.someData}</div>
    },

    handleChange: function() {
        this.forceUpdate();
    }
});

注意：this.emit 不应调用 addChangeListener。它应该使用addChangeListener 方法触发您订阅的回调。

可能的改进

• 需要注意的一点是，尽管您的所有数据都在AppStore 中，但并非所有组件都会关心所有数据。例如，如果你有一个Name 组件，它呈现用户名，他们只关心NAME_CHANGE_EVENT。他们不想每次发生小事时都重新渲染。这是 React 不必要的处理，尽管 React 会推测没有任何变化并且不会更新 DOM。