react （五）Flux小结（内含MVC小知识）

从MVC到Flux

一、 MVC框架

把应用分为三个部分：

• Model（模型）：负责管理数据
• View（视图）：负责渲染用户界面
• Controller（控制器）：赋值接受用户输入，根据用户输入调用对应的Model部分逻辑，把产生的数据结果交给View部分呢，让View渲染出必要的输出。

缺点：无法禁绝View和Model之间的直接对话。

二、Flux框架

---

优点：

通过设置规则，即如果要改变界面，必须改变Store中的状态，如果要改变Store中的状态，必须派发一个action对象，规则禁绝了数据流混乱的可能。

---

Flux与MVC的对应关系：（左：flux，右：MVC）

view =》 view
dispatcher =》 controller
store =》 model
action =》 请求

---

缺点：

1、Store之间依赖关系。

当两个Store之间有逻辑依赖关系，就必须用上Dispatcher的waitFor函数。
另外，每一个Store是通过register函数的返回值dispatchToken标志的。
某些Store必须要等待其他Store处理完action后，才能进行操作。

2、难以进行服务器渲染

facebook设计flux时，就不是用作服务器端渲染的。

3、Store混杂了逻辑和状态。

做不到动态替换一个Store的逻辑。但是Redux可以做到。

---

三、Flux框架实例应用（修改前面的案例为flux框架应用）

首先，需要使用npm安装一下flux，此处不赘述了。

• 第一步：创建Dispathcer类，作用：用于派发action。

实例化一个dispatcher实例，进行action分发操作、store注册操作等。

import {Dispatcher} from 'flux';
export default new Dispatcher();

• 第二步：action配置，通常包括两小步：
  
  • 首先，定义ActionTypes.js文件，用于定义对象的多种类型type，通常为字符串。
  • 其次，定义Actions.js文件，用于定义action的多个构造函数，在构造函数内部，会通过dispatcher实例对象提供的dispatch函数派发出去。
    【注意：此文件中，每一个构造函数并不是action对象本身，而是能够产生并派发action对象的函数。】

/*ActionTypes.js文件内容*/
export const INCREMENT ='increment';
export const DECREMENT ='decrement';

/*Actions.js文件内容*/

/*当文件有多个使用export导出时，可以用此语法将所有导出融为一个对象进行访问。*/

import * as ActionTypes from './ActionTypes.js';
import AppDispatcher from './AppDispatcher.js';

export const increment =(counterCaption)=>{
    AppDispatcher.dispatch({
        type:ActionTypes.INCREMENT,
        counterCaption:counterCaption
    });
};

export const decrement=(counterCaption)=>{
    AppDispatcher.dispatch({
        type:ActionTypes.DECREMENT,
        counterCaption:counterCaption
    });
};

• 第三步：定义不同组件的不同store对象，用于存储应用状态，同时还要接受Dispatcher派发的动作，根据动作来决定是否要更新应用状态。

Tips：由于store会有多个，所以单独建立了一个stores文件夹进行存储为好。

注意：虽然名为store，但并不表示一个Store必须要存储，Store只是提供获取数据的方法，二Store提供的数据完全可以另一个Store计算得来。

/*CounterStore.js文件内容 */

import AppDispatcher from '../AppDispatcher';
import * as ActionTypes from '../ActionTypes';

const counterValues={
    'First':0,
    'Second':10,
    'Third':30
};

// 1、使用消息的方式建立Store和View的联系，相当于CounterStore成了EventEmitter实例对象。支持了emit、on、removeListener函数。

const CounterStore=Object.assign({},EventEmitter.prototype,{
    getCounterValues:function(){
        return counterValues;
    },
    emitChange:function(){
        this.emit(CHANGE_EVENT);
    },
    addChangeListener:function(callback){
        this.on(CHANGE_EVENT,callback);
    },
    removeChangeListener:function(callback){
        this.removeListener(CHANGE_EVENT,callback);
    }
});

// 2、store只有注册到Dispatcher实例上才能真正发挥作用

// 3、回调函数  作用：根据action对象来决定如何更新自己的状态

//            其中的形参action：是派发给dispatcher的action对象（第三步中的操作）
CounterStore.dispatchToken=AppDispatcher.register((action)=>{
    if(action.type===ActionTypes.INCREMENT){
        counterValues[action.counterCaption]++;
        CounterStore.emitChange();
    }else if(action.type===ActionTypes.DECREMENT){
        counterValues[action.counterCaption]--;
        CounterStore.emitChange();
    }
});
export default CounterStore;

展示总和的组件Summary单独建立自己的store文件，SummaryStore.js。

import AppDispatcher from '../AppDispatcher';
import * as ActionTypes from '../ActionTypes';
import CounterStore from './CounterStore';

function computeSummary(counterValues){
    let summary=0;
    for(const key in counterValues){
        if(counterValues.hasOwnProperty(key)){
            summary+=counterValues[key];
        }
    }
    return summary;
}
const SummaryStore=Object.assign({},EventEmitter.prototype,{
    getSummary:function(){
        // 实时读取CounterStore里面的值
        return computeSummary(CounterStore.getCounterValues());
    },
    emitChange:function(){
        this.emit(CHANGE_EVENT);
    },
    addChangeListener:function(callback){
        this.on(CHANGE_EVENT,callback);
    },
    removeChangeListener:function(callback){
        this.removeListener(CHANGE_EVENT,callback);
    }
});

SummaryStore.dispatchToken=AppDispatcher.register((action)=>{
    if((action.type===ActionTypes.INCREMENT)||(action.type===ActionTypes.DECREMENT)){
        //dispatchToken的用处：

        // waitFor函数：告诉Dispatcher，当前的处理必须要暂停，直到dispatchToken代表的那些已注册回调函数执行结束才能继续。
    AppDispatcher.waitFor([CounterStore.dispatchToken]);
    SummaryStore.emitChange();
}
});

• 第四步：配置Counter.js组件文件内容（相当于view视图的配置）
  Tips：会有多个视图（组件），所以建议建立view文件夹进行存储。

import React,{Component} from 'react';

// 注意：react最新版本已经将proptypes独立出来，需要自行安装prop-types才可以使用。

import PropTypes from 'prop-types';
import CounterStore from '../stores/CounterStore';
import * as Actions from '../Actions';

export default class Counter extends Component{
    constructor(props){
        super(props);
        this.onJia=this.onJia.bind(this);
        this.onJian=this.onJian.bind(this);
        this.state={
            // 实时获取到存储的值
            counter:CounterStore.getCounterValues()[props.caption]
        }
    }
    componentDidMount(){
        // 在装载完成后，给store添加事件
        CounterStore.addChangeListener(this.onChange);
    }
    componentWillUnmount(){
        // 在卸载前，删除store事件
        CounterStore.removeChangeListener(this.onChange);
    }
    // 定义事件函数
    onChange(){
        // 实时从store中获取到新值 赋值给count
        const newCount=CounterStore.getCounterValues()[this.props.caption];
        this.setState({count:newCount});
    }
    onJia(){
        // this.updateCount(true);
        // 分发一个action
        Actions.increment(this.props.caption);
    }
    onJian(){
        // this.updateCount(false);
        // 分发一个action
        Actions.decrement(this.props.caption);
    }
    render(){
        const btnStyle={
            margin:"0 20px"
        };
        return (
            <div>
                <button onClick={this.onJia} style={btnStyle}>+</button>
                <span>{this.props.caption}:{this.state.counter}</span>
                <button onClick={this.onJian} style={btnStyle}>-</button>
            </div>
        )
    }
}

Counter.propTypes={
    caption:PropTypes.string.isRequired,
    initValue:PropTypes.number,
    onUpdate:PropTypes.func
};
Counter.defaultProps={
    initValue:0,
    onUpdate:f=>f
};