使用 React 和 Flux 创建一个记事本应用

React，来自 Facebook，是一个用来创建用户界面的非常优秀的类库。唯一的问题是 React 不会关注于你的应用如何处理数据。大多数人把 React 当做 MV* 中的 V。所以，Facebook 引入了一种称作 Flux 的模式，提供了一个功能上的通道，可用于应用内的数据处理。这个教程简短的介绍了 Flux 模式并且展示了如何使用 React 和 Flux 架构搭建一个记事本应用。

Flux 入门

Flux 依赖于一个单的数据流。在这个 Flux 模式中有两个关键的组件：

Stores ：一个 store 组件，恰如其名，存储这应用的数据。

Actions ：新的数据通过 actions 流入 stores。当 actions 被调用时， Stores 监听 actions 并且会做一些反馈（比如修改数据）。这保证了数据的单向性。

为了增强这个概念，我们做一个实实在在的例子。比如，在一个记事本应用中你可能会有下面的安排：

一个叫做 NoteStore 的 store 用来存储日记列表。

要有一个叫做 createNote 的 action。NoteStore 监听到 createNode 的 action 然后当 action 被调用的时候用一个新的日记来更新列表。数据仅仅能通过 action 流入到 store 中。

每次数据发生变化时 NoteStore 触发一个事件。你的 React 组件，假如叫做 NodeListComponent，监听这个事件然后更新存在于 view 层中日记的列表。这就是从 store 流出的数据的流动方式。所以，数据流可以形象化的看做下面这样：

Flux 模式最大的优势就是它保证了应用中数据的平缓。比如，任何数据的变化只能通过 action 发出，这也就更加容易理解如何做到一旦数据变化就会影响整个应用了。

注意：

如果你看过了 Facebook 关于 Flux 的指南，你一定会注意到 Dispatcher 的概念。Dispatcher 是一个注册到 store 中的一个回调函数。当 action 被调用，Dispatcher 会响应它并且把相关的数据发送到所有注册的 store 中。Store 然后检查 action 的类型并且作出相应的反应。

上面的过程被一个叫做 Reflux 的类库很好的简化了。它通过使 actions 可监听去掉了 Dispatcher 的概念。所以，在 Reflux 中，store 可以直接监听 action 并且对他们需要的内容做出响应。

为了更好地理解 Flux 模式，我们使用 Reflux，React 和 Node.js 共同创建一个记事本应用。

搭建开发环境

我们会使用 React 和 Reflux 作为 Node 模块并且使用 Browserify 让它们在客户端同样可用。下面就介绍如何搭建环境：

我们会使用 Browserify 打包我们的 React 组件，Actions 和 Stores 被打包成一个客户端 .js 包。

我们会使用 grunt watch 监控上面的组件中的变化并且每次发生变化时都会重新运行 Browserify。

grunt nodemon 被用于重启服务每当任何 .jsx 或者 .js 文件发生变化时，所以你不需要手动控制。

你可以从 GitHub 下载相关代码然后打开 Gruntfile.js 查看相关的任务。当你的机器上有了这个库，你仅仅需要运行 npm install 来安装所以来的所有 node 模块。运行下面的命令，然后开始开发：

grunt watch

grunt nodemon

这个应用可以在 http://localhost:8000 访问到。

使用这个应用