React四——flux

一、模拟按钮点击num++

二、什么是flux

Flux是Facebook用来构建客户端Web应用的应用架构。它利用单向数据流的方式来组合React中的视图组件。它更像一个模式而不是一个正式的框架，开发者不须要太多的新代码就能够快速的上手Flux。

三、使用

View层产生了用户操做（user interfaction）调用了actionCreator的方法，创造了action发送到dispatcher，dispatcher通过判断后调用store的方法更改状态，
store触发事件，事件的处理程序就是让View获取最新的数据

四、例子（登陆等共享数据）

React（view）=> user click => action creators => actions =>dispatcher => callback => store => change Events + store queries =>  React（view）

下载：cnpm i flux -S

1> dispatcher

事件调度中心，flux模型的中心枢纽，管理着Flux应用中的全部数据流。它本质上是Store的回调注册。每一个Store注册它本身并提供一个回调函数。当Dispatcher响应Action时，经过已注册的回调函数，将Action提供的数据负载发送给应用中的全部Store。应用层级单例！！

2> store

负责封装应用的业务逻辑跟数据的交互。
    
Store中包含应用全部的数据

Store是应用中惟一的数据发生变动的地方

Store中没有赋值接口---全部数据变动都是由dispatcher发送到store，新的数据随着Store触发的change事件传回view。Store对外只暴露getter，不容许提供setter！！禁止在任何地方直接操做Store。

3> view

controller-view 能够理解成MVC模型中的controller，它通常由应用的顶层容器充当，负责从store中获取数据并将数据传递到子组件中。简单的应用通常只有一个controller-view，复杂应用中也能够有多个。

controller-view是应用中惟一能够操做state的地方(setState())

view(UI组件) ui-component 职责单一只容许调用action触发事件，数据从由上层容器经过属性传递过来。

4> 其余

action creators 做为dispatcher的辅助函数，一般能够认为是Flux中的第四部分。ActionCreators是相对独立的，它做为语法上的辅助函数以action的形式使得dispatcher传递数据更为便利。

五、建立store.js用来管理状态,例如登陆信息、定位信息等在多个组件共享的信息

<!--采用观察者模式 对事件进行检测 获得结果 进行双向绑定-->

const EventEmitter = require('event').EventEmitter   //用来绑定事件

var store = Object.assign({},EventEmitter.prototype,{  //合并方法
    num: 1,  
    addNumber:(){
        this.num++;
        this.emit('numChange')
    },
    getNum:(){
        return this.num
    },
    addNumberChange(callback){
        this.on('numChange',callback)
    }
})

export default store

六、actionCreator 建立actions.js

import dispatch from './dispatch.js'

const actions = {
    addNumber(){
        let action = {
            type: 'SAVE_NUMBER'
        }
        dispatcher: dispatch(action)
    }
}
export default actions

七、dispatch.js

import store from './store'

var Dispatcher = require('flux').Dispatcher
var dispatcher = new Dispatcher()  //派发器

dispatcher.register(funtion(action){
   switch(action.type){
       case  SAVE_NUMBER:store.addNumber();break;
   }
})


export default Dispatcher

八、在组件中接收

import store from './store.js'
import actions from './actions.js'
constructor(props){
    super(props)
    this.state = { num: store.getNum() }
}

add(){
    actions.addNumber()
}
compoentDidMount(){
    store.addNumberChange(function(){
        this.setData({
            num: store.getNum()
        })
    }.bind(this))
}

<!--view层点击事件-->
<button onClick={this.add.bind(this)}>+</button>