Flux

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.

Requirements

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;

      default:
        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.

License

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



Flux

用于反应利用单向数据流的应用程序架构。

入门指南

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

Flux如何工作

有关Flux如何工作的更多信息,请查看助焊剂概念指南,或深入概述

要求

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

安装Flux

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

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

查看调度程序API和一些示例

Flux Utils

我们还提供了一些基本的实用工具类,以帮助您开始使用Flux。这些基类是简单的Flux应用程序的坚实基础,但它们不是一个功能完整的框架,可以处理所有的用例。如果这些实用程序不能满足您的需求,还有许多其他伟大的Flux框架。

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中构建助剂

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

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

您可以这样要求调度员:

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

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

加入Flux社区

有关如何帮助,请参阅贡献文件。

许可证

Flux是BSD许可的。我们还提供额外的专利授权。




相关问题推荐