ReactNative之Flux框架的使用

概述

React Native 可以说非常火，很多bat的项目都在使用，不用发版就可以解决一些问题，给程序员带来了很多福利。
研究了一下午，把Flux框架在Android中给运行了起来，分享给大家……
关于Flux框架，官方地址是 Flux，有兴趣的可以参考。
官方给出的关于Flux的解释如下：

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React’s composable view components by utilizing a unidirectional data flow. It’s more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

翻译内容：

Flux是 Facebook 用于构建Web客户端应用程序的应用程序架构。它使用单向数据流来补充React的组合视图组件。与其说它是一个框架，不如说它是一种模式。你可以开始使用该框架，不用写一些新的代码。

流程图

Flux的流程图如下所示：

项目结构

开始搭建项目：

View

export default class O2OActDetail extends Component {
// 构造函数
    constructor(props) {
        super(props);
    }
    render() {
        return (<MyButtonController />);
    }

}

Components

MyButtonController

export default class MyButtonController extends Component {

    constructor(props) {
        super(props);
        this._onChange = this._onChange.bind(this);
        this.state = {
            items: ListStore.getAll()
        }
    }

    componentDidMount() {
        ListStore.addChangeListener(this._onChange);
    }

    componentWillUnmount() {
        ListStore.removeChangeListener(this._onChange);
    }

    _onChange() {
        var items = ListStore.getAll();
        Util.log("MyButton=====>_onChange-->" + items.length)
        this.setState({
            items: ListStore.getAll()
        });
    }

    render() {
        return (<MyButton
            items={this.state.items}
        />);
    }
}

MyButton

export default class MyButton extends Component {
// 构造函数
    constructor(props) {
        super(props);
        this.createNewItem = this.createNewItem.bind(this);
        var items = props.items;
        Util.log("MyButton=====>items-->" + items.length)
    }

    createNewItem() {
        ButtonActions.addNewItem(‘data‘);
    }

    render() {
        var itemHtml = this.props.items.map(function (listItem, i) {
            return listItem + i;
        });

        return (
            <View>
                <TouchableOpacity onPress={() => {
                    this.createNewItem()
                }} activeOpacity={1.0}>
                    <View style={{
                        width: 100, height: 40, borderWidth: 1, borderRadius: 4,
                        borderColor: "#f35353", margin: 50, alignItems: "center"
                    }}>
                        <Text style={{alignItems: "center"}}>测试按钮</Text>
                    </View>
                </TouchableOpacity>
                <View style={{flexDirection: "row"}}>
                    <Text style={{fontSize: 34, marginLeft: 100}}>{itemHtml}</Text>
                </View>
            </View>);
    }
}

actions

ButtonActions

var ButtonActions = {

    addNewItem (text) {
        Util.log("MyButton=====>ButtonActions-->" + text)
        AppDispatcher.dispatch({
            actionType: ‘ADD_NEW_ITEM‘,
            text: text
        });
    },

};

module.exports = ButtonActions;

Dispatcher

/**
* Created by shenyiya on 2017/2/14.
*/
var ListStore = require(‘../../o2o/stores/ListStore’);

var Dispatcher = require(‘flux’).Dispatcher;

var AppDispatcher = new Dispatcher();

AppDispatcher.register((action) => {

switch (action.actionType) {
    case ‘ADD_NEW_ITEM‘:
        ListStore.addNewItemHandler(action.text);
        ListStore.emitChange();
        break;
    default:
    }
    });
    module.exports = AppDispatcher;

AppDispatcher

/**
 * Created by shenyiya on 2017/2/14.
 */
var ListStore = require(‘../../o2o/stores/ListStore‘);
var Dispatcher = require(‘flux‘).Dispatcher;
var AppDispatcher = new Dispatcher();
AppDispatcher.register((action) => {

    switch (action.actionType) {
        case ‘ADD_NEW_ITEM‘:
            ListStore.addNewItemHandler(action.text);
            ListStore.emitChange();
            break;
        default:
        // no op
    }
});
module.exports = AppDispatcher;

Stores

ListStore

/**
 * Created by shenyiya on 2017/2/14.
 */
var EventEmitter = require(‘events‘).EventEmitter;
var assign = require(‘object-assign‘);
var ListStore = assign({}, EventEmitter.prototype, {
    items: [],
    getAll: function () {
        return this.items;
    },
    addNewItemHandler: function (text) {
        this.items.push(text);
    },
    emitChange: function () {
        this.emit(‘change‘);
    },
   addChangeListener: function(callback) {
        this.on(‘change‘, callback);
    },
    removeChangeListener: function(callback) {
        this.removeListener(‘change‘, callback);
    }
});
module.exports = ListStore;

到这里位置，该项目的所有结构搭建完成。

感谢

感谢 阮一峰 作者的博客《Flux 架构入门教程》指导 Flux 架构入门教程
如果大家有问题可以添加我的微信 shenyiya 一起讨论。