• Stars
    star
    442
  • Rank 96,163 (Top 2 %)
  • Language
    JavaScript
  • Created almost 9 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Learn Flux from an extremely simple demo

This demo helps you learn Flux architecture. It is inspired by Andrew Ray's great article Flux For Stupid People.

What is Flux?

Flux, invented by Facebook, is an architecture pattern for building client-side web applications.

It is similar to MVC architecture, but Flux's concept is much clearer than MVC's, and easier to learn.

How to Play?

Install the demo.

$ git clone [email protected]:ruanyf/extremely-simple-flux-demo.git
$ cd extremely-simple-flux-demo && npm install
$ npm start

Visit http://127.0.0.1:8080 with your browser.

You should see a button. Click it. That's all.

Core Concepts

According to Flux, an application should be divided into four parts.

  • Views: the UI layer
  • Actions: messages sent from Views (e.g. mouseClick)
  • Dispatcher: a place receiving actions, and calling callbacks
  • Stores: a place managing the Application's state, and reminding Views to update

The key feature of the Flux architecture is "one way" (unidirectional) data flow.

  1. User interacts with Views
  2. Views propagate an Action triggered by user
  3. Dispatcher receives the Action and updates the Store
  4. Store emits a "change" event
  5. Views respond to the "change" event and update itself

Don't get it? Take it easy. I will give you the details soon.

Demo Details

Now let us follow the demo to learn Flux.

First of all, Flux is usually used with React. So your familiarity with React is assumed. If not, I prepared a React tutorial for you.

Views

Our demo application's index.jsx has only one component.

// index.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var MyButtonController = require('./components/MyButtonController');

ReactDOM.render(
  <MyButtonController/>,
  document.querySelector('#example')
);

In the above code, you might notice our component's name isn't MyButton, but MyButtonController. Why?

Because I use React's controller view pattern here. A controller view component holds all states, then passes this data to its descendants. MyButtonController's source code is simple.

// components/MyButtonController.jsx
var React = require('react');
var ButtonActions = require('../actions/ButtonActions');
var MyButton = require('./MyButton');

var MyButtonController = React.createClass({
  createNewItem: function (event) {
    ButtonActions.addNewItem('new item');
  },

  render: function() {
    return <MyButton
      onClick={this.createNewItem}
    />;
  }
});

module.exports = MyButtonController;

In the above code, MyButtonController puts its data into UI component MyButton's properties. MyButton's source code is even simpler.

// components/MyButton.jsx
var React = require('react');

var MyButton = function(props) {
  return <div>
    <button onClick={props.onClick}>New Item</button>
  </div>;
};

module.exports = MyButton;

In the above code, you may find MyButton is a pure component (meaning stateless), which is really the biggest advantage of the controll view pattern.

Here, the logic of our application is when user clicks MyButton, the this.createNewItem method will be called. It sends an action to Dispatcher.

// components/MyButtonController.jsx

  // ...
  createNewItem: function (event) {
    ButtonActions.addNewItem('new item');
  }

In the above code, calling the createNewItem method will trigger an addNewItem action.

What is an Action?

An action is an object which has some properties to carry data and an actionType property to identify the action type.

In our demo, the ButtonActions object is the place we hold all actions.

// actions/ButtonActions.js
var AppDispatcher = require('../dispatcher/AppDispatcher');

var ButtonActions = {
  addNewItem: function (text) {
    AppDispatcher.dispatch({
      actionType: 'ADD_NEW_ITEM',
      text: text
    });
  },
};

In the above code, the ButtonActions.addNewItem method will use AppDispatcher to dispatch the ADD_NEW_ITEM action to the Stores.

Dispatcher

The Dispatcher transfers the Actions to the Stores. It is essentially an event hub for your application's Views. There is only one global Dispatcher.

We use the Facebook official Dispatcher Library, and write a AppDispatcher.js as our application's dispatcher instance.

// dispatcher/AppDispatcher.js
var Dispatcher = require('flux').Dispatcher;
module.exports = new Dispatcher();

AppDispatcher.register() is used for registering a callback for actions.

// dispatcher/AppDispatcher.js
var ListStore = require('../stores/ListStore');

AppDispatcher.register(function (action) {
  switch(action.actionType) {
    case 'ADD_NEW_ITEM':
      ListStore.addNewItemHandler(action.text);
      ListStore.emitChange();
      break;
    default:
      // no op
  }
})

In the above code, when receiving the ADD_NEW_ITEM action, the callback will operate the ListStore.

Please keep in mind, Dispatcher has no real intelligence on its own — it is a simple mechanism for distributing the actions to the stores.

Stores

The Stores contain the application state. Their role is somewhat similar to a model in a traditional MVC.

In this demo, we have a ListStore to store data.

// stores/ListStore.js
var ListStore = {
  items: [],

  getAll: function() {
    return this.items;
  },

  addNewItemHandler: function (text) {
    this.items.push(text);
  },

  emitChange: function () {
    this.emit('change');
  }
};

module.exports = ListStore;

In the above code, ListStore.items is used for holding items, ListStore.getAll() for getting all these items, and ListStore.emitChange() for emitting an event to the Views.

The Stores should implement an event interface as well. Since after receiving an action from the Dispatcher, the Stores should emit a change event to tell the Views that a change to the data layer has occurred.

// stores/ListStore.js
var EventEmitter = require('events').EventEmitter;
var assign = require('object-assign');

var ListStore = assign({}, EventEmitter.prototype, {
  items: [],

  getAll: function () {
    return this.items;
  },

  addNewItemHandler: function (text) {
    this.items.push(text);
  },

  emitChange: function () {
    this.emit('change');
  },

  addChangeListener: function(callback) {
    this.on('change', callback);
  },

  removeChangeListener: function(callback) {
    this.removeListener('change', callback);
  }
});

In the above code, ListStore inheritances EventEmitter.prototype, so you can use ListStore.on() and ListStore.emit().

After updated(this.addNewItemHandler()), the Stores emit an event(this.emitChange()) declaring that their state has changed, so the Views may query the new state and update themselves.

Views, again

Now, we come back to the Views for implementing an callback for listening the Store's change event.

// components/MyButtonController.jsx
var React = require('react');
var ListStore = require('../stores/ListStore');
var ButtonActions = require('../actions/ButtonActions');
var MyButton = require('./MyButton');

var MyButtonController = React.createClass({
  getInitialState: function () {
    return {
      items: ListStore.getAll()
    };
  },

  componentDidMount: function() {
    ListStore.addChangeListener(this._onChange);
  },

  componentWillUnmount: function() {
    ListStore.removeChangeListener(this._onChange);
  },

  _onChange: function () {
    this.setState({
      items: ListStore.getAll()
    });
  },

  createNewItem: function (event) {
    ButtonActions.addNewItem('new item');
  },

  render: function() {
    return <MyButton
      items={this.state.items}
      onClick={this.createNewItem}
    />;
  }
});

In the above code, you could see when MyButtonController finds out the Store's change event occurred, it calls this._onChange to update the component's state, then trigger a re-render.

// components/MyButton.jsx
var React = require('react');

var MyButton = function(props) {
  var items = props.items;
  var itemHtml = items.map(function (listItem, i) {
    return <li key={i}>{listItem}</li>;
  });

  return <div>
    <ul>{itemHtml}</ul>
    <button onClick={props.onClick}>New Item</button>
  </div>;
};

module.exports = MyButton;

License

MIT

More Repositories

1

weekly

科技爱好者周刊,每周五发布
33,058
star
2

es6tutorial

《ECMAScript 6入门》是一本开源的 JavaScript 语言教程,全面介绍 ECMAScript 6 新增的语法特性。
JavaScript
20,881
star
3

jstraining

全栈工程师培训材料
18,959
star
4

react-demos

a collection of simple demos of React.js
JavaScript
16,171
star
5

free-books

互联网上的免费书籍
13,692
star
6

document-style-guide

中文技术文档的写作规范
10,968
star
7

webpack-demos

a collection of simple demos of Webpack
JavaScript
9,588
star
8

jstutorial

Javascript tutorial book
CSS
5,421
star
9

simple-bash-scripts

A collection of simple Bash scripts
Shell
1,415
star
10

reading-list

Some books I read
1,309
star
11

react-babel-webpack-boilerplate

a boilerplate for React-Babel-Webpack project
JavaScript
1,154
star
12

articles

personal articles
921
star
13

loppo

an extremely easy static site generator of markdown documents
JavaScript
707
star
14

wechat-miniprogram-demos

微信小程序教程库
599
star
15

book-computer-networks

Free E-Book: Computer Networks - A Systems Approach
596
star
16

koa-demos

A collection of simple demos of Koa
485
star
17

css-modules-demos

a collection of simple demos of CSS Modules
JavaScript
395
star
18

fortunes

A collection of fortune database files for Chinese users.
335
star
19

survivor

博客文集《未来世界的幸存者》
CSS
325
star
20

chrome-extension-demo

how to create a Chrome extension
JavaScript
302
star
21

node-oauth-demo

A very simple demo of OAuth2.0 using node.js
JavaScript
301
star
22

mocha-demos

a collection of simple demos of Mocha
JavaScript
254
star
23

tiny-browser-require

A tiny, simple CommonJS require() implemetation in browser-side
JavaScript
237
star
24

react-testing-demo

A tutorial of testing React components
JavaScript
214
star
25

road

博客文集《前方的路》
CSS
150
star
26

sina-news

新浪全球实时新闻
JavaScript
133
star
27

github-actions-demo

a demo of GitHub actions for a simple React App
JavaScript
132
star
28

weather-action

An example of GitHub Actions
Shell
107
star
29

user-tracking-demos

demos of tracking users with JavaScript
JavaScript
90
star
30

travis-ci-demo

A beginner tutorial of Travis CI for Node projects
75
star
31

openrecord-demos

an ORM tutorial for nodejs
73
star
32

website

HTML
63
star
33

markdown-it-image-lazy-loading

a markdown-it plugin supporting Chrome 75's native image lazy-loading
JavaScript
54
star
34

flux-todomvc-demo

A simplified version of Flux's official TodoMVC demo
CSS
49
star
35

Google-Calendar-Lite

A single-page webapp of Google Calendar, based on its API.
CSS
41
star
36

nilka

a command-line utility to resize images in batches
JavaScript
39
star
37

webpack-static-site-demo

a demo of generating a static site with React, React-Router, and Webpack
JavaScript
32
star
38

turpan

a wrapped markdown renderer based on markdown-it
JavaScript
27
star
39

hn

A personalized Hacker News
JavaScript
26
star
40

koa-simple-server

A simple koa server demo of logging HTTP request Headers and body
JavaScript
25
star
41

rpio-led-demo

controlling an LED with Raspberry Pi's GPIO
JavaScript
25
star
42

jekyll_demo

A very simple demo of Jekyll
22
star
43

node-systemd-demo

run a Node app as a daemon with Systemd
JavaScript
20
star
44

lvv2-feed

Lvv2.com's RSS feed
JavaScript
16
star
45

blog-stylesheet

my blog's stylesheet
CSS
14
star
46

loppo-theme-oceandeep

the default theme of Loppo
JavaScript
13
star
47

tarim

a template engine, using Lodash's template syntax and supporting including other templates
JavaScript
13
star
48

loppo-theme-ryf

个人网站的 Loppo 主题
CSS
11
star
49

Formula-Online-Generator

using Google Chart api to generate mathematical formulas in a webpage
10
star
50

turpan-remove-space

remove the space between English word and Chinese characters in markdown files
JavaScript
9
star
51

eslint-plugin-ignoreuglify

exclude uglified files from ESLint's linting
JavaScript
3
star
52

slides

JavaScript
3
star