本文主要包含reflux,redux,store,view,tinyFlux等相关知识,匿名希望在学习及工作中可以帮助到您
看了redux和reflux,感觉redux好复杂啊,看reflux,1个小时就能弄懂,可是看redux,1天下来都迷迷糊糊的。
感觉flux不就应该是view层发消息给store,store根据消息去修改数据,修改完数据后通知涉及到被修改的view组建刷新state吗。。。
然后我看着reflux的使用方式(它的源代码没怎么看,感觉还是多了),自己写了个tinyFlux。。。二楼附上。。各位看看。。。。可能还太幼稚了。。。欢迎批评啊。。。
简单说说 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 绝对是你的不二选择。
PS. redux 确实不错,我们已经开始着手在生产环境中使用了。 Redux 核心概念 深入浅出Redux http://www.w3ctech.com/topic/1561 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; } function connect (store, def) { return { getInitialState: function(){ var state = {}; for (var i in def) { try{ state[i] = eval('store.'+def[i]); } catch(err) { console.log(err); } }; return state; }, reload: function() { var state = {}; for (var i in def) { try{ state[i] = eval('store.'+def[i]); } catch(err) { console.log(err); }
感觉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 绝对是你的不二选择。
PS. redux 确实不错,我们已经开始着手在生产环境中使用了。 Redux 核心概念 深入浅出Redux http://www.w3ctech.com/topic/1561 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; } function connect (store, def) { return { getInitialState: function(){ var state = {}; for (var i in def) { try{ state[i] = eval('store.'+def[i]); } catch(err) { console.log(err); } }; return state; }, reload: function() { var state = {}; for (var i in def) { try{ state[i] = eval('store.'+def[i]); } catch(err) { console.log(err); }