摘要：應(yīng)用架構(gòu)是用來構(gòu)建客戶端應(yīng)用的一種應(yīng)用架構(gòu)體系。它是一種類似的架構(gòu)，但是它更加簡單清晰，是一種單向數(shù)據(jù)流的架構(gòu)設(shè)計。將數(shù)據(jù)和動作類型傳遞給去分發(fā)數(shù)據(jù)流是一個包含所有動作類型的常量對象一個分發(fā)中心，它管理著應(yīng)用的所有數(shù)據(jù)流向。

Flux是Facebook用來構(gòu)建客戶端Web應(yīng)用的一種應(yīng)用架構(gòu)體系。它是一種類似MVC的架構(gòu)，但是它更加簡單、清晰，是一種單向數(shù)據(jù)流的架構(gòu)設(shè)計。

Note

請事先對React和ES6進行了解。

本文采用Facebook官方的Flux。

$ git clone https://github.com/ipluser/react-flux-demo.git
$ cd react-flux-demo
$ npm start

瀏覽器將會自動打開一個新的網(wǎng)頁（若沒有，請訪問http://127.0.0.1:8080）：

Flux應(yīng)用主要分為四個主要的部門：Views, Actions, Dispatcher, Stores.

單向數(shù)據(jù)流是Flux應(yīng)用的核心。Dispatcher, Stores, Views是獨立的輸入和輸出節(jié)點，而Action是一個包含數(shù)據(jù)和動作類型的簡單對象。

打開項目入口文件main.jsx:

// public/scripts/main.jsx
import React from "react";
import ReactDOM from "react-dom";
import TodoController from "./components/todoController.jsx";

ReactDOM.render(, document.body);

上面代碼中采用了ReactJS Controller View模式，一個"Controller View"是應(yīng)用中最頂層的組件，它管理著所有應(yīng)用狀態(tài)，并以屬性方式傳遞給子組件。 接下來我們看看toToController.jsx:

// public/scripts/components/todoController.jsx
import React from "react";

import TodoAction from "../actions/todoAction.js";
import TodoStore from "../stores/todoStore.js";
import Todo from "./todo.jsx";

export default class TodoController extends React.Component {
  constructor(props) {
    super(props);
  }

  newItem() {
    TodoAction.addItem("new item");
  }

  render() {
    return ;
  }
}

正如你所看到的，TodoController僅僅給Todo子組件指定了newItem動作。Todo接收屬性和渲染組件：

// public/scripts/components/todo.jsx
import React from "react";

import "../../styles/components/todo.scss";

export default function Todo(props) {
  let list = props.items.map((item, index) => {
    return 
{item}
;
  });

  return (
    

      
{list}
      Todo
    
  );
}

一旦點擊todo按鈕，TodoController將會觸發(fā)一個addItem動作。

TodoAction將數(shù)據(jù)和動作類型傳遞給Dispatcher去分發(fā)數(shù)據(jù)流:

// public/scripts/actions/todoAction.js
import AppDispatcher from "../dispatcher.js";
import TodoConstant from "../constants/todoConstant.js";

class TodoAction {
  addItem(text) {
    AppDispatcher.dispatch({
      actionType: TodoConstant.ADD_ITEM,
      text
    });
  }
}

export default new TodoAction();

todoConstants.js是一個包含所有動作類型的常量對象:

// public/scripts/constants/todoConstant.js
export default {
  ADD_ITEM: "TODO_ADD_ITEM"
};

Dispatcher一個分發(fā)中心，它管理著應(yīng)用的所有數(shù)據(jù)流向。每一個Store在這里注冊，并提供一個回調(diào)函數(shù):

// public/scripts/dispatcher.js
import { Dispatcher } from "flux";

import TodoStore from "./stores/todoStore";
import TodoConstant from "./constants/todoConstant";

const AppDispatcher = new Dispatcher();

TodoStore.dispatchToken = AppDispatcher.register(payload => {
  switch (payload.actionType) {
    case TodoConstant.ADD_ITEM:
      TodoStore.addItem(payload.text);
      break;
    default:
  }
});

export default AppDispatcher;

上面代碼中可以看到，當TodoAction提供給Dispatcher一個新動作時，TodoStore將會通過注冊時的回調(diào)函數(shù)接受動作的行為。

TodoStore包含狀態(tài)和業(yè)務(wù)邏輯。它的職責有點類似MVC中的model：

// public/scripts/stores/todoStore.js
import EventEmitter from "events";

class TodoStore extends EventEmitter {
  constructor() {
    super();
    this.items = [];
  }

  getAll() {
    return this.items;
  }

  addItem(text) {
    this.items.push(text);
    this.change();
  }

  change() {
    this.emit("change");
  }

  addListener(name, callback) {
    this.on(name, callback);
  }

  removeListener(name, callback) {
    this.removeListener(name, callback);
  }
}

export default new TodoStore();

再回到TodoController中，我們初始化應(yīng)用的狀態(tài)，同時監(jiān)聽Store的狀態(tài)改變事件：

// public/scripts/components/todoController.jsx
import React from "react";

import TodoAction from "../actions/todoAction.js";
import TodoStore from "../stores/todoStore.js";
import Todo from "./todo.jsx";

export default class TodoController extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: TodoStore.getAll() };
    this.onListChange = this.onListChange.bind(this);
  }

  componentDidMount() {
    TodoStore.addListener("change", this.onListChange);
  }

  componentWillUnmount() {
    TodoStore.removeListener("change", this.onListChange);
  }

  onListChange() {
    this.setState({
      items: TodoStore.getAll()
    });
  }

  newItem() {
    TodoAction.addItem("new item");
  }

  render() {
    return ;
  }
}

一旦TodoController接受到應(yīng)用狀態(tài)改變，將會觸發(fā)Todo重新渲染。

Facebokk Flux

Andrew - Controller-View

ruanyifeng - Flux 架構(gòu)入門教程

react-flux-demo