第六步:Flux架构速成教程

2021-10-23 14:24 更新

第六步:Flux架构速成教程

Flux是Facebook为可扩展的客户端web应用开发的应用架构。它利用单向数据流补全了React组件的一些不足。Flux更应该看做一种模式而非框架,不过,这里我们将使用一个叫做Alt的Flux实现,来减少我们写脚手架代码的时间。

以前你看过这个图解吗?你能理解它吗?我就不能理解,无论我看它多少遍。

现在我对Flux比较了解了,我只能说,真是服了他们(Flux作者),能将简单的架构用如此复杂的方式展现出来。不过需要说明的是,它们的新Flux图解比以前好多了。

有趣事实:当我刚开始写这个教程时,我决定不在这个项目中使用Flux。我实在掌握不了这个东西,还是让别人去教它吧。不过谢天谢地,在Yahoo我能在上班时间把玩不同的技术并试验它们,所以花点功夫还是学会了。老实说,不用Flux我们也能构建这个app,并且写的代码还少些,因为这个项目并没有什么复杂的内嵌组件。但我相信,做一个全栈的React app,包括服务端渲染和Flux架构,看着不同的部分是如何组合到一起的,这本身有它的价值。

与其重复Flux那抽象的官方教程,不如让我们来看一个真实的用例,来展示Flux是如何工作的:

  • componentDidMount中,三个action被触发:
OverviewActions.getSummary();
OverviewActions.getApps();
OverviewActions.getCompanies();
  • 每一个action都创建了一个AJAX请求向服务器获取数据。
  • 获取到数据后,每一个action触发另一个“success”的action,并且将数据传递给它:
getSummary() {
  request
    .get('/api/overview/summary')
    .end((err, res) => {
      this.actions.getSummarySuccess(res.body);
    });
}
  • 同时,Overview的store(我们存储Overview组件状态的地方)监听所有“success”的action。当getSummarySuccess被触发后,Overview的store中的onGetSummarySuccess方法被调用,store被更新:
class OverviewStore {

  constructor() {
    this.bindActions(OverviewActions);
    this.summary = {};
    this.apps = [];
    this.companies = [];
  }

  onGetSummarySuccess(data) {
    this.summary = data;
  }

  onGetAppsSuccess(data) {
    this.apps = data;
  }

  onGetCompaniesSuccess(data) {
    this.companies = data;
  }
}
  • 一旦store更新,Overview组件将会知道,因为它订阅了Overview store,当store更新/改变后,组件将会安装store中的值更新自身状态。
class Overview extends React.Component {

  constructor(props) {
    super(props);
    this.state = OverviewStore.getState();
    this.onChange = this.onChange.bind(this);
  }

  componentDidMount() {
    OverviewStore.listen(this.onChange);
  }

  onChange() {
    this.setState(OverviewStore.getState())
  }

  ...
}
  • 此时Overview组件已经根据新数据更新完成了。
  • 在上面的截图上,当从下拉菜单选择不同的日期范围,将会重复整个流程。

注意:Action如何命名并无规定,你可自由按照自己的习惯命名,只要它是描述性并且有意义的。

让我们暂时先忽略Dispatcher一会,从上面的描述你看到了一条单向的数据流吗?如果没有也没什么大不了的,当我们开始构建应用的时候你自然就明白了。

Flux概要

Flux事实上不过是pub/sub架构的一个时髦说法,比如,应用的数据总是单向的,并被一路上的订阅者们接收。

在写这篇教程的时候,外面已经有超过一打的Flux实现,在这些实现当中,我只用过RefluxJSAlt,在这两者之间,我个人比较喜欢Alt,因为它的简洁,以及作者goatslacker的热心、支持服务端渲染、非常棒的文档,以及积极的维护。

我强烈建议你去读一下Alt的Getting Started,不超过10分钟你就能基本入门了。

如果你对于该选择哪个Flux库感到迷茫,可以考虑一下Hacker News上一个叫glenjamin的家伙的评论,他花了大量时间试图弄清到底该用哪个Flux库:

令人郁闷的事实是:它们(Flux库)都很好。你几乎不可能因为一个Flux库而让你的应用出现问题。即使某个Flux库停止维护了也不打紧,你要知道,大多数正常的Flux实现都非常小(大约100行代码),出不了什么致命问题,即使出了我想你也能搞定。总之,redux很灵巧,但不要在试图获得完美的Flux库上浪费时间,瞅着哪个还算顺眼就拿来用,赶紧将关注点转回到你的应用上去。

现在,我们已经过了一遍ES6、React、Flux的一些基础,现在该将注意力集中到我们的应用上来了。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号