Flux架构小白入门笔记

Flux是facebook提出的一种处置惩罚前端数据的架构，进修Flux就是进修它的头脑。

这个笔记是我在进修了阮一峰先生的Flux 架构入门教程以后得出，
内里的例子和部份原文来自于其,差别在于我用es6将其改写了，并加入了解释。

做了两三个前端外包项目，都是后端供应数据接口，逻辑主要由前端完成，深感前端逻辑之庞杂，
特别是近来的一个项目，到后期营业逻辑代码混在一同基础没法保护。因而痛定思痛，想下定决心研讨下前端架构计划，
而Flux则是如今最火，最受好评的前端架构计划。

本例代码堆栈:flux_learn,喜好的话给个star哦！

我们按Flux数据流的递次来剖析，

View提议Action->Action通报到Dispatcher->Dispatcher将关照Store->Store的状况转变关照View举行转变

View由React组件组成，首先是MyButton.js

import React, {Component} from 'react'

class MyButton extends Component {

    render() {
        let items = this.props.items;
        return (
            <div>
                <ul>
                    {items.map((result, key) => {
                        return (
                            <div key={key}>{result}</div>
                        )
                    })}
                </ul>
                <button onClick={this.props.onClick}>New Item</button>
            </div>
        )
    }
}

export default MyButton

额，这个组件貌似没啥好讲的，会React和es6的一下就可以看懂。。。

接下来是由对MyButton举行封装的MyButtonController.js

import React, {Component} from 'react'
import MyButton from 'app/components/MyButton'
import listStore from 'app/stores/listStore'
import ButtonActions from 'app/actions/ButtonActions'

//对Action发生器举行初始化，buttonActions能发出差别范例action给Dispatcher
let buttonActions = new ButtonActions()

class MyButtonController extends Component {

    constructor(props) {
        //把props作为参数通报到super(),如许在constructor里即可接见this.props属性
        super(props)
        this.state = {
            items: []
        }
    }

    componentDidMount() {
        //在组件挂载后绑定组件的私有要领_onChange到Store,以后listStore状况变化即可关照组件挪用_onChange要领举行转变
        listStore.addChangeListener(this._onChange.bind(this))
    }

    componentWillUnmount() {
        //在组件移除后消除绑定组件的私有要领_onChange到Store
        listStore.removeChangeListener(this._onChange.bind(this))
    }

    //组件相应Store变化的回调函数
    _onChange() {
        this.setState({
            items: listStore.getAll()
        })
    }

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

    createNewItem() {
        //挪用Action发生器发出增添Item的Action
        buttonActions.addNewItem('new item')
    }
}

export default MyButtonController

在我们点击新增按钮后挪用createNewItem要领发出一个’ADD_NEW_ITEM’的Action到Dispatcher

接下来我们看看ButtonActions.js

import AppDispatcher from 'app/dispatcher/AppDispatcher'

class ButtonActions {

    //发送ADD_NEW_ITEM的Action的要领
    addNewItem(text) {
        //挪用Dispatcher猎取actionType为ADD_NEW_ITEM的Action
        AppDispatcher.dispatch({
            actionType: 'ADD_NEW_ITEM',
            text: text
        })
    }
}

export default ButtonActions

这里的addNewItem要领提议了一个actionType为ADD_NEW_ITEM的Action到Dispatcher

然后我们再看AppDispatcher.js

import flux from 'flux'
import listStore from 'app/stores/listStore'

//拿到flux模块里的Dispatcher类
let Dispatcher = flux.Dispatcher;
//用Dispatcher类new一个AppDispatcher对象
let AppDispatcher = new Dispatcher();

//挪用register要领注册接收到种种actionType的Action以后的回调函数
AppDispatcher.register(function (action) {
    switch (action.actionType) {
        case 'ADD_NEW_ITEM':
            listStore.addNewItemHandler(action.text)
            listStore.emitChange()
            break;
        default:
    }
})

export default AppDispatcher

末了是ListStore.js

import EventEmitter from 'events'

class ListStore extends EventEmitter {

    constructor() {
        super()
        //初始化数据
        this.items = []
    }
    
    //返回一切数据的要领
    getAll() {
        return this.items
    }

    //增添数据的处置惩罚函数
    addNewItemHandler(text) {
        this.items.push(text)
    }

    //提交变化
    emitChange() {
        this.emit('change')
    }

    //监听函数，当有变化时挪用注册的回调要领
    addChangeListener(callback) {
        this.on('change', callback)
    }

    //remore监听函数
    removeChangeListener(callback) {
        this.removeListener('change', callback)
    }
}

//new一个listStore作为单例暴露给别的模块运用
let listStore = new ListStore()

export default listStore

它担任纪录数据和状况并在有变化时转变View