React之flux

Flux:

简单说，Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。

Flux存在多种实现（至少15种），本文采用的是Facebook官方实现。

首先，Flux将一个应用分成四个部分。

• View： 视图层
• Action（动作）：视图层发出的消息（比如mouseClick）
• Dispatcher（派发器）：用来接收Actions、执行回调函数
• Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

Flux 的最大特点，就是数据的”单向流动“。

                  

• 用户访问 View
• View 发出用户的 Action
• Dispatcher 收到 Action，要求 Store 进行相应的更新
• Store 更新后，发出一个”change”事件
• View 收到”change”事件后，更新页面

上面过程中，数据总是”单向流动”，Action >Dispatcher > Store ,任何相邻的部分都不会发生数据的”双向流动”。这保证了流程的清晰。

原文及代码来自于阮一峰的https://github.com/ruanyf/extremely-simple-flux-demo

本文基于cra脚手架创建，es6写法。

View（第一部分）

请打开 Demo 的首页index.jsx ，你会看到只加载了一个组件。

import React, { Component } from 'react';
import MyButtonController from './components/MyButtonController';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <MyButtonController/>
      </div>
    );
  }
}
export default App;

MyButtonController的源码如下。

import React, { Component } from 'react';
import ListStore from '../stores/ListStore';
import ButtonActions from '../actions/ButtonActions';

import MyButton from './MyButton';

class MyButtonController extends Component {
  constructor(props){
      super(props);
      this.state = {
          items: ListStore.getAll()
      }
  }

  componentDidMount() {
    ListStore.addChangeListener(this._onChange);
  }

  componentWillUnmount() {
    ListStore.removeChangeListener(this._onChange);
  }

  _onChange = () => {
    this.setState({
      items: ListStore.getAll()
    });
  }

  createNewItem = (event) => {
    ButtonActions.addNewItem('new item');
  }

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

export default MyButtonController;

上面代码中，MyButtonController将参数传给子组件MyButton。后者的源码甚至更简单。

import React, { Component } from 'react';

class MyButton extends Component {
  render() {
    const { items } = this.props;
    const itemHtml = items.map(function (listItem, i) {
        return <li key={i}>{listItem}</li>;
      });
    return (
      <div>
        <ul>{itemHtml}</ul>
        <button onClick={this.props.onClick}>New Item</button>
      </div>
    );
  }
}

export default MyButton;

上面代码中，你可以看到MyButton是一个纯组件（即不含有任何状态），从而方便了测试和复用。这就是”controll view”模式的最大优点。 
MyButton只有一个逻辑，就是一旦用户点击，就调用this.createNewItem 方法，向Dispatcher发出一个Action。

// components/MyButtonController.js

  // ...
   createNewItem = (event) => {
    ButtonActions.addNewItem('new item');
  }

上面代码中，调用createNewItem方法，会触发名为addNewItem的Action。

Action

每个Action都是一个对象，包含一个actionType属性（说明动作的类型）和一些其他属性（用来传递数据）。 
在这个Demo里面，ButtonActions 对象用于存放所有的Action。

// actions/ButtonActions.js
import AppDispatcher from '../dispatcher/AppDispatcher';

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

export default ButtonActions;

上面代码中，ButtonActions.addNewItem方法使用AppDispatcher，把动作ADD_NEW_ITEM派发到Store。

Dispatcher

Dispatcher 的作用是将 Action 派发到 Store。你可以把它看作一个路由器，负责在 View 和 Store 之间，建立 Action 的正确传递路线。注意，Dispatcher 只能有一个，而且是全局的。 
Facebook官方的 Dispatcher 实现输出一个类，你要写一个AppDispatcher.js，生成 Dispatcher 实例。

AppDispatcher.register()方法用来登记各种Action的回调函数。

import { Dispatcher } from 'flux';
import ListStore from '../stores/ListStore';

const AppDispatcher = new Dispatcher();

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

export default AppDispatcher;

上面代码中，Dispatcher收到ADD_NEW_ITEM动作，就会执行回调函数，对ListStore进行操作。 
记住，Dispatcher 只用来派发 Action，不应该有其他逻辑。

Store

Store 保存整个应用的状态。它的角色有点像 MVC 架构之中的Model 。 
在我们的 Demo 中，有一个ListStore，所有数据都存放在那里。

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

var ListStore = objectAssign({}, 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);
  }
});

module.exports = ListStore;

上面代码中，ListStore.items用来保存条目，ListStore.getAll()用来读取所有条目，ListStore.emitChange()用来发出一个”change“事件。 
由于 Store 需要在变动后向 View 发送”change“事件，因此它必须实现事件接口。

上面代码中，ListStore继承了EventEmitter.prototype，因此就能使用ListStore.on()和ListStore.emit()，来监听和触发事件了。 
Store 更新后（this.addNewItemHandler()）发出事件（this.emitChange()），表明状态已经改变。 View 监听到这个事件，就可以查询新的状态，更新页面了。

View （第二部分）

现在，我们再回过头来看 View ，让它监听 Store 的 change 事件。

// components/MyButtonController.js
import React, { Component } from 'react';
import ListStore from '../stores/ListStore';
import ButtonActions from '../actions/ButtonActions';

import MyButton from './MyButton';

class MyButtonController extends Component {
  constructor(props){
      super(props);
      this.state = {
          items: ListStore.getAll()
      }
  }

  componentDidMount() {
    ListStore.addChangeListener(this._onChange);
  }

  componentWillUnmount() {
    ListStore.removeChangeListener(this._onChange);
  }

  _onChange = () => {
    this.setState({
      items: ListStore.getAll()
    });
  }

  createNewItem = (event) => {
    ButtonActions.addNewItem('new item');
  }

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

export default MyButtonController;

上面代码中，你可以看到当MyButtonController 发现 Store 发出 change 事件，就会调用 this._onChange 更新组件状态，从而触发重新渲染。

// components/MyButton.jsx
import React, { Component } from 'react';

class MyButton extends Component {
  render() {
    const { items } = this.props;
    const itemHtml = items.map(function (listItem, i) {
        return <li key={i}>{listItem}</li>;
      });
    return (
      <div>
        <ul>{itemHtml}</ul>
        <button onClick={this.props.onClick}>New Item</button>
      </div>
    );
  }
}

export default MyButton;

 总结

• 数据流是单向流动的。Store中给定初始数据，提供数据的getter()方法。
• View上有交互，有数据更新就向Dispatcher发出一个Action。Action 中指定actionType和更新的数据。并通过AppDispatcher.dispatch(action)分发出去。并在组件渲染完成后监听Store中数据的变化addChangeListener(),在组件销毁时移除监听的事件removeChangeListener().
• Dispatcher登记各种Action的回调函数，根据不同的actionType，调用ListStore的方法对数据进行更新，并触发emitChange事件。
• Store中自定义事件：addChangeListener(),removeChangeListener(),emitChange()实现事件接口。