React的设计目的是管理视图层，所以对于大型应用来说，我们还需要数据层面的复用。所以 facebook设计了flux架构，并官方发布了dispather.js， 但是这个使用起来比较复杂，于是网友开发了更加简单的版本：reflux.

reflux将应用程序划分成3个部分：

• actions动作。 程序的应用行为，例如条目的“添加”、“修改”。这些动作应该有视图组件交互触发，并且 发布给监听这些动作的仓库。
• stores仓库。 相当于MVC中的M层。监听动作，根据动作来操作数据，最后将数据发布给视图组件。
• view components视图组件。 根据仓库的数据渲染视图组件，还能发布相应的动作。

╔═════════╗       ╔════════╗       ╔═════════════════╗
║ Actions ║──────>║ Stores ║──────>║ View Components ║
╚═════════╝       ╚════════╝       ╚═════════════════╝
     ^                                      │
     └──────────────────────────────────────┘

要使用Reflux，只要搞懂下面的几点就行：

1. 动作如何创建和发布。
2. 仓库如何创建，如何监听动作，如何发布变化给监听的组件。
3. 组件如何监听仓库，如何发布动作。

1. 动作的创建和发布

使用Reflux.createAction(options)创建单个动作，Reflux.createActions(Array options)创建多个动作。

// 创建单个动作@H_404_40@
  var@H_404_40@ action@H_404_40@ =@H_404_40@ Reflux@H_404_40@.@H_404_40@createAction@H_404_40@(),@H_404_40@
      // 创建多个动作@H_404_40@
      actions@H_404_40@ =@H_404_40@ Reflux@H_404_40@.@H_404_40@createActions@H_404_40@([@H_404_40@'add'@H_404_40@,@H_404_40@ 'del'@H_404_40@]);@H_404_40@

  // 发布动作，并传递一些参数给处理这（监听的仓库）@H_404_40@
  action@H_404_40@(@H_404_40@some_data@H_404_40@);@H_404_40@
  actions@H_404_40@.@H_404_40@add@H_404_40@(@H_404_40@some_data@H_404_40@);@H_404_40@
  actions@H_404_40@.@H_404_40@del@H_404_40@(@H_404_40@some_data@H_404_40@);@H_404_40@

动作还有2个hooks函数：

• preEmit返回处理过后的参数给监听者。
• shouldEmit返回false则不发布给监听者（仓库）。

2. 仓库的创建，监听动作，发布变化给监听组件

Reflux.createStore可创建仓库，使用listenTo、listenToMany来监听单 个或多个动作，使用trigger来发布变化给监听组件。

var@H_404_40@ store@H_404_40@ =@H_404_40@ Refulx@H_404_40@.@H_404_40@createStore@H_404_40@({@H_404_40@
    // 在init中绑定监听事件@H_404_40@
    init@H_404_40@ :@H_404_40@ function@H_404_40@(){@H_404_40@
      this@H_404_40@.@H_404_40@listenTo@H_404_40@(@H_404_40@action@H_404_40@,@H_404_40@ this@H_404_40@.@H_404_40@onAdd@H_404_40@);@H_404_40@
      this@H_404_40@.@H_404_40@listenToMany@H_404_40@(@H_404_40@actions@H_404_40@);@H_404_40@
    },@H_404_40@
    onAdd@H_404_40@ :@H_404_40@ function@H_404_40@(@H_404_40@status@H_404_40@){@H_404_40@
      // 一些对status的操作。@H_404_40@
      // .....@H_404_40@

      // 将数据发布给监听组件@H_404_40@
      this@H_404_40@.@H_404_40@trigger@H_404_40@(@H_404_40@status@H_404_40@);@H_404_40@
    }@H_404_40@
  })@H_404_40@

上的可以利用listenables参数进行简写，去掉init和listenTo、listenToMany

var@H_404_40@ store@H_404_40@ =@H_404_40@ Reflux@H_404_40@.@H_404_40@createStore@H_404_40@({@H_404_40@
    listenables@H_404_40@ :@H_404_40@ actions@H_404_40@,128)">onAdd@H_404_40@ :@H_404_40@ function@H_404_40@(){@H_404_40@
      // ....@H_404_40@
    }@H_404_40@
  })@H_404_40@

3. 视图组件监听仓库，发布动作。

通过仓库的listen方法进行监听。

var@H_404_40@ Component@H_404_40@ =@H_404_40@ React@H_404_40@.@H_404_40@createClass@H_404_40@({@H_404_40@
    componentDidMount@H_404_40@ :@H_404_40@ function@H_404_40@(){@H_404_40@
      // 监听仓库@H_404_40@
      store@H_404_40@.@H_404_40@listen@H_404_40@(@H_404_40@function@H_404_40@(@H_404_40@status@H_404_40@){@H_404_40@
        // 根据status来更新state@H_404_40@
        this@H_404_40@.@H_404_40@setState@H_404_40@({@H_404_40@data@H_404_40@:@H_404_40@status@H_404_40@});@H_404_40@
      }.@H_404_40@bind@H_404_40@(@H_404_40@this@H_404_40@))@H_404_40@
    },@H_404_40@
    // 一个组件的交互动作@H_404_40@
    add@H_404_40@ :@H_404_40@ function@H_404_40@(){@H_404_40@
      // 发布动作@H_404_40@
      actions@H_404_40@.@H_404_40@add@H_404_40@(@H_404_40@some_data@H_404_40@);@H_404_40@
    }@H_404_40@
  })@H_404_40@

对于性能问题，我们一般会在组件在挂载后才进行监听，移除后去除监听。所以我们需要这 样做：

// 组件挂载后进行监听@H_404_40@
  componentDidMount@H_404_40@ :@H_404_40@ function@H_404_40@(){@H_404_40@
    this@H_404_40@.@H_404_40@unsubscribe@H_404_40@ =@H_404_40@ store@H_404_40@.@H_404_40@listen@H_404_40@(@H_404_40@this@H_404_40@.@H_404_40@changeStatus@H_404_40@);@H_404_40@
  },@H_404_40@
  // 组件移除后去除监听@H_404_40@
  componentWillUnmount@H_404_40@ :@H_404_40@ function@H_404_40@(){@H_404_40@
    this@H_404_40@.@H_404_40@unsubscribe@H_404_40@();@H_404_40@
  },136); font-style:italic">// 一个方法示例@H_404_40@
  changeStatus@H_404_40@ :@H_404_40@ function@H_404_40@(@H_404_40@status@H_404_40@){@H_404_40@
    this@H_404_40@.@H_404_40@setState@H_404_40@({@H_404_40@data@H_404_40@:@H_404_40@status@H_404_40@});@H_404_40@
  }@H_404_40@

上面的最佳实践可以变成下面的缩写。

mixins@H_404_40@ :@H_404_40@ [@H_404_40@Reflux@H_404_40@.@H_404_40@connect@H_404_40@(@H_404_40@store@H_404_40@,68)">'data'@H_404_40@)]@H_404_40@

最后放一个简单的demo。

参考文档：

• reflux