如何在组件中点击按钮后按顺序触发Action（类似mergeMap，非Effect类）

嘿，你的问题我get到了——现在直接连续dispatch两个Action会同时触发，没法保证第二个等第一个成功再跑，而且要求必须在组件里搞定，不能用Effect类对吧？没问题，咱们直接在组件里用异步逻辑控制就行。

为啥原来的写法不行？ #

你现在的代码是同步连续调用dispatch，不管第一个Action对应的异步操作（比如API请求）有没有完成，第二个都会立刻触发。要实现顺序执行，得等第一个Action的异步流程走完再发第二个。

方法1：用async/await + toPromise（代码最清爽） #

把按钮处理逻辑包成异步函数，先await第一个dispatch的Observable完成，再发第二个：

case BtnType.BTN_TEST: {
  const runActionsInOrder = async () => {
    try {
      // 等待第一个Action的异步操作彻底完成
      await this.store$.dispatch(action1({ /* 你的数据 */ })).toPromise();
      // 第一个成功后，再触发第二个Action
      this.store$.dispatch(action2({ /* 你的数据 */ }));
    } catch (err) {
      // 可选：第一个Action失败时的处理逻辑
      console.error('第一个Action执行炸了:', err);
    }
  };

  runActionsInOrder();
  break;
}

方法2：用Observable订阅链式触发 #

要是你不想用Promise，直接用Observable的订阅来控制顺序也可以：

case BtnType.BTN_TEST: {
  // 触发第一个Action，订阅它的完成事件
  this.store$.dispatch(action1({ /* 你的数据 */ }))
    .subscribe({
      next: () => {
        // 第一个Action成功走完，立刻发第二个
        this.store$.dispatch(action2({ /* 你的数据 */ }));
      },
      error: (error) => {
        // 第一个Action失败时的处理
        console.error('第一个Action执行出错:', error);
      }
    });
  break;
}

划重点 #

• 核心是利用store.dispatch()返回的Observable：当Action对应的异步任务（比如接口请求）完成时，这个Observable才会发出完成信号，咱们就靠这个信号来触发第二个Action。
• 这两种方法都完全在组件内实现，完全不用碰Effect类，完美符合你的要求。
• 如果你的Action是纯同步的，那顺序本来就没问题，但如果是异步的，上面的写法就能保证严格的先后执行顺序。

内容的提问来源于stack exchange，提问作者profiler