# flux

> An application architecture based on a unidirectional data flow

Latest version **4.0.4** (published 2023-03-21) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install flux
pnpm add flux
yarn add flux
bun add flux
```

## Health

**Score 28/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score; popular repo.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.4 |
| Published | 2023-03-21 |
| First published | 2011-09-03 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | separate (@types/flux) |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 254.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17438 |
| Author | Facebook |
| Maintainers | yangshun, fb, kyldvs |
| Keywords | flux, react, facebook, dispatcher |

## Links

- npm: https://www.npmjs.com/package/flux
- Repository: https://github.com/facebook/flux
- Homepage: https://facebookarchive.github.io/flux/
- Issues: https://github.com/facebookarchive/flux/issues
- npm.io page: https://npm.io/package/flux

## Dependencies (2)

- [fbjs](https://npm.io/package/fbjs.md) ^3.0.1
- [fbemitter](https://npm.io/package/fbemitter.md) ^3.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.0.4 (latest) — 2023-03-21
- 4.0.3 — 2021-12-10
- 4.0.2 — 2021-09-28
- 4.0.1 — 2021-01-09
- 4.0.0 — 2020-12-15
- 3.1.3 — 2017-07-28
- 3.1.2 — 2016-12-16
- 3.1.1 — 2016-12-16
- 3.1.0 — 2016-10-19
- 3.0.0 — 2016-09-29
- 2.1.1 — 2015-08-17
- 2.1.0 — 2015-08-17
- 2.0.3 — 2015-04-26
- 2.0.1 — 2014-09-10
- 2.0.0 — 2014-08-29
- … 3 more at https://npm.io/package/flux/versions

## 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).

<p align="center">
  <img src="https://github.com/facebookarchive/flux/blob/main/website/static/img/flux-logo-color.svg" alt="logo" width="20%" />
</p>
<h1 align="center">
  Flux
</h1>
<p align="center">
  An application architecture for React utilizing a unidirectional data flow.<br>

  <a href="https://github.com/facebook/flux/blob/master/LICENSE">
    <img src="https://img.shields.io/badge/License-BSD%20-blue.svg" alt="Licence Badge" />
  </a>
  <a href="https://www.npmjs.com/package/flux">
    <img src="https://img.shields.io/npm/v/flux.svg?style=flat" alt="Current npm package version." />
  </a>
</p>

<hr/>

<img src="./img/flux-diagram-white-background.png" style="width: 100%;" />

## 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<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](./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.

---
_Source: https://npm.io/package/flux · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
