Question

说我们正在使用带有redux的mvvm框架，每次商店调度一个动作，我将我的组件更新为

Store.subscribe(() => {
  var { Order, Payment } = Store.getState():

  this.order = Order;
  this.payment = Payment;

  this.setCountDown(Order.leftTime);
  this.checkIsPaymentValid(Payment);
});

这里，setCountDown＆amp; checkIsPaymentValid只需要执行一次，从那时起就永远不会被调用。结果，我正在向组件添加状态，它变得像旧的jquery方式，它变成类似于下面的东西：

switch(Order.status) {
  case ORDER_STATUS_NORMAL:
    break;
  case ORDER_HAS_SET_COUNTDOWN:
    break;
}

有关处理此类情况的任何建议吗？

Answer 1

如果您需要根据操作执行某些逻辑而不是根据当前状态，则通常表明它应该作为调度操作的一部分发生。换句话说，在dispatch()之前或之后而不是在更改处理程序中执行这些副作用。

如果此逻辑跨越多个组件，您可能需要考虑使用类似Redux Saga的内容，它可以让您定义长时间运行的“传奇”，可以“采取”操作并执行一些副作用或调度更多操作商店。

Answer 2

我建议您在处理程序结束时取消编写。来自redux docs：

要取消订阅更改侦听器，请调用subscribe返回的函数。

因此，您可以拆分处理程序并始终更改this.order和this.payment，但只需拨打setCountDown和checkIsPaymentValid一次：

Store.subscribe(() => {
  var { Order, Payment } = Store.getState():

  this.order = Order;
  this.payment = Payment;   
});


const unsubscribe = Store.subscribe(() => {
  var { Order, Payment } = Store.getState():

  this.setCountDown(Order.leftTime);
  this.checkIsPaymentValid(Payment);
  unsubscribe();
});

使用Redux的Web应用程序，如何处理逻辑只需要执行一次

2 个答案: