Question

传统上，我认为 Web 开发者会把 state 当作一个会话或者数据库实例。当在客户端开发更先进的 Web 应用程序时，我们得到了一些新的状态，并且可以控制这些状态。从待办事项列表到 UI 加载，处处都会用到应用程序的 state。因此，在 Baobab 中，由一棵树来表示应用程序的所有状态。

如何在树中构建状态？有很多方法可以做到这一点，我不能告诉你最好的办法是什么，这取决于项目和个人偏好。下面是我喜欢的一种方式。

var Baobab = require('baobab');
var stateTree = new Baobab({
  models: {
    notifications: [],
    contacts: []
  },
  views: {
    createContact: {
      isLoading: false
    }
  }
});

module.exports = stateTree;

这上面的例子中，我选择了模型和视图的分离，这是我们现代 Web 应用程序的传统概念。实体相关的放入模型（model）中，UI 相关的放入视图（view）中。

模型可能不会带来太多的惊喜，但也许视图可以。之所以定义视图，是因为一个视图中可以放很多组件。通过将状态添加到状态树中来确保组件的任何改变或者增加新的组件都与树相关，而不是彼此相关。

这下面的例子中，我们选择通过区块来划分树。我建议在较大的应用程序中使用这种写法。这将使应用程序特定区块的组件更容易监听与它们相关的状态改变，同样也允许跨区块状态，例如 home 区块需要显示通知的条数，这将不是一个问题。

var Baobab = require('baobab');
var stateTree = new Baobab({
  admin: {

    notifications: []
  },
  home: {
    posts: []
  }
});

第三个例子仅仅是直接把状态加到树中，适用于更小的应用程序。

var Baobab = require('baobab');
var stateTree = new Baobab({
  notifications: []
});

module.exports = stateTree;

我的意思是，构建状态时没有特定的结构。应用程序的不同决定了结构的不同。

你不必为了避免循环依赖而人为地划分状态，也不需要使用 waitFor 方法（它会让你的代码很难读）。随着应用程序的增长，使用状态树这种方式可以很容易地改变状态的结构。这真是太棒了！