首页 文章

UI事件的Flux操作

提问于
浏览
3

我在我的应用程序中使用react和flux,在我的应用程序中,我有两个组件:TreeView和TableView,它们是从两个不同的商店中获取的 .

我想添加一个选项 - 当我点击TableView中的一行时,它将在我的TreeView中打开相关节点 .

我的问题是:这两个组件应该如何相互通信?在AngularJS / Backbone中,我将使用Event Aggreator模式,并使用它的id广播一个像“objectSelected”这样的事件 .

我应该如何与flux体系结构做出反应 - 我认为使用flux方式 - 并创建一个动作,但随后我的商店将保存UI状态(哪些节点是打开的),我认为组件(在本例中为TreeView)应该保存这个状态(而不是商店) .

那么反应中两个组件之间交谈的正确性是什么?

1 回答

  • 0

    如果您不想使用flux,那么您将通过父组件将操作作为props传递 .

    我使用的唯一通量实现是Fluxxor . 使用fluxxor(可能是大多数flux实现),您可以同时拥有组件状态和存储状态 . 如果您的表和树总是要链接(同时打开或关闭),我认为将它保存在商店中是可以的 .

    你可以做点什么......

    TableComponent = React.createClass({
      getInitialState: function() {
        return {
          //component specific state
        };
      },
    
      getStateFromFlux: function() {
        // flux store state
        return {
          appStore: this.getFlux().store('AppStore').state
        }
      },
    
      handleClick: function(tree) {
        this.getFlux().actions.appActions.toggleTree(tree);
      }
    });
    

相关问题