使用骨干视图更新React组件

Question

我有一个骨干视图模型，可以更新用户操作（在反应组件中）...问题是一旦模型得到更新，反应视图就不会更新。我该如何解决这个问题？下面的小代码片段：

骨干

onShowListView(data) {
    const newIsVisible = data.collection === this.collection ? !this.get('listview_visible') : false;
    this.set('listview_visible', newIsVisible);
    this.set('edit_mode', false);
  }

反应组件

function showHideList(data) {
  D.dispatch('SHOW_LISTVIEW', {
    collection: data.collection,
    isVisible: !data.get('list_visible'),
  });
}

export default class ListView extends React.Component {

  componentWillMount() {

  }

  render() {
    return (
      <div>
        <a onClick={() => showOrHideList(this.props.viewModelData)}>
          Click me
        </a>
        {this.props.viewModelData.listview_visible} // Assume this is present
      </div>
    );
  }
}

ListView.propTypes = {
  // optionsList: arrayOf(string),
  viewModelData: shape({
    attributes: shape({
      can_edit: boolean,
      edit_mode: boolean,
      listview_visible: boolean,
    }),
    collection: shape({
      iconName: string,
      models: arrayOf(shape({
        cid: string,
        id: string,
        attributes: shape({
          name: string,
          row_count: number,
          topological_model_id: string,
        }),
        name: string.isRequired,
      })),
    }),
  }),
};