ReactNative之Flux框架的使用

• • 概述
  • 流程图
  • 项目结构
    • View
    • Components
    • actions
    • Dispatcher
    • Stores
  • 感谢

概述

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 显示的View

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"}}>測试button</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

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 一起讨论。