没有 Actions 和 Dispatcher 的 Flux？

Question

刚开始用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) => {...}
}

我看到的唯一缺点是这个对象可能会变得太大。为了解决这个问题，我们可以轻松地将商店分成多个对象，然后使用 Object.assign() 将它们分配回去。例如，我们可以分别拥有 UserStore 和 MessagesStore，然后在初始化我们的商店之前将它们合并回去。

我了解对于像 Facebook 这样拥有多个商店的大型项目来说是有意义的，然后一个操作可能会更新多个商店，因此操作应该分开。

但据我了解，Redux 有一个单一的商店，而且单一商店运作良好。那么，为什么我们不摆脱操作和调度程序，而只将单个商店用于 small/medium 大小的项目？

Answer 1

因为调度程序会更新商店，并且每当商店更新时，它也会发送回调，让组件知道它们可能需要更新。如果您在一家商店中手动修补数据，您自己有责任通知所有可能需要更改的组件。

但无论如何，如果您有办法以更简单的方式解决您的问题，请继续按照您的意愿编写。没有人强迫你使用任何东西。

也许 MobX 之类的东西更适合您的编程风格？它就像您描述的那样，但它有一种方法可以检测更改的内容并通知所有相关方。

Answer 2

对于小型项目，您甚至可以在不使用通量架构的情况下进行管理。从 flux 中删除 Dispatcher 意味着您不再使用 flux。

Flux applications have three major parts: the dispatcher, the stores, and the views (React components).

如果项目很小，我建议不要太维护单独的商店。就像我们在不使用 flux 架构的情况下所做的那样，只需在父组件内部维护状态。我们用这种方法做了一个小项目，效果很好。

注意：有时我们需要在没有公共父组件的组件之间进行通信。对于这种情况，我们必须使用调度程序或者可以使用小型 pub-sub 库。

最简单的 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，如果你使用它们，你会得到一个很棒的生态系统（plugins/extensions 建立在这个架构之上）。

最后一切都归结为个人选择。

没有 Actions 和 Dispatcher 的 Flux？

Flux without Actions and Dispatcher?

flux

reactjs

reactjs-flux

redux