flux 框架理解

2019独角兽企业重金招聘Python工程师标准>>>

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 token

waitFor(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 callbacks

isDispatching(): 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.js

var 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;
 

转载于:https://my.oschina.net/bosscheng/blog/745722