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

Question

在组件中执行操作时是否会破坏 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 });
      });
  }
}

商店是获取上述示例中所需信息的唯一合适场所吗？

Answer 1

回答

这确实破坏了 Flux，因为它将状态从存储中移开，并使操作直接与视图通信。

可能的解决方案

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

注意：例子并不完整，它们只是给出了基本的想法。它们也不基于 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() })
});

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

Does accessing information returned from an action creator in a component break Flux?

javascript

flux

reactjs

回答

可能的解决方案

商店

控制器视图