Skip to content
This repository has been archived by the owner on Mar 23, 2023. It is now read-only.

Commit

Permalink
misc: prepare repo for archiving. it has been a good run~
Browse files Browse the repository at this point in the history
  • Loading branch information
yangshun committed Mar 21, 2023
1 parent adea259 commit a925a44
Show file tree
Hide file tree
Showing 11 changed files with 244 additions and 233 deletions.
18 changes: 7 additions & 11 deletions README.md
@@ -1,14 +1,14 @@
## ⚠️ The Flux project is in maintenance mode and there are many more sophisticated alternatives available (e.g. [Redux](http://redux.js.org/), [MobX](https://mobx.js.org/), or [Recoil](https://recoiljs.org/)) and we would recommend using them instead.
## ⚠️ 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://facebook.github.io/flux/img/flux-logo-color.svg" alt="logo" width="20%" />
<img src="./website/static/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>
Expand All @@ -23,11 +23,11 @@

## 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://facebook.github.io/flux).
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://facebook.github.io/flux/docs/in-depth-overview).
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

Expand All @@ -41,7 +41,7 @@ Flux is available as a [npm module](https://www.npmjs.org/package/flux), so you
const Dispatcher = require('flux').Dispatcher;
```

Take a look at the [dispatcher API and some examples](https://facebook.github.io/flux/docs/dispatcher).
Take a look at the [dispatcher API and some examples](https://facebookarchive.github.io/flux/docs/dispatcher).

## Flux Utils

Expand Down Expand Up @@ -70,7 +70,7 @@ class CounterStore extends ReduceStore<number> {
}
```

Check out the [examples](./examples) and [documentation](https://facebook.github.io/flux/docs/flux-utils) for more information.
Check out the [examples](./examples) and [documentation](https://facebookarchive.github.io/flux/docs/flux-utils) for more information.

## Building Flux from a Cloned Repo

Expand All @@ -86,10 +86,6 @@ 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](/CONTRIBUTING.md) file for how to help out.

## License

Flux is BSD-licensed. We also provide an additional patent grant.
2 changes: 1 addition & 1 deletion docs/Dispatcher.ko-KR.md
Expand Up @@ -8,7 +8,7 @@ Dispatcher는 등록된 callback에 데이터를 중계할 때 사용된다. 일
- 콜백은 이벤트를 개별적으로 구독하지 않는다. 모든 데이터 변동은 등록된 모든 콜백에 전달된다.
- 콜백이 실행될 때 콜백의 전체나 일부를 중단할 수 있다.

소스 코드를 보려면 [Dispatcher.js](https://github.com/facebook/flux/blob/master/src/Dispatcher.js)에서 확인할 수 있다.
소스 코드를 보려면 [Dispatcher.js](https://github.com/facebookarchive/flux/blob/master/src/Dispatcher.js)에서 확인할 수 있다.

## API

Expand Down
2 changes: 1 addition & 1 deletion docs/Dispatcher.md
Expand Up @@ -8,7 +8,7 @@ Dispatcher is used to broadcast payloads to registered callbacks. This is differ
- Callbacks are not subscribed to particular events. Every payload is dispatched to every registered callback.
- Callbacks can be deferred in whole or part until other callbacks have been executed.

Check out [Dispatcher.js](https://github.com/facebook/flux/blob/master/src/Dispatcher.js) for the source code.
Check out [Dispatcher.js](https://github.com/facebookarchive/flux/blob/master/src/Dispatcher.js) for the source code.

## API

Expand Down
8 changes: 4 additions & 4 deletions docs/In-Depth-Overview.md
Expand Up @@ -51,13 +51,13 @@ The dispatcher is the central hub that manages all data flow in a Flux applicati

As an application grows, the dispatcher becomes more vital, as it can be used to manage dependencies between the stores by invoking the registered callbacks in a specific order. Stores can declaratively wait for other stores to finish updating, and then update themselves accordingly.

The same dispatcher that Facebook uses in production is available through [npm](https://www.npmjs.com/package/flux), [Bower](http://bower.io/), or [GitHub](https://github.com/facebook/flux).
The same dispatcher that Facebook uses in production is available through [npm](https://www.npmjs.com/package/flux), [Bower](http://bower.io/), or [GitHub](https://github.com/facebookarchive/flux).

### Stores

Stores contain the application state and logic. Their role is somewhat similar to a model in a traditional MVC, but they manage the state of many objects — they do not represent a single record of data like ORM models do. Nor are they the same as Backbone's collections. More than simply managing a collection of ORM-style objects, stores manage the application state for a particular **domain** within the application.

For example, Facebook's [Lookback Video Editor](https://facebook.com/lookback/edit) utilized a TimeStore that kept track of the playback time position and the playback state. On the other hand, the same application's ImageStore kept track of a collection of images. The TodoStore in our [TodoMVC example](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/) is similar in that it manages a collection of to-do items. A store exhibits characteristics of both a collection of models and a singleton model of a logical domain.
For example, Facebook's [Lookback Video Editor](https://facebook.com/lookback/edit) utilized a TimeStore that kept track of the playback time position and the playback state. On the other hand, the same application's ImageStore kept track of a collection of images. The TodoStore in our [TodoMVC example](https://github.com/facebookarchive/flux/tree/master/examples/flux-todomvc/) is similar in that it manages a collection of to-do items. A store exhibits characteristics of both a collection of models and a singleton model of a logical domain.

As mentioned above, a store registers itself with the dispatcher and provides it with a callback. This callback receives the action as a parameter. Within the store's registered callback, a switch statement based on the action's type is used to interpret the action and to provide the proper hooks into the store's internal methods. This allows an action to result in an update to the state of the store, via the dispatcher. After the stores are updated, they broadcast an event declaring that their state has changed, so the views may query the new state and update themselves.

Expand All @@ -79,7 +79,7 @@ Actions may also come from other places, such as the server. This happens, for e

### What About that Dispatcher?

As mentioned earlier, the dispatcher is also able to manage dependencies between stores. This functionality is available through the `waitFor()` method within the Dispatcher class. We did not need to use this method within the extremely simple [TodoMVC application](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/), but it becomes vital in a larger, more complex application.
As mentioned earlier, the dispatcher is also able to manage dependencies between stores. This functionality is available through the `waitFor()` method within the Dispatcher class. We did not need to use this method within the extremely simple [TodoMVC application](https://github.com/facebookarchive/flux/tree/master/examples/flux-todomvc/), but it becomes vital in a larger, more complex application.

Within the TodoStore's registered callback we could explicitly wait for any dependencies to first update before moving forward:

Expand All @@ -104,4 +104,4 @@ PrependedTextStore.dispatchToken = Dispatcher.register(function (payload) {
});
```

For more on `waitFor()`, actions, action creators and the dispatcher, please see [Flux: Actions and the Dispatcher](http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html).
For more on `waitFor()`, actions, action creators and the dispatcher, please see [Flux: Actions and the Dispatcher](https://legacy.reactjs.org/blog/2014/07/30/flux-actions-and-the-dispatcher.html).
8 changes: 4 additions & 4 deletions docs/Overview.ko-KR.md
Expand Up @@ -71,13 +71,13 @@ dispatcher는 Flux 애플리케이션의 중앙 허브로 모든 데이터의

애플리케이션의 규모가 커지게 되면 dispachter의 역할은 더욱 필수적이다. 바로 store 간에 의존성을 특정적인 순서로 callback을 실행하는 과정으로 관리하기 때문이다. Store는 다른 store의 업데이트가 끝날 때까지 선언적으로 기다릴 수 있고 끝나는 순서에 따라 스스로 갱신된다.

Facebook이 실제로 사용하는 dispatcher는 [npm](https://www.npmjs.com/package/flux), [Bower](http://bower.io/), 또는 [GitHub](https://github.com/facebook/flux)에서 확인할 수 있다.
Facebook이 실제로 사용하는 dispatcher는 [npm](https://www.npmjs.com/package/flux), [Bower](http://bower.io/), 또는 [GitHub](https://github.com/facebookarchive/flux)에서 확인할 수 있다.

### Stores

Store는 애플리케이션의 상태와 로직을 포함하고 있다. store의 역할은 전통적인 MVC의 모델과 비슷하지만 많은 객체의 상태를 관리할 수 있는데 ORM 모델이 하는 것처럼 단일 레코드의 데이터를 표현하는 것도 아니고 Backbone의 컬렉션과도 다르다. store는 단순히 ORM 스타일의 객체 컬렉션을 관리하는 것을 넘어 애플리케이션 내의 개별적인 **도메인**에서 애플리케이션의 상태를 관리한다.

예를 들면, Facebook의 [돌아보기 편집기](https://facebook.com/lookback/edit) 에서 지속해서 재생된 시간과 플레이어 상태를 지속해서 추적하기 위해 TimeStore를 활용한다. 같은 애플리케이션에서 ImageStore는 이미지 콜랙션을 지속해서 추적한다. [TodoMVC 예제](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/)의 TodoStore도 비슷하게 할 일 항목의 콜랙션을 관리한다. store는 두 모델 컬렉션의 특징을 보여주는 것과 동시에 싱글턴 모델의 논리적 도메인으로 역할을 한다.
예를 들면, Facebook의 [돌아보기 편집기](https://facebook.com/lookback/edit) 에서 지속해서 재생된 시간과 플레이어 상태를 지속해서 추적하기 위해 TimeStore를 활용한다. 같은 애플리케이션에서 ImageStore는 이미지 콜랙션을 지속해서 추적한다. [TodoMVC 예제](https://github.com/facebookarchive/flux/tree/master/examples/flux-todomvc/)의 TodoStore도 비슷하게 할 일 항목의 콜랙션을 관리한다. store는 두 모델 컬렉션의 특징을 보여주는 것과 동시에 싱글턴 모델의 논리적 도메인으로 역할을 한다.

위에서 언급한 것과 같이 store는 자신을 dispatcher에 등록하고 callback을 제공한다. 이 callback은 action을 파라미터로 받는다. store의 등록된 callback의 내부에서는 switch문을 사용한 action 타입을 활용해서 action을 해석하고 store 내부 메소드에 적절하게 연결될 수 있는 훅을 제공한다. 여기서 결과적으로 action은 disaptcher를 통해 store의 상태를 갱신한다. store가 업데이트된 후, 상태가 변경되었다는 이벤트를 중계하는 과정으로 view에게 새로운 상태를 보내주고 view 스스로 업데이트하게 한다.

Expand All @@ -101,7 +101,7 @@ action은 서버와 같은 다른 장소에서 올 수 있다. 예를 들면 dat

### Dispatcher에 대해서

앞서 언급한 것처럼 disaptcher는 store 간의 의존성을 관리할 수 있다. 이 기능은 dispatcher 클래스에 포함된 `waitFor()` 메소드를 통해 가능하다. [TodoMVC](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/)는 극단적으로 단순해서 이 메소드를 사용할 필요가 없지만 복잡한 대형 애플리케이션에서는 생명과도 같다.
앞서 언급한 것처럼 disaptcher는 store 간의 의존성을 관리할 수 있다. 이 기능은 dispatcher 클래스에 포함된 `waitFor()` 메소드를 통해 가능하다. [TodoMVC](https://github.com/facebookarchive/flux/tree/master/examples/flux-todomvc/)는 극단적으로 단순해서 이 메소드를 사용할 필요가 없지만 복잡한 대형 애플리케이션에서는 생명과도 같다.

TodoStore에 등록된 callback은 명시적으로 기다려 코드가 진행되는 동안 다른 의존성이 먼저 업데이트되도록 기다린다:

Expand All @@ -126,4 +126,4 @@ PrependedTextStore.dispatchToken = Dispatcher.register(function (payload) {
});
```

`waitFor()`, actions, action creator와 dispatcher에 대해서는 다음 [Flux 액션과 Dispatcher](http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html)를 참고하자.
`waitFor()`, actions, action creator와 dispatcher에 대해서는 다음 [Flux 액션과 Dispatcher](https://legacy.reactjs.org/blog/2014/07/30/flux-actions-and-the-dispatcher.html)를 참고하자.
2 changes: 1 addition & 1 deletion docs/Overview.md
Expand Up @@ -6,6 +6,6 @@ category: Quick Start
next: in-depth-overview
---

In order to get started check out the [overview and guides](https://github.com/facebook/flux/tree/master/examples) maintained on GitHub, or continue on to the in-depth overview, which explores in more detail how the pieces of the Flux architecture work together.
In order to get started check out the [overview and guides](https://github.com/facebookarchive/flux/tree/master/examples) maintained on GitHub, or continue on to the in-depth overview, which explores in more detail how the pieces of the Flux architecture work together.

> Note: The in-depth overview was formerly the normal overview landing page but was replaced with the more terse and up-to-date guides on GitHub that are linked above.
2 changes: 1 addition & 1 deletion docs/Related-Libraries.md
Expand Up @@ -27,7 +27,7 @@ React brings about many radical ideas and encourages developers to [rethink best

### Jest – Unit Testing

[Jest](http://facebook.github.io/jest/) is a testing library by Facebook that aims to make the process of testing pain-free. As with Facebook projects, it provides a great development experience out of the box. Tests can be run in parallel resulting in shorter duration. During watch mode, by default, only the tests for the changed files are run. One cool feature is "Snapshot Testing". Jest can save the generated output of your React component and Redux state and save it as serialized files, so you wouldn't have to manually come up with the expected output yourself. Jest also comes with built-in mocking, assertion and test coverage. One library to rule them all!
[Jest](http://jestjs.io/) is a testing library by Facebook that aims to make the process of testing pain-free. As with Facebook projects, it provides a great development experience out of the box. Tests can be run in parallel resulting in shorter duration. During watch mode, by default, only the tests for the changed files are run. One cool feature is "Snapshot Testing". Jest can save the generated output of your React component and Redux state and save it as serialized files, so you wouldn't have to manually come up with the expected output yourself. Jest also comes with built-in mocking, assertion and test coverage. One library to rule them all!

### Redux - Alternative State Management

Expand Down
14 changes: 7 additions & 7 deletions website/docusaurus.config.js
Expand Up @@ -8,16 +8,16 @@
module.exports = {
title: 'Flux',
tagline: 'Application architecture for building user interfaces',
url: 'https://facebook.github.io',
url: 'https://facebookarchive.github.io',
baseUrl: '/flux/',
favicon: 'img/favicon.ico',
organizationName: 'facebook',
organizationName: 'facebookarchive',
projectName: 'flux',
themeConfig: {
announcementBar: {
id: 'support_ukraine',
content:
'Support Ukraine 🇺🇦 <a target="_blank" rel="noopener noreferrer" href="https://opensource.facebook.com/support-ukraine"> Help Provide Humanitarian Aid to Ukraine</a>.',
'The Flux project has been archived and no further changes will be made.',
backgroundColor: '#20232a',
textColor: '#fff',
isCloseable: false,
Expand All @@ -37,7 +37,7 @@ module.exports = {
{to: 'docs/overview', label: 'Docs', position: 'left'},
{to: 'support', label: 'Support', position: 'left'},
{
href: 'https://github.com/facebook/flux',
href: 'https://github.com/facebookarchive/flux',
label: 'GitHub',
position: 'right',
},
Expand All @@ -47,7 +47,7 @@ module.exports = {
style: 'dark',
logo: {
alt: 'Facebook Open Source Logo',
src: 'https://docusaurus.io/img/oss_logo.png',
src: 'https://docusaurus.io/img/meta_opensource_logo_negative.svg',
},
links: [
{
Expand All @@ -73,7 +73,7 @@ module.exports = {
items: [
{
label: 'GitHub',
href: 'https://github.com/facebook/flux',
href: 'https://github.com/facebookarchive/flux',
},
],
},
Expand Down Expand Up @@ -106,7 +106,7 @@ module.exports = {
docs: {
path: '../docs',
sidebarPath: require.resolve('./sidebars.js'),
editUrl: 'https://github.com/facebook/flux/edit/master/docs/',
editUrl: 'https://github.com/facebookarchive/flux/edit/master/docs/',
showLastUpdateAuthor: true,
showLastUpdateTime: true,
},
Expand Down
8 changes: 4 additions & 4 deletions website/package.json
Expand Up @@ -10,11 +10,11 @@
"deploy": "docusaurus deploy"
},
"dependencies": {
"@docusaurus/core": "2.1.0",
"@docusaurus/preset-classic": "2.1.0",
"@docusaurus/core": "^2.3.1",
"@docusaurus/preset-classic": "^2.3.1",
"classnames": "^2.2.6",
"react": "^17.0.0",
"react-dom": "^17.0.0"
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"browserslist": {
"production": [
Expand Down
6 changes: 3 additions & 3 deletions website/src/pages/index.js
Expand Up @@ -112,9 +112,9 @@ function Home() {
<div className="col col--8 col--offset-2">
<div className="margin-vert--xl text--center">
<h2>
The Flux project is in maintenance mode and there are many
more sophisticated alternatives available (e.g. Redux, MobX,
Recoil) and we would recommend using them instead.
The Flux project has been archived and no further changes
will be made. We recommend using modern alternatives like
Redux, MobX, Recoil, Zustand, or Jotai instead.
</h2>
</div>
</div>
Expand Down

0 comments on commit a925a44

Please sign in to comment.