An application architecture for React utilizing a unidirectional data flow.

Getting Started

Start by looking through the guides and examples on Github. For more resources and API docs check out facebook.github.io/flux.

How Flux works

For more information on how Flux works check out the Flux Concepts guide, or the In Depth Overview.


Flux is more of a pattern than a framework, and does not have any hard dependencies. However, we often use EventEmitter as a basis for Stores and React for our Views. The one piece of Flux not readily available elsewhere is the Dispatcher. This module, along with some other utilities, is available here to complete your Flux toolbox.

Installing Flux

Flux is available as a npm module, so you can add it to your package.json file or run npm install flux. The dispatcher will be available as Flux.Dispatcher and can be required like this:

const Dispatcher = require('flux').Dispatcher;

Take a look at the dispatcher API and some examples.

Flux Utils

We have also provided some basic utility classes to help get you started with Flux. These base classes are a solid foundation for a simple Flux application, but they are not a feature-complete framework that will handle all use cases. There are many other great Flux frameworks out there if these utilities do not fulfill your needs.

import {ReduceStore} from 'flux/utils';

class CounterStore extends ReduceStore<number> {
  getInitialState(): number {
    return 0;

  reduce(state: number, action: Object): number {
    switch (action.type) {
      case 'increment':
        return state + 1;

      case 'square':
        return state * state;

        return state;

Check out the examples and documentation for more information.

Building Flux from a Cloned Repo

Clone the repo and navigate into the resulting flux directory. Then run npm install.

This will run Gulp-based build tasks automatically and produce the file Flux.js, which you can then require as a module.

You could then require the Dispatcher like so:

const Dispatcher = require('path/to/this/directory/Flux').Dispatcher;

The build process also produces de-sugared versions of the Dispatcher and invariant modules in a lib directory, and you can require those modules directly, copying them into whatever directory is most convenient for you. The flux-todomvc and flux-chat example applications both do this.

Join the Flux community

See the CONTRIBUTING file for how to help out.


Flux is BSD-licensed. We also provide an additional patent grant.




首先查看Github上的指南和示例。有关更多资源和API文档,请查看 facebook.github.io/flux




流量比框架更多的是模式,并没有任何硬依赖。不过,我们经常使用 EventEmitter 作为 Stores Views https://github.com/facebook/react">确认。其中一个Flux不可用的是 Dispatcher 。该模块以及一些其他实用程序可用于完成您的Flux工具箱。


Flux可作为 npm模块使用,因此您可以将其添加到您的package.json文件或运行 npm install flux 。调度程序将作为 Flux.Dispatcher 提供,可以这样执行:

const Dispatcher = require('flux').Dispatcher;


Flux Utils


import {ReduceStore} from 'flux/utils';

class CounterStore extends ReduceStore<number> { getInitialState(): number { return 0; }

reduce(state: number, action: Object): number { switch (action.type) { case 'increment': return state + 1;

  <span class="pl-k">case</span> <span class="pl-s"><span class="pl-pds">&#39;</span>square<span class="pl-pds">&#39;</span></span>:
    <span class="pl-k">return</span> state <span class="pl-k">*</span> state;

  <span class="pl-k">default</span>:
    <span class="pl-k">return</span> state;

} }



克隆repo并导航到生成的 flux 目录。然后运行 npm install

这将自动运行基于Gulp 的构建任务,并生成文件Flux.js,然后您可以将其作为模块。


const Dispatcher = require('path/to/this/directory/Flux').Dispatcher;

构建过程还在 lib 目录中生成 Dispatcher invariant 模块的脱糖版本,您可以要求这些模块直接将它们复制到任何目录中,最方便您。 flux-todomvc和flux-chat示例应用程序都这样做。