flux

cnpm i flux -S

 

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

Flux的组成部分：

View： 视图层

ActionCreater（动作创造者）：视图层发出的消息（比如mouseClick）

Dispatcher（派发器）：用来接收Actions、执行回调函数

Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

Flux 的最大特点，就是数据的"单向流动"。而数据双向绑定是通过v-module实现的效果；单项数据流使逻辑更加清晰；双向绑定是一个效果；

Flux在2014年 facebook提出了，

View->（userInterfaceaction）->Action->(action actionType)->Dispatcher->(method 接收action)->Store->(事件驱动event emiter)-> View

用户点(ActionCreater)击按钮(view)创造action给dispatch,dispacther不能直接修改通过方法调用store的方法；当store更改后通过事件驱动（event emiter）修改view

action是一个纯对象有actionType；调用dispatcher的方法,

dispatcher接收到action,dispatch调用store的方法；store的方法触发自己的一个事件；该事件能够给所有用户发送一个方法；

Flux的组成部分：

1. 组件获取到store中保存的数据挂载在自己的状态上

2. 用户产生了操作，调用actions的方法

3. actions接收到了用户的操作，进行一系列的逻辑代码、异步操作

4. 然后actions会创建出对应的action，action带有标识性的属性(type)

5. actions调用dispatcher的dispatch方法将action传递给dispatcher

6. dispatcher接收到action并根据标识信息判断之后，调用store的更改数据的方法

7. store的方法被调用后，更改状态，并触发自己的某一个事件

8. store更改状态后事件被触发，该事件的处理程序会通知view去获取最新的数据

 

下面是一个简单的计数器案例：

1. Store:

//node自带的，让Store拥有绑定事件和触发事件的能力
import { EventEmitter} from 'events' 

//将方法传递给{}赋值给Store 
const Store= Object.assign({},EventEmitter.prototype,{
    money:50000,
    getMoney(){
       return this.money
    }
    reduceMoney(){
        //7.更改状态，触发自己的某一个事件
        this.money = num,
        alert(num)
        this.$emit('change_money')
    }
    addEventLister(handler){
        this.on('money_change',handler)
    }
})

2. 组件father:

import Store from './store'

class  Father extends React.Component({
    constructor(props){
        super(props)
        this.state={
            money:Store.getMoney()
        }
        //减少性能的消耗
        this.buying = this.buying.bind(this)
    }
    buying(){
        <!-- alert('花钱') -->
        Action.helpUserBuying(10)
    }
    componentWillMount(){
        //8. store更改状态后事件被触发，该事件的触发程序通知view去获取最新的数据
            Store.addEventListener(function()){
                this.setState({monney:Store.getMoney})
            }
    }
    render(){
        let {money} = this.state
        <p>我有{money}钱</p>
        <p><Button handler={this.buying}/></p>
    }
})

3. 无状态组件：函数

const Button = (props)=>{
    return <button onClick={props.handler}></button>
}

4. Action: 相当于一个银行柜台

import dispatcher from './dispather'
import {DRAW_MONEY} from 'TYPE'
const Action={//3.action接收到了用户的操作，进行一系列的逻辑代码运算
  //4. 然后action会创建出对应的action，action带有标识性的属性
  helpUserBuying(){
      let action={//
          type:'DRAW_MONEY'，
          num:
      }
      //5. 传递带有action的
      dispatcher.dispatch(action)  //触发dispatcher方法
  }

  makeMoney(){
       let action={//
          type:'MAKE_MONEY'，
          num:
      }
      dispatcher.dispatch(action) 
  }
}
export default action

5.TYPE: 类型

const DRAW_MONEY = 'DRAW_MONEY'
const MAKE_MONEY = 'MAKE_MONEY'

export {DRAW_MONEY}

6.接受action

import {Dispatcher} from 'flux'
import {DRAW_MONEY} from 'TYPE'

const dispathcher = new dispather
dispatcher.register(function(action){
    console.log('action')
    switch(action.type){
        //6. dispatch接受到action传递的参数
        case DRAW_MONEY:
           Store.reduceMoney(action.num)
        case DRAW_MONEY:
           Store.makeMoney(action.num)
    }
})

export default dispathcher

无状态组件：

当我们使用某些组件的时候，发现，该组件不需要拥有自己的状态，只需要接受到外界传入的属性之后做出响应；不需要在引入class之类的，直接写事件就可以了；