翻译自 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 更多的内容:
四、创建 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 User is {flag} }}
当组件 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 (User is {
- flag
- },
- info: {
- info
- },
- type: {
- type
- })
- }
- }
上面组件会将
和
- StatusStore
- AnotherStore的state都加进去,但是,由于this.storeKeys的限制,它只会把flag和info这两个state加进去state,其他的不会。即使一个store中含有一个type 的state,也不会加进来。我们组件state里的type是安全的。
更多:
Reflux 这种直接的将 store 集成到组件里的方式又简单,又强大。你可以将 stores 集合起来,筛选那些 state 需要哪些不需要,甚至可以详细的规定 store 里的 state 如何对应到某个组件里的 state
六、文档
以上只是对 Reflux 的大体的介绍,九牛一毛,如果你想深入了解,请看官方文档。
我尽量的多翻译点 (*^__^*)
来源: http://www.cnblogs.com/redking-fighting/p/6681428.html