Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/facebook/flux
Application Architecture for Building User Interfaces
https://github.com/facebook/flux
Last synced: about 1 month ago
JSON representation
Application Architecture for Building User Interfaces
- Host: GitHub
- URL: https://github.com/facebook/flux
- Owner: facebookarchive
- License: other
- Archived: true
- Created: 2014-07-20T23:33:08.000Z (about 10 years ago)
- Default Branch: main
- Last Pushed: 2023-03-21T23:41:43.000Z (over 1 year ago)
- Last Synced: 2024-04-13T18:54:35.683Z (5 months ago)
- Language: JavaScript
- Homepage: https://facebookarchive.github.io/flux/
- Size: 5.24 MB
- Stars: 17,384
- Watchers: 636
- Forks: 3,478
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-react - flux - Application architecture for building user interfaces.  (Utilities / State Management)
- awesome-state - flux
- starred-awesome - flux - Application Architecture for Building User Interfaces (JavaScript)
- awesome-web-react - React Flux - Application Architecture for Building User Interfaces. (State Management)
- awesome-list - flux
- awesome-react-cn - flux
README
## ⚠️ The Flux project has been archived and no further changes will be made. We recommend using more sophisticated alternatives like [Redux](http://redux.js.org/), [MobX](https://mobx.js.org/), [Recoil](https://recoiljs.org/), [Zustand](https://github.com/pmndrs/zustand), or [Jotai](https://github.com/pmndrs/jotai).
Flux
An application architecture for React utilizing a unidirectional data flow.
## Getting Started
Start by looking through the [guides and examples](./examples) on Github. For more resources and API docs check out [facebook.github.io/flux](https://facebookarchive.github.io/flux).
## How Flux works
For more information on how Flux works check out the [Flux Concepts](./examples/flux-concepts) guide, or the [In Depth Overview](https://facebookarchive.github.io/flux/docs/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](https://nodejs.org/api/events.html#events_class_eventemitter) as a basis for `Stores` and [React](https://github.com/facebook/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](https://www.npmjs.org/package/flux), 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:
```javascript
const Dispatcher = require('flux').Dispatcher;
```
Take a look at the [dispatcher API and some examples](https://facebookarchive.github.io/flux/docs/dispatcher).
## 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.
```js
import {ReduceStore} from 'flux/utils';
class CounterStore extends ReduceStore {
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](./examples) and [documentation](https://facebookarchive.github.io/flux/docs/flux-utils) 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](https://gulpjs.com/)-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:
```javascript
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.
## License
Flux is BSD-licensed. We also provide an additional patent grant.