Flux 深刻理解

阿li云双12 又来了，低至 1折 ，真心以为很划算了，能够点击本条内容直接参与。活动页面【查看更多】里面又89/年的服务器，能够买来学习或放博客

Flux的出现是复杂app重构的必然结果. 若是你仅仅只是想写几个小demo, 或者小产品, 那么使用Flux 彻底是得不偿失的. 由于他的复杂度, 可能比你的业务逻辑还多. so, what’s Flux on earth? 很简单, flux 是利用订阅发布模式的一种语法糖. 他包含4个部分: Action,Dispatch,Store,View. 能够看下图的基本架构.

虽然, 上面是一个闭环, 可是,起点应该从哪里开始呢？ 很简单, 从用户开始==> View. 经过View 触发不一样的Action, 而后经过中介者模式, 触发对应的Store, 来对数据执行不一样的操做, 而且,若是须要更新视图的话, 就须要在Store里面调用this.setState方法.

Ps: 若是你的项目不大的话, 就不要用flux了. 由于这样,真的没用.

ok, 咱们来实践一下, 使用React+Flux 来模仿人的行为. run ,speak, walk. 首先定义Action:

const Dispatcher = require('flux').Dispatcher;
let manager = new Dispatcher();
// 定义行为
const Actions = {
	run(){
		manager.dispatch({
			type:'RUN',
			time:4
		})
	},
	speak(){
		manager.dispatch({
			type:'SPEAK',
			time:10
		})
	},
	walk(){
		manager.dispatch({
			type:'WALK',
			time:20
		})
	}
}
复制代码

这里补充Dispatcher两个api:

• dispatch: 用来触发事件. 向register的管理中心传递信息
• register: 用来处理全部经过dispatch触发的内容

这里, 咱们定义一下Store. 用来进行计时. 这里, 额外用到了fbemitter这个类库, 用来实现事件型的订阅发布模式. 实际上,他的工做和Dispatcher是同样, 经过事件触发来传递信息. 不过,fbemitter能够正对不一样类型的事件进行触发, 事实上, 咱们若是要求不高, 彻底可使用fbemitter进行代替Dispatcher.

const EventEmitter = require('fbemitter').EventEmitter;
let emitter = new EventEmitter();
// 定义Store

const Store ={
	time:0
}
Store.dispatchToke = manager.register((action)=>{
		Store.time+=action.time;
		emitter.emit('change',Store.time,action.type);
})
复制代码

最后,来看一下关键的组件部分

class Person extends Component{
	constructor(){
		super();
		this.state={
			time:Store.time
		}
	}
	componentDidMount(){
		this.subscription = emitter.addListener('change',(time,type)=>{
			alert(` now I am ${type}ING I spend ${time} minutes`);
			this.setState({
				time:time
			})
		})
	}
	render(){
		return (
			<div> <button onClick={this.run.bind(this)}>run</button>{' '} <button onClick={this.speak.bind(this)}>speak</button>{' '} <button onClick={this.walk.bind(this)}>walk</button>{' '} </div>
			)
	}
	run(){
		Actions.run();
	}
	speak(){
		Actions.speak();
	}
	walk(){
		Actions.walk();
	}
}
复制代码

最后咱们来梳理一下Flux的总体架构吧.

那应该怎么写Flux呢？ 由于Flux已经把数据流的流向给定死了, 因此, 这也只给了咱们一条思惟路径. 由Action=>Store=>View=>Event

• 首先,了解你须要经过View的事件,执行那些动做. 全部的事件都是为了完成一些列动做而设置, 因此, 这也能够很容易抽象出Actions. 而且设置相应的dispatch传入适当的参数.

• 抽离全部的数据处理, 所有放到Store里. 在Store里,进行Dispatcher 的 register. 实现Actions和Store的链接. 设置Store 须要进行页面更新的自定义事件.

• 在UI组件中, 经过this.state 获取Store 暴露的原始数据. 在componentDidMount或者constructor 中,绑定Store设置的自定义事件. 而且UI中,设置事件和Actions的链接. 这里,就实现了 Store=>View=>Action 的single-direction.