比較redux和reflux以及自己寫個TinyFlux?

看了redux和reflux，感覺redux好複雜啊，看reflux，1個小時就能弄懂，可是看redux，1天下來都迷迷糊糊的。

感覺flux不就應該是view層發消息給store，store根據消息去修改數據，修改完數據後通知涉及到被修改的view組建刷新state嗎。。。

然後我看著reflux的使用方式（它的源代碼沒怎麼看，感覺還是多了），自己寫了個tinyFlux。。。二樓附上。。各位看看。。。。可能還太幼稚了。。。歡迎批評啊。。。

謝邀，Flux 相關的輪子已經太多了，實在看不過來，抱歉。

簡單說說 Reflux 和 Redux 的區別吧。

之前我在 如何理解 Facebook 的 flux 應用架構？ - 知乎用戶的回答 里提到過，目前市面上很多 Flux 相關的框架就是把 Dispatcher 隱藏了，然後封裝了 Action Creator 和 Component 綁定的細節，簡單地說就是「簡化 Flux 里冗餘的代碼和操作」。

Reflux 在實現上面說到的內容的基礎上，又提供了很多開發者喜歡的功能，比如 View 監聽 Action 這種違背 Flux 概念但是確實在實際應用中很方便的特性。

而 Redux 並不僅僅是「簡化 Flux」，它重新定義了 Flux 中每一個角色的功能、職責及實現方式。其中最大的不同是沒有 Store 的概念（或者說 Store 不再需要用戶去定義），而增加了 Reducer 的概念。Store 會通過我們定義的 Reducer 自動生成，使用 redux.createStore 方法。此外，Redux 定義了一個 middleware 機制，可以讓我們在 Action 中更方便的處理業務邏輯。

總結一下就是，如果你覺得目前 Flux 用著不爽太多冗餘代碼， 那麼你寫的 TinyFlux 很不錯，解決了你的很多問題；然而如果你想擁有更多 redux 帶來的新特性，或者說你喜歡並推崇不可變的數據結構，或者說你想顯得逼格比較高，那麼看懂並會用 redux 絕對是你的不二選擇。

//TinyFlux.js
function createStore (store, ...args) {
if (!store) {
throw new Error("請定義store");
};
if (typeof store.init === "function") {
store.init(args);
};
if (typeof store.actions !== "function") {
throw new Error("actions應該是一個返回一個對象的function，對象里的方法都要用箭頭表達式來書寫，利用箭頭表達式的this綁定。");
};
store.actions = store.actions();
if (store.subscriber || store.emit) {
throw new Error("不該存在subscriber和emit");
};
store.subscriber = [];
store.emit = function(argument) {
store.subscriber.forEach(component =&> component.reload());
};
return store;
}

module.exports = {
createStore: createStore,
connect: connect
}


//用戶自己寫的代碼部分 TodoStore.js
import TinyFlux from "./TinyFlux.js";
export default TinyFlux.createStore({
actions: function() {
return {
editItem: (itemKey, newLabel) =&> {
var foundItem = getItemByKey(this.list, itemKey);
if (!foundItem) {
return;
}
foundItem.label = newLabel;
this.updateList(this.list);
},
addItem: (label) =&> {
this.updateList([{
key: generateUUID(),
created: new Date(),
isComplete: false,
label: label
}].concat(this.list));
},
removeItem: (itemKey) =&> {
this.updateList(_.filter(this.list, function(item) {
return item.key !== itemKey;
}));
},
toggleItem: (itemKey) =&> {
var foundItem = getItemByKey(this.list, itemKey);
if (foundItem) {
foundItem.isComplete = !foundItem.isComplete;
this.updateList(this.list);
}
},
toggleAllItems: (checked) =&> {
this.updateList(_.map(this.list, function(item) {
item.isComplete = checked;
return item;
}));
},
clearCompleted: () =&> {
this.updateList(_.filter(this.list, function(item) {
return !item.isComplete;
}));
},
getAllItem: () =&> {
//return JSON.parse(JSON.stringify(this.list));
return this.list;
},
};
},
list: [{
key: generateUUID(),
created: new Date(),
isComplete: false,
label: "Rule the web"
}],//或者使用初始化方法，可以在createStore時附帶init方法的參數
// init: function(list, localStorageKey) {
// localStorageKey = localStorageKey || "TodoStore";
// if (list) {
// localStorage.setItem(localStorageKey, JSON.stringify(list));
// } else {
// list = localStorage.getItem(localStorageKey);
// if (!list || list.length == 0) {
// list = [{
// key: generateUUID(),
// created: new Date(),
// isComplete: false,
// label: "Rule the web"
// }];
// localStorage.setItem(localStorageKey, JSON.stringify(list));
// };
// };
// this.localStorageKey = localStorageKey;
// this.list = list;
// },
updateList: function(list) {
localStorage.setItem(this.localStorageKey, JSON.stringify(list));
// if we used a real database, we would likely do the below in a callback
this.list = list;
this.emit();
//this.trigger(list); // sends the updated list to all listening components (TodoApp)
}
});

function getItemByKey(list,itemKey){
return _.find(list, function(item) {
return item.key === itemKey;
});
}


//React組建
import TinyFlux from "./TinyFlux.js";
import TodoStore from "./TodoStore.js";
var actions = TodoStore.actions;
export var TodoApp = React.createClass({
mixins: [TinyFlux.connect(TodoStore,{
list: "list" //TodoApp的state的list屬性等於TodoStore的"list"屬性，這第二個list也可以有多層數據，例如{sex: "user.sex"}
})],
render: function() {
return (
&
&
&
&
& );
}
});