如何在ngrx/effect中分发多个Action？map与switchMap有何区别？

嘿，我来帮你把这个问题掰明白～

先搞懂map和switchMap在ngrx Effect里的核心区别 #

在ngrx Effect的管道操作中，这两个操作符的作用完全不同：

• map：它的作用是把源Observable发射的每个值，直接转换成另一个值返回。如果像你那样返回一个Action数组，ngrx会把整个数组当成一个单一的Action来处理——但ngrx期望的是单个Action对象，所以你的代码没法正常分发多个Action，这就是问题所在。
• switchMap：它属于高阶映射操作符，会把源Observable的每个值转换成另一个Observable，然后订阅这个新的Observable。更关键的是，它能让这个内部Observable逐个发射多个值（也就是多个Action），这样ngrx就能正确接收并处理每个Action了。另外，switchMap有个特性：如果源Observable有新的事件触发，会取消之前内部Observable的订阅，适合那些需要取消旧请求/操作的场景；如果不需要这个取消特性，你也可以用mergeMap（允许并发处理）或concatMap（按顺序处理，不并发）。

修复你的代码 #

你需要把返回的Action数组转换成一个能逐个发射Action的Observable，用switchMap配合from操作符就能搞定：

方案一：基于你原有的代码修改 #

@Effect() dispathMultipleActions$ = this.actions$.pipe(
    ofType(ActionTypes.UpdateSomething),
    switchMap(() => {
        const actions: Action[] = [];
        const array = [1, 2, 3, 4, 5];
        array.forEach(item => {
            if (item > 3) {
                actions.push(new DeleteAction(item));
            } else {
                actions.push(new ChangeAction(item));
            }
        });
        // 把Action数组转成Observable，逐个发射每个Action
        return from(actions);
    })
);

方案二：更简洁的写法 #

直接用from把数组转成Observable，再用map生成对应的Action：

@Effect() dispathMultipleActions$ = this.actions$.pipe(
    ofType(ActionTypes.UpdateSomething),
    switchMap(() => 
        from([1, 2, 3, 4, 5]).pipe(
            map(item => item > 3 ? new DeleteAction(item) : new ChangeAction(item))
        )
    )
);

这样修改后，你的Effect就能根据业务逻辑正确分发多个Action啦～

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