从商店调用 UI 操作

Calling UI action from store

问题的简短版本:

我可以从商店触发 UI 操作吗?

问题的长版:

我正在编写带有回流的送餐应用程序。好像我不太行 了解在我的应用程序中应该如何执行操作。

我有 BasketStore、StatusOverlay(组件)和操作:

// BasketStore actions
basketSync
basketSync.Completed
basketSync.Invalid
basketSync.Failed

// StatusOverlay actions
statusOverlayOpen
statusOverlayClose

应用程序的工作方式如下:

我按下按钮并发送 basketSync 动作。一旦发生,叠加层就会开始显示,并且 BasketStore 会向服务器发送数据请求。

然后根据服务器响应我触发 basketSync.completedbasketSync.failedbasketSync.invalid。当它无效或完成时我关闭覆盖,否则我显示另一个覆盖。

问题是我应该如何管理操作?我应该听 StatusOverlay 里面的 basketSync 打开它并在 basketSync.completedbasketSync.invalid 上关闭它还是只听 statusOverlayOpenstatusOverlayClose 并在 BasketStore.

内的某处触发这些操作

简短回答:在标准的 Flux 架构中,Flux 商店应该只发出一个简单的 CHANGE 事件,所以,不,你不能从商店触发 UI 操作。

我在许多 Flux 应用程序中看到了存储触发操作。有些人喜欢将他们的异步工作放在动作创建者中并在异步工作的回调中触发 "completed" 和 "failed" "sub-actions",其他人将异步工作放在商店本身和那个case 从那里触发子动作。他们的关键点,正如我所看到的那样,是在回调中你应该触发一个新的动作,而不是直接更新状态,这样数据突变只会发生操作的效果,而不是异步回调。

但是话虽如此,组件通常根本不应该监听操作。他们应该只听商店的更新,并以任何必要的方式反映该更新。因此,根据上述几点,商店可以侦听 "completed" 或 "failed" 操作,并适当更新其状态以反映 "completed" 或 "failed" 操作。然后组件根据商店的状态而不是直接根据操作呈现任何 "error" 指示。