翻译自github上的reflux项目,链接:https://github.com/reflux/refluxjs
〇、安装及引入
安装:
npm install reflux
引入:
var Reflux = require("reflux");//CommonJS风格
或
import Reflux from "reflux";//ES6风格
一、Overview概览
The main function of Reflux is to introduce a more functional programming style architecture by eschewing MVC like pattern and adopting a single data flow pattern.
Reflux的主要功能是引入一个函数式编程风格架构,采用单向数据流模式,而非MVC类似的模式。
这个模式由actions和data stores组成。当actions引入新数据时,要经过data stores之后再由view 组件展示。如果组件有事件要更改data stores,也需要经过相应的actions再传递到stores。
二、用法
要用reflux,我们需要创建可以被React Component唤起的actions;负责存储、更新数据的stores,stores会监听actions;同样的,stores会与React Component挂钩,当store里state更新时,也更新React Component中的state。因此,有3个概念如下:
1、创建actions
2、创建stores
3、创建 stores与React Component的联系(钩子)
三、创建actions
var statusAction = Reflux.createAction();//可选的参数对象
一个action是函数,可以像任何其他函数一样被调用,如:statusUpdate(data)
也有一个创建多个action的函数
var Actions = Reflux.createActions([ "statusUpdate", "statusEdited", "statusAdded"]);
Actions对象现在包含多个actions,它们被调用的方式与上面一样
Actions.statusUpdate();
关于Actions更多的内容:
- 用子actions异步加载文件
- 做preEmit和shouldEmit检查
- 快捷方法
四、创建Stores
创建data store很像ReactJS的React.Component,就是创建一个继承自Reflux.Store的类。
像component一样,store也有一个state属性,并且setState用法也一样。你可以在constructor中创建所有的action listeners,并且用store自己的listenTo函数注册他们
class StatusStore extends Reflux.Store{ constructor(){ super(); this.state = {//设置store的默认值和在react里面一样 flag: ‘OFFLINE‘ }; this.listenTo(statusUpdate, this.onStatusUpdate)//监听statusUpdate action } onStatusUpdate(status){ var newFlag = status ? ‘ONLINE‘: ‘OFFLINE‘; this.setState({flag: newFlag}); } }
在上面的例子中,无论何时statusUpdate被调用,store里面的onStatusUpdate回调函数就会被调用,参数就是传入action的参数。比如,action如果这样调用的:statusUpdate(true),那么onStatusUpdatestatus被调用时的参数就是true。
store也可以方便的注册actions集,比如this.listenables。 如果一个 action 对象(或者包含多个actions对象的数组)这样用的话,会自动的以名字注册回调函数。如on+驼峰,onActionName
var Actions = Reflux.createActions([‘firstAction‘, ‘secondAction‘]); class StatusStore extends Reflux.Store{ constructor(){ super(); this.listenables = Actions; } onFirstAction(){ // } onSecondAction(){ // }}
Reflux Stores非常强大,甚至可以做到创建可以被局部读取和设置的全局的state,或者 full-state time-travel, debugging, etc.(什么意思。。。。)
五、Hooking Stores to Components
创建了actions和stores之后,现在最后一步就是Hooking Stores to Components。
非常简单,extends React.Component 换成extends Reflux.Component,再设置上stores,就可以了。
Reflux.Component是继承自React.Component的,所以你可以放心使用。
两者唯一不同就是Reflux.Component允许你设置store,以便从store中获取state
class MyComponent extends Reflux.Component{ constructor(props){ super(props); this.state = {};//store会将它的state加到组件的state里面去 this.store = StatusStore;//assign这个store 类就可以了 } render(){ var flag = this.state.flag; return <div>User is {flag}</div> }}
当组件mount的时候,要么会创建StatusStore的一个单例实例(如果还未存在),要么会用一个已经存在的单例实例(如果已经被别的使用这个store的组件创建了)
注意,你可以:
1、可以将this.stores 赋值为包含一系列store类的数组
2、设置this.storeKeys(数组)来限制只有store的一部分state被混入到组件里
还有一个mapStoreToState方法用于完全控制store里的state到component 的对应关系
class MyComponent extends Reflux.Component{ constructor(props){ super(props); this.state = {type: ‘admin‘}; this.stores = [StatusStore, AnotherStore]; this.storeKeys = [‘flag‘, ‘info‘]; } render(){ var flag = this.state.flag; var info = this.state.info; var type = this.state.type; return ( <div>User is {flag}, info: {info}, type: {type}</div> ) }}
上面组件会将StatusStore
和 AnotherStore的state都加进去,但是,由于this.storeKeys的限制,它只会把flag和info这两个state加进去state,其他的不会。即使一个store中含有一个type 的state,也不会加进来。我们组件state里的type是安全的。
更多:
Reflux这种直接的将store集成到组件里的方式又简单,又强大。你可以将stores集合起来,筛选那些state需要哪些不需要,甚至可以详细的规定store里的state如何对应到某个组件里的state
六、文档
以上只是对Reflux的大体的介绍,九牛一毛,如果你想深入了解,请看官方文档。
我尽量的多翻译点(*^__^*)
Reflux中文教程——概览