Question

我们知道 Flux 组件不能直接更新应用程序的状态，这就需要一个额外的层来处理它，这个额外的层指的是 actions 和 dispatcher。

在 Flux 中使用状态生成器时，将会发生状态改变，当一个组件触发了一个 action 后，action 会触发 store 中注册的 dispatcher 回调。action creator 方法本身运行的逻辑通常是异步任务，并且可能对于 store 做了多个调度，使用 Flux 的架构如下图。

使用 Baobab，你会得到更多的自由。Baobab 树已经有改变状态和触发事件（update/change）的 API。换句话说，你没必要像在 store 中那样去创建一个改变状态的方法。其次，还需注意的是你现在只有一棵状态树，没有了处理队列的调度。我的意思是，在 Facebook 的 Flux 中，可以有多个 store 响应同一个 action 的调度。waitFor 方法允许你使其他的处理器优先执行当前的任务，而这在使用 Baobab 树时是没有必要的。再次，使用一个状态树可以防止循环依赖，并且你总有方法描述一个 action 的意图。在我看来，这更好地解释了当一个 action 触发时会发生什么。Baobab 架构更像下面这样：

actions 是应用程序的业务逻辑，需要依赖于其他的模块来执行业务逻辑，例如获取 http 请求等。但是状态树不依赖于任何东西。组件只是依赖于一个状态树，其他的组件可能有一些辅助函数等。这是应用程序工作原理的简单概述，让我们展开 Baobab 架构再看看，如下图。

正如你所看到的，状态树被单独保留。它在应用程序的顶层，action 改变它，组件从它这儿获取改变，所以让我们进入到这个架构的 action 部分。它只是一个你定义的模块，包含一些访问状态树的方法。

var stateTree = require('./stateTree.js');

var actions = {
  addItem: function(item) {
    stateTree.select('items').push(item);
  }
};

module.exports = actions;

这是一个非常简单的 action。让我们来看一些更复杂的例子，但是在这之前，我们先谈谈如何使用 Baobab 树构建应用程序状态。