Flux 基础概念与实战入门

React Flux

前言

随着 React App 复杂度提升，我们会发现常常需要从 Parent Component 透过 props 传递方法到 Child Component 去改变 state tree，不但不方便也难以管理，因此我们需要更好的资料架构来建置更复杂的应用程式。Flux 是 Facebook 推出的 client-side 应用程式架构（Architecture），主要想解决 MVC 架构的一些问题。事实上，Flux 并非一个完整的前端 Framework，其特色在于实现了 Unidirectional Data Flow（单向流）的资料流设计模式，在开发复杂的大型应用程式时可以更容易地管理 state（状态）。由于 React 主要是负责 View 的部份，所以透过搭配 Flux-like 的资料处理架构，可以更好的去管理我们的 state（状态），处理复杂的使用者互动（例如：Facebook 同时要维护使用者是否按赞、点击相片，是否有新讯息等状态）。

由于原始的 Flux 架构在实现上有些部分可以精简和改善，在实务上我们通常会使用开发者社群开发的 Flux-like 相关的架构实现（例如：Redux、Alt、Reflux 等）。不过这边我们主要会使用 Facebook 本身提供 Dispatcher API 函式库（可以想成是一个 pub/sub 处理器，透过 broadcast 将 payloads 传给注册的 callback function）并搭配 NodeJS 的 EventEmitter 模组去完成 Flux 架构的实现。

Flux 概念介绍

React Flux

在 Flux Unidirectional Data Flow（单项流）世界里有四大主角，分别负责不同对应的工作：

  1. actions / Action Creator

    action 负责定义所有改变 state（状态）的行为，可以让开发者快速了解 App 的各种功能，若你想改变 state 你只能发 action。注意 action 可以是同步或是非同步。例如：新增代办事项，呼叫非同步 API 获取资料。

    实务上我们会分成 action 和 Action Creator。action 为描述行为的 object（物件），Action Creator 将 action 送给 dispatcher。一般来说符合 Flux Standard Action 的 action 会如以下范例程式码，具备 type 来区别所触发的行为。而 payload 则是所夹带的资料：

    1.  // action
    2.  const addTodo = {
    3.    type: 'ADD_TODO',
    4.    payload: {
    5.      text: 'Do something.'  
    6.    }
    7.  }
    9.  AppDispatcher.dispatch(addTodo);

    当发生 rejected Promise 情况：

    1.  {
    2.    type: 'ADD_TODO',
    3.    payload: new Error(),
    4.    error: true
    5.  }

  2. Dispatcher

    Dispatcher 是 Flux 架构的核心，每个 App 只有一个 Dispatcher，提供 API 让 store 可以注册 callback function，并负责向所有 store 发送 action 事件。在本范例中我们使用 Facebook 提供的 Dispatcher API，其内建有 dispatch 和 subscribe 方法。

  3. Stores

    一个 App 通常会有多个 store 负责存放业务逻辑，根据不同业务会有不同 store，例如：TodoStore、RecipeStore。 store 负责操作和储存资料并提供 view 使用 listener（监听器），若有资料更新即会触发更新。值得注意的是 store 只提供 getter API 读取资料，若想改变 state 一律发送 action。

  4. Views（Controller Views）

    这部份是 React 负责的范畴，负责提供监听事件的 callback function，当事件发生时重新取得资料并重绘 View。

Flux 流程回顾

React Flux

Flux 架构前置作业：

  1. Stores 向 Dispatcher 注册 callback，当资料改变时告知 Stores
  2. Controller Views 向 Stores 取得初始资料
  3. Controller Views 将资料给 Views 去渲染 UI
  4. Controller Views 向 store 注册 listener，当资料改变时告知 Controller Views

Flux 与使用者互动运作流程：

  1. 使用者和 App 互动，触发事件，Action Creator 发送 actions 给 Dispatcher
  2. Dispatcher 依序将 action 传给 store 并由 action type 判断合适的处理方式
  3. 若有资料更新则会触发 Controller Views 向 store 注册的 listener 并向 store 取得更新资料
  4. View 根据 Controller Views 的新资料重新绘制 UI

Flux 实战初体验

介绍完了整个 Flux 基本架构后，接下来我们就来动手实作一个简单 Flux 架构的 Todo，让使用者可以在 input 输入代办事项并新增。

首先，我们先完成一些开发的前置作业，先透过以下指令在根目录产生 npm 设定档 package.json：

  1. $ npm init

安装相关套件（包含开发环境使用的套件）：

  1. $ npm install --save react react-dom flux events
  1. $ npm install --save-dev babel-core babel-eslint babel-loader babel-preset-es2015 babel-preset-react eslint eslint-config-airbnb eslint-loader eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react html-webpack-plugin webpack webpack-dev-server

安装好后我们可以设计一下我们的资料夹结构，首先我们在根目录建立 src，放置 script 的 source 。在 components 资料夹中我们会放置所有 components（个别组件资料夹中会用 index.js 输出组件，让引入组件更简洁），另外还有 actions、constants、dispatcher、stores，其余设定档则放置于根目录下。

React Flux 资料夹结构

接下来我们参考上一章设定一下开发文档（.babelrc、.eslintrc、webpack.config.js）。这样我们就完成了开发环境的设定可以开始动手实作 React Flux 应用程式了！

HTML Markup：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>TodoFlux</title>
  6. </head>
  7. <body>
  8.     <div id="app"></div>
  9. </body>
  10. </html>

以下为 src/index.js 完整程式码，安排了父 component 和在 HTML Markup 插入位置：

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import TodoHeader from './components/TodoHeader';
  4. import TodoList from './components/TodoList';
  6. class App extends React.Component {
  7.   constructor(props) {
  8.     super(props);
  9.     this.state = {};
  10.   }
  11.   render() {
  12.     return (
  13.       <div>
  14.         <TodoHeader />
  15.         <TodoList />
  16.       </div>
  17.     );
  18.   }
  19. }
  21. ReactDOM.render(<App />, document.getElementById('app'));

通常实务上我们会开一个 constants 资料夹存放 config 或是 actionTypes 常数。以下是 src/constants/actionTypes.js：

  1. export const ADD_TODO = 'ADD_TODO';

在这个范例中我们继承了 Facebook 提供的 Dispatcher API（主要是继承了 dispatch、register 和 subscribe 的方法），打造自己的 DispatcherClass，当使用者触发 handleAction() 会 dispatch 出事件。以下是 src/dispatch/AppDispatcher.js：

  1. // Todo app dispatcher with actions responding to both
  2. // view and server actions
  3. import { Dispatcher } from 'flux';
  5. class DispatcherClass extends Dispatcher {
  6.   handleAction(action) {
  7.     this.dispatch({
  8.       type: action.type,
  9.       payload: action.payload,
  10.     });
  11.   }
  12. }
  14. const AppDispatcher = new DispatcherClass();
  16. export default AppDispatcher;

以下是我们利用 AppDispatcher 打造的 Action Creator 由 handleAction 负责发出传入的 action ，完整程式码如 src/actions/todoActions.js：

  1. import AppDispatcher from '../dispatcher/AppDispatcher';
  2. import { ADD_TODO } from '../constants/actionTypes';
  4. export const TodoActions = {
  5.   addTodo(text) {
  6.     AppDispatcher.handleAction({
  7.       type: ADD_TODO,
  8.       payload: {
  9.         text,
  10.       },
  11.     });
  12.   },
  13. };

Store 主要是负责资料以及业务逻辑处理，我们继承了 events 模组的 EventEmitter，当 action 传入 AppDispatcher.register 的处理范围后，根据 action type 选择适合处理的 store 进行处理，处理完后透过 emit 方法发出事件让监听的 Views Controller 知道。以下是 src/stores/TodoStore.js：

  1. import AppDispatcher from '../dispatcher/AppDispatcher';
  2. import { ADD_TODO } from '../constants/actionTypes';
  3. import { EventEmitter } from 'events';
  5. const store = {
  6.   todos: [],
  7.   editing: false,
  8. };
  10. class TodoStoreClass extends EventEmitter {
  11.   addChangeListener(callback) {
  12.     this.on(ADD_TODO, callback);
  13.   }
  14.   removeChangeListener(callback) {
  15.     this.removeListener(ADD_TODO, callback);
  16.   }
  17.   getTodos() {
  18.     return store.todos;
  19.   }
  20. }
  22. const TodoStore = new TodoStoreClass();
  24. AppDispatcher.register((action) => {
  25.   switch (action.type) {
  26.     case ADD_TODO:
  27.       store.todos.push(action.payload.text);
  28.       TodoStore.emit(ADD_TODO);
  29.       break;
  30.     default:
  31.       return true;
  32.   }
  33.   return true;
  34. });
  36. export default TodoStore;

在这个 React Flux 范例中我们把 View 和 Views Controller 整合在一起。在 TodoHeader 中，我们主要任务是让使用者可以透过 input 新增代办事项。使用者输入文字在 input 时会触发 onChange 事件，进而更新内部的 state，当使用者按了送出钮就会触发 onAdd 事件，dispatch 出 addTodo event。以下是 src/components/TodoHeader.js 完整范例：

  1. import React, { Component } from 'react';
  2. import { TodoActions } from '../../actions/todoActions';
  4. class TodoHeader extends Component {
  5.   constructor(props) {
  6.     super(props);
  7.     this.onChange = this.onChange.bind(this);
  8.     this.onAdd = this.onAdd.bind(this);
  9.     this.state = {
  10.       text: '',
  11.       editing: false,
  12.     };
  13.   }
  14.   onChange(event) {
  15.     this.setState({
  16.       text: event.target.value,
  17.     });
  18.   }
  19.   onAdd() {
  20.     TodoActions.addTodo(this.state.text);
  21.     this.setState({
  22.       text: '',
  23.     });
  24.   }
  25.   render() {
  26.     return (
  27.       <div>
  28.         <h1>TodoFlux</h1>
  29.         <div>
  30.           <input
  31.             value={this.state.text}
  32.             type="text"
  33.             placeholder="请输入代办事项"
  34.             onChange={this.onChange}
  35.           />
  36.           <button
  37.             onClick={this.onAdd}
  38.           >
  39.             送出
  40.           </button>
  41.         </div>
  42.       </div>
  43.     );
  44.   }
  45. }
  47. export default TodoHeader;

在上面的 Component 中我们让使用者可以新增代办事项，接下来我们要让新增的代办事项可以显示。我们在 componentDidMount 设了一个监听器 TodoStore 资料改变时会去把资料重新再更新，这样当使用者新增代办事项时 TodoList 就会保持同步。当以下是 src/components/TodoList.js 完整程式码：

  1. import React, { Component } from 'react';
  2. import TodoStore from '../../stores/TodoStore';
  4. function getAppState() {
  5.   return {
  6.     todos: TodoStore.getTodos(),
  7.   };
  8. }
  9. class TodoList extends Component {
  10.   constructor(props) {
  11.     super(props);
  12.     this.onChange = this.onChange.bind(this);
  13.     this.state = {
  14.       todos: [],
  15.     };
  16.   }
  17.   componentDidMount() {
  18.     TodoStore.addChangeListener(this.onChange);
  19.   }
  20.   onChange() {
  21.     this.setState(getAppState());
  22.   }
  23.   render() {
  24.     return (
  25.       <div>
  26.         <ul>
  27.           {
  28.             this.state.todos.map((todo, key) => (
  29.               <li key={key}>{todo}</li>
  30.             ))
  31.           }
  32.         </ul>
  33.       </div>
  34.     );
  35.   }
  36. }
  38. export default TodoList;

若读者都有跟着上面的步骤走完的话，最后我们在终端机的根目录位置执行 npm start 就可以看到整个成果囉，YA！
React Flux

总结

Flux 优势：

  1. 让开发者可以快速了解整个 App 中的行为
  2. 资料和业务逻辑统一存放好管理
  3. 让 View 单纯化只负责 UI 的排版不需负责 state 管理
  4. 清楚的架构和分工对于复杂中大型应用程式易于维护和管理程式码

Flux 劣势：

  1. 程式码上不够简洁
  2. 对于简单小应用来说稍微复杂

以上就是 Flux 的实战入门，我知道一开始接触 Flux 的读者一定会觉得很抽象，有些读者甚至会觉得这个架构到底有什么好处（明明感觉没比 MVC 高明到哪去或是一点都不简洁），但如同上述优点所说 Flux 设计模式的优势在于清楚的架构和分工对于复杂中大型应用程式易于维护和管理程式码。若还是不熟悉的读者可以跟着范例多动手，相信慢慢就可以体会 Flux 的特色。事实上，在开发社群中为了让 Flux 架构更加简洁，产生了许多 Flux-like 的架构和函式库，接下来将带读者们进入目前最热门的架构：Redux。

延伸阅读

  1. Getting To Know Flux, the React.js Architecture
  2. Flux 官方网站
  3. 从 Flux 与 MVC 的差异来简介 Flux
  4. @softwarecf/flux-stores-and-es6-9b453dbf9db#.uuf1ddj8u">Flux Stores and ES6
  5. React and Flux: Migrating to ES6 with Babel and ESLint
  6. Building an ES6/JSX/React Flux App – Part 2 – The Flux
  7. Question: How to choose between Redux’s store and React’s state? #1287
  8. acdlite/flux-standard-action

（image via devjournal、facebook、scotch.io）

| 回首页 | 上一章：ImmutableJS 入门教学 | 下一章：Redux 基础概念 |

| 勘误、提问或许愿 |