React四——flux

2024年2月2日 129次阅读 来源: Cymiran

1、模拟按钮点击num++

2、什么是flux

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

3、使用

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

4、例子（登录等共享数据）

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传递数据更为便利。

5、创建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

6、actionCreator 创建actions.js


import dispatch from './dispatch.js'

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

7、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

8、在组件中接收

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>
    原文作者：Cymiran
    原文地址: https://segmentfault.com/a/1190000012282698
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞