Flux中Action触发后Store更新了但View没变怎么办？

你这问题听着不像Flux的问题，倒像是React组件没更新的典型场景。既然是用Flux搭的购物车，那我猜你是用React写的组件吧？

关键点在于：Flux的Store更新之后，你是怎么触发组件更新的？

正常流程是：
1. Store emitChange
2. 组件里监听到change事件
3. 在监听函数里调用 setState 或 forceUpdate

你检查了Store和监听都没问题，那我怀疑你漏了这一步：

componentDidMount() {

  this.unsubscribe = store.subscribe(() => {

    this.setState({ cart: store.getState().cart });

  });

}



componentWillUnmount() {

  this.unsubscribe();

}

或者你用了Redux那种connect写法，但是没配对正确？

如果你用的是setState，那你得确认：
- state字段确实变了（不能直接改state，得返回新对象）
- 组件里用了这个state字段来渲染界面

还有种可能就是组件的props和state都没变，但你期望的UI更新是靠某个非React控制的DOM操作完成的，那当然不会生效。

总之，Flux这套流程跑通之后，React那边要是没触发更新，八成就是监听回调里没动state或者forceUpdate没调起来。你去React组件里加个console.log看看监听回调有没有执行，执行了就说明你没触发更新，再查setState那块逻辑。

这种情况大概率是组件没重新渲染，检查下shouldComponentUpdate或者render里是不是有问题。另外确保你的组件确实绑定了Store的变化事件。

试试这个简单的调试方法：在组件的render方法第一行加个console.log('render')，看看点击按钮后会不会触发。如果没触发，那可能是绑定出了问题；如果触发了但界面没变，看看数据对比逻辑是不是写错了。

复制过去试试这段基础的监听代码：

class Cart extends React.Component {

  constructor(props) {

    super(props);

    this.state = { cart: [] };

    CartStore.addChangeListener(this._onChange.bind(this));

  }



  _onChange() {

    this.setState({ cart: CartStore.getCart() });

  }



  componentWillUnmount() {

    CartStore.removeChangeListener(this._onChange);

  }



  render() {

    console.log('render');

    return (

      


        {/* 渲染购物车内容 */}

      


    );

  }

}

如果还是不行，可能要看看你的emitChange是不是在正确的异步时机调用了。