reactjs - React/Flux - 为什么我需要 Action 调度程序？

Question

我知道我需要一个 emit.change() 调度程序，让所有组件知道商店内发生了某些变化。但我不明白为什么我需要分派(dispatch)操作而不是直接从操作内部调用存储，

.即我为什么要这样做:

var Dispatcher = require('dispatcher');
var MyActions = {
    addItem: function(item){
        Dispatcher.dispatch({
              action: 'ADD_ITEM',
              payload: item       
       })
    }
}

而不是这个:

var MyStore = require('mystore');
var MyActions = {
    addItem: function(item){
        MyStore.addItem(item);
    }
}

这是否适用于多个商店监听同一事件的情况，例如当 StoreA 和 StoreB 也监听 ADD_ITEM 时？

Answer 1

调度程序在调用操作时会一一触发它们。您需要调度员，因为:

1. 您希望以原子方式更改应用程序状态。这意味着，s1->s2(a1)、s2->s3(a2) 以同步方式进行。而不是 s1->s3(因为 a1 和 a2)。如果您不这样做，您将不得不担心与此特定操作一起触发的其他操作，并猜测所有这些组合的应用程序状态将如何变化。这就是一切崩溃的地方，你的代码将变得难以维护。 想象一下在存储中为每个触发的操作编写一个 if-else block ，以检查其他操作是否也处于事件状态。调度程序确保它在已经调度时不会调度。一次发出一份。保持你的状态树非常健康。

2. 调度程序还维护一个回调数组，以针对每个“操作”触发。这对于在多个存储上调用同一操作的回调非常有用。当存储订阅一个操作(使用 register)时，调度程序会添加与其关联的 registerHandler 并将其添加到数组中。借助此功能，您可以在需要时注册/注销您的商店。根据操作类型，您可以对所有注册的商店进行相应的更改。 如果您不使用调度程序，则在编写操作部分时，您将不得不担心所有必须通知的商店。不好!<​​/p>

3. 采用这种方法，您唯一需要关注的就是用一个 Action 击中调度员。剩下的事情就由调度程序决定，它会根据操作通知所有需要更改的商店。由于商店具有触发 View 的回调，因此可以在需要时调用这些回调。这使您的代码非常模块化。