Reflux中文教程——概览

翻译自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的大体的介绍，九牛一毛，如果你想深入了解，请看官方文档。

我尽量的多翻译点(*^__^*)

 

转载于:https://www.cnblogs.com/redking-fighting/p/6681428.html