没有动作和调度程序的通量?
Posted
技术标签:
【中文标题】没有动作和调度程序的通量?【英文标题】:Flux without Actions and Dispatcher? 【发布时间】:2016-06-11 13:13:34 【问题描述】:我开始使用 Flux,我检查了 Redux 和 Facebook Flux。这个想法非常好,但我觉得那里有一些样板代码,有很多调用。
我知道对于大型项目,这些样板文件将来会有所帮助,但对于中小型项目,我想我们不能摆脱动作和调度程序,而只在商店内使用带有 setter 和 getter 的商店,还允许订阅商店进行更改?
对于聊天应用程序:
unreadMessages: 0,
messages: [
from: myUser,
to: toUser,
text: "hi"
, ...],
hasUnreadMsgs: () => unreadMessages !== 0 ,
newMsg: (fromUser, toUser) => unreadMessages++; -and insert msg-,
getMsgs: () => messages,
subscribe: (callback) => ...
我看到的唯一缺点是这个对象可能会变得太大。为了解决这个问题,我们可以轻松地将 store 分成多个对象,然后使用 Object.assign() 将它们分配回去。例如,我们可以分别拥有 UserStore 和 MessagesStore,然后在初始化我们的存储之前将它们合并回来。
我知道对于像 Facebook 这样的大型项目来说,拥有多个商店是有意义的,那么单个操作可能会更新多个商店,因此操作应该分开。
但据我了解,Redux 有一个单独的商店,而且单独的商店运作良好。 那么,为什么我们不应该摆脱 action 和 dispatcher 而只将单个 store 用于中小型项目呢?
【问题讨论】:
【参考方案1】:对于小型项目,即使不使用通量架构,您也可以进行管理。从 Flux 中移除 Dispatcher 意味着您不再使用 Flux。
Flux 应用程序具有三个主要部分:调度程序、商店、 和视图(React 组件)。
如果项目很小,我建议不要也维护单独的商店。只需在父组件内部维护状态,就像我们在不使用通量架构的情况下所做的那样。我们用这种方法做了一个小项目,效果很好。
注意:有时我们需要在没有共同父级的组件之间进行通信。对于这种情况,我们必须使用调度程序或可以使用小型 pub-sub 库。
最简单的发布/订阅实现可以是:
var Notifier = (function()
var callbacks = ;
return
subscribe: function(name, cb)
callbacks[name] || (callbacks[name] = []);
callbacks[name].push(cb);
,
notify: function(name, data)
if (!callbacks[name])
return;
callbacks[name].forEach(function(cb)
cb(data);
);
,
unsubscribe: function(name)
if (!callbacks[name])
return;
delete callbacks[name];
)();
但如果是中型或大型项目,我建议您从某种类型的模式开始。 Flux 或 redux 都是很好的开始。使用 redux 或 Flux 可能会迫使 yuu 编写一些样板文件,但从长远来看,它肯定会对您有所帮助。此外,不同的模式可能会带来不同的约定和良好实践,这将有助于大型团队做出快速选择并在应用程序范围内遵循相同的约定集。这也将有助于项目中新团队成员的轻松入职。
还有很多人采用了flux和redux,如果你使用它们,你会得到一个很棒的生态系统(插件/扩展建立在这个架构之上)。
最后一切都归结为个人选择。
【讨论】:
【参考方案2】:因为调度程序会更新存储,并且每当更新存储时,它也会发送回调,让组件知道它们可能需要更新。如果您在一家商店中手动修补数据,您有责任通知所有可能需要更改的组件。
但无论如何,如果您有办法以更简单的方式解决您的问题,请继续按照您的意愿编写它。没有人强迫你使用任何东西。
也许像MobX 这样的东西可能更适合您的编程风格?就像您描述的那样,但它有一种方法可以检测到发生了什么变化并通知所有相关方。
【讨论】:
以上是关于没有动作和调度程序的通量?的主要内容,如果未能解决你的问题,请参考以下文章