7、构建Flux架构的骨架：从基础到实践

构建Flux架构的骨架：从基础到实践

1. 状态相关思考在骨架架构实现阶段的重要性

在骨架架构实现阶段，我们需要考虑所有与状态相关的因素。例如以下代码：

// Nothing the second item isn't actually selected,
// because the panel is disabled. No "change" event
// is emitted here either, because the "visible"
// property is false.
dispatcher.dispatch({
  type: 'ITEM_SELECT',
  payload: 1
});

这个例子表明， ITEM_SELECT 动作实际上依赖于 PANEL_TOGGLE 动作。因为当面板被禁用时，我们实际上不想选择项目并更新视图。这说明即使在不实现实际 UI 组件时，也可以推测常见构建块的潜在状态。我们可能会发现更多类似的依赖关系，但不必追求找出所有情况，关键是在有机会时尽可能学习，因为实现实际功能后情况会更复杂。

2. 商店与功能领域

传统前端架构中，直接映射 API 返回结果的模型为 JavaScript 组件提供了清晰简洁的数据模型。而 Flux 更倾向于用户，关注用户需要查看和交互的信息。我们可以将用户界面分解为不同的领域，每个领域可看作一个大的功能。

2.1 识别顶级功能

在 Flux 项目的骨架架构阶段，