flux沉思录：面向store和通信机制的前端框架

一、综述

Flux 被用来描述“单向”的数据流，且包含某些特殊的事件和监听器。

响应式编程是一种面向数据流和变化传播的编程范式

flux是响应式编程的一种？

Flux 在本质上采用了模型-视图-控制器 (MVC) 的结构，但引入了很高的复杂性。

https://www.ibm.com/developerworks/cn/web/wa-manage-state-with-redux-p1-david-geary/?mhq=使用%20Redux%20管理状态

二、store与model：

store相当于其它平台中的纯数据model；

或者java中的bean；

store在flux中处于中心节点的位置；

三、Flux架构中的结点：

事件源（包含UI）、store、UI组件；

四、flux中的通信机制

1、由事件源到store的通信机制；

1）通信信道：

var AppDispatcher = require('../dispatcher/AppDispatcher')

2）发送端表示层：将事件解释为通信数据并发送

var ButtonActions = {

addNewItem: function (text) {

AppDispatcher.dispatch({

actionType: 'ADD_NEW_ITEM',

text: text

});

},

};

3）接收端表示层：将通信数据解释为具体信息和操作

AppDispatcher.register(function (action) {

switch(action.actionType) {

case 'ADD_NEW_ITEM':

ListStore.addNewItemHandler(action.text);

ListStore.emitChange();

break;

default:

// no op

}

})

4）通信数据的格式:Action

actionType: 'ADD_NEW_ITEM',

text: text

5）表示层将通信信道和通信的端点进行了连接：事件源-信道-store；

2、由store到UI的通信机制；

1）EventEmitter.prototype提供了变化的订阅和发布的机制；

ListStore继承了EventEmitter.prototype，因此就能使用ListStore.on()和ListStore.emit()，来监听和触发事件了。

2）通信的信道即为EventEmitter.prototype，它提供的两个端点接口即位ListStore.emit(),ListStore.on();

3)通信的数据为store；

4）通信的端点为store和UI组件；

5）不需要表示层；

http://www.ruanyifeng.com/blog/2016/01/flux.html

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

android