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的大體的介紹，九牛一毛，如果你想深入了解，請看官方文檔。

我盡量的多翻譯點(*^__^*)