flux 框架理解

在 flux 框架里面，主要有的概念有 view，store，dispatcher，action

一般的实现是

action -> dispatcher->store->view

同时，也会存在 由view 出发 action 的事情，这个时候，实现路线就是

view-action-> dispatcher -> store -> view

代码结构

js -    actions        - // 行为        xxActionCreator.js    components        - // react 组件         xxx.react.js    constants        - // 常量        xxxConstants.js    dispatcher        - // 分发器        xxDispatcher.js    stores        - // 存储        xxxStore.js    utils        - // 工具类           xxxUtil.js    app.js

对于 dispatcher 层职责理解

dispatcher is userd to broadcast payloads to registered callbacks,This is different from generic pub-sub systems in two ways:

• callbacks are not subscribed to particular events,every payload is diapatched to every registred callback;

• callbacks can be deferred in whole or part until other callbacks have been executed.

提供的api

register(function callback): registers a callback to be invoked with every dispatched payload,returns a token that can be used with waitFor()unregister(string id): removes a callback based on its tokenwaitFor(array ids): waits for the callbacks specified to be invoked before continuing executin of the current callback,this method should only be used by a callback in response to a dispatched payload. dispatch(object payload): dispatches a payload to all registerd callbacksisDispatching(): is this dispatcher currently dispatching.

主要的方法 有 register 和 dispatch 两个方法。

对于 view 层的职责理解

• view层不能直接修改 store层的数据，必须是view层出发一个action，然后出发dispatcher，触发store层的数据修改，然后同时刷新view 层的展示效果。

• view层 完全是作为 store 层的数据显示，同时提供一些交互事件，使用方通过这些交互事件触发action->dispatch->store 出发 数据的修改，然后根据view层绑定的数据，更新view 的页面。

对于 store 层的职责理解

• store 层主要做的是存储数据，然后通过注册dispatcher.register() 方法。
• 一般需要在store 层中集成 EventEmitter 事件，提供 emit，removeListener 和 on 方法，和 view 层 连接起来。

对于 view 层如何与 store 层组合在一起工作的

在view 层里面，主要是引入到store 层的数据,并且监听事件变化。

// ThreadSection.js// componentDidMount: function() {    //  监听 store 中数据变更，然后出发 onchange 事件。    ThreadStore.addChangeListener(this._onChange);        UnreadThreadStore.addChangeListener(this._onChange);  }      // threadStore.js    /**    * @param {function} callback   */  addChangeListener: function(callback) {    this.on(CHANGE_EVENT, callback);  },

然后在出发用户操作事件的时候，触发事件。

emitChange: function() {    this.emit(CHANGE_EVENT);  }

这个时候 on 方法监听的事件就会被执行，就会导致， ThreadSection.js 里面就会执行 this._onChage 方法。

然后在 this._onChange 方法里面执行的是：

/**   * Event handler for 'change' events coming from the stores   */  _onChange: function() {    // 更新 state    this.setState(getStateFromStores());  }

重新拉去数据去了。（好暴力的处理方式）

对于 action 层职责理解

对于 action 层，主要是被view 层调用使用的，然后在里面执行 dispatcher.dispatch 方法，来调用store 里面的方法，触发 store 里面的数据变化。

所以说： action 层只是单纯的方法提供者，提供一个桥梁。

对于 dispatcher 层职责理解

在一个 app 里面，有仅有一个 dispatcher ，负责统一的事件的 register 和 dispatch

// AppDispatcher.jsvar Dispatcher = require('flux').Dispatcher;module.exports = new Dispatcher();

对于 register 方法，主要是给 store 使用的，在store 里面调用方法

// Store.js        var AppDispatcher = require('./xxxxx');            AppDispatcher.register(function(action){        switch (action.actionType){                    case 'pppp':                xxx            break;                            }    })

对于 dispatch 方法，主要是给 action 调用的，在action 里面调用方法

// action.js  var AppDispatcher = require('./xxxxx');    var Actions = {     xxx:function(){        AppDispatcher.dispatch({            action:'pppp',            // 下面是参数            id:id        })    } }  module.exports = Actions;