访问组件中的动作创建者返回的信息是否会破坏 Flux？

【问题标题】：Does accessing information returned from an action creator in a component break Flux?访问组件中的动作创建者返回的信息是否会破坏 Flux？
【发布时间】：2015-07-18 16:34:51
【问题描述】：

在组件中执行操作时，是否会破坏 Flux 模式以访问从组件内的操作创建者返回的承诺？

动作创作者

class MyActionCreators extends Marty.ActionCreators {
  create() {
    this.dispatch(MyActionConstants.CREATE_ACTION);

    return MyActionAPI.create()
      .then(res) {
        this.dispatch(MyActionConstants.CREATE_ACTION_DONE);
        return res;
      };
  }
}

class MyCompoment extends React.Component {
  render() {
    return(
      <div>
        <button onChange={ this._clickAction }>Create Me!<button>
      </div>
    );
  }

  // private
  _clickAction() {
    MyActionCreators.create()
      // Does this break Flux?
      .then((res) => {
        this.context.router.transitionTo('some_path', { id: res.id });
      });
  }
}

商店是访问上述示例中所需信息的唯一适当位置吗？

【问题讨论】：

标签： javascript reactjs flux

【解决方案1】：

回答

这确实会破坏 Flux，因为它会将 state 从 store 中移走，并让 action 直接与 view 通信。

一个可能的解决方案

对您的系统进行一些假设，我将假设您有一个正在尝试更新的路由器。

注意：示例并不完整，它们只是给出了基本概念。它们也不基于 Flux 架构的任何实现。

商店

创建一个包含 id 的商店。商店必须发出某种更改事件。

示例

var Store = function() {
    this._id;
    Dispatcher.on(MyActionConstants.CREATE_ACTION_DONE, function(payload) {
        this._id = payload.id;
        this.emit("change");
    }.bind(this));
}

Store.prototype.getId = function() {
   return this._id;
}

控制器视图

创建一个控制器视图（类似于您的反应组件），它将根据商店中的更改更新路由器。

示例

var store = new Store();
store.on('change', function() {
   router.transitionTo('some_path', { id: store.getId() })
});

【讨论】：