如何将Ngrx的LoadUsersPosts拆分为多个LoadUserPosts Effect？

首先，咱们先排查你当前代码里forEach没执行的核心问题，再给出正确的拆分实现方案。

先找问题根源 #

你代码里的forEach没触发，大概率是这两个原因：

1. action.payload是空数组或未正确传递：触发LOAD_USERS_POSTS动作时，有没有确认payload确实携带了有效的用户列表？如果payload是空、undefined，或者不是数组，forEach自然不会执行。
2. 直接返回数组的写法不够规范：虽然Ngrx的mergeMap可以处理数组，但这种写法调试起来不直观，而且如果数组为空，不会有任何反馈。

正确的拆分实现方案 #

我们可以借助RxJS的from操作符，把用户数组转换成Observable流，这样每个用户都会被依次处理，分发对应的单个加载动作。

旧版Ngrx（使用@Effect()装饰器）代码：

import { from, EMPTY } from 'rxjs';
import { mergeMap, map } from 'rxjs/operators';

@Effect() loadUsersPosts$ = this.actions$
  .ofType(LOAD_USERS_POSTS)
  .pipe(
    mergeMap((action: LoadUsersPosts) => {
      // 先校验payload的有效性，避免空指针
      if (!action.payload || !Array.isArray(action.payload) || action.payload.length === 0) {
        console.warn('LoadUsersPosts动作的payload不是有效用户数组');
        return EMPTY; // 返回空Observable，终止后续流程
      }

      console.log('开始处理用户列表:', action.payload);
      // 把用户数组转成Observable，每个用户依次发出
      return from(action.payload).pipe(
        map(user => {
          console.log('分发单个用户加载动作:', user);
          return new LoadPosts(user);
        })
      );
    })
  );

新版Ngrx（使用createEffect）代码（如果你的项目是v8+版本）：

import { createEffect, Actions, ofType } from '@ngrx/effects';
import { from, EMPTY } from 'rxjs';
import { mergeMap, map } from 'rxjs/operators';

loadUsersPosts$ = createEffect(() => this.actions$.pipe(
  ofType(LOAD_USERS_POSTS),
  mergeMap((action: LoadUsersPosts) => {
    if (!action.payload?.length) {
      console.warn('没有需要处理的用户数据');
      return EMPTY;
    }

    return from(action.payload).pipe(
      map(user => new LoadPosts(user))
    );
  })
));

额外注意事项 #

1. 确保单个LoadPosts Effect正常工作：你提到已有可正常加载单个用户帖子的Effect，要确认它在监听LoadPosts动作，并且能正确处理每个用户的加载请求。
2. 调试技巧：在触发LOAD_USERS_POSTS的地方，先打印动作的payload，确认数据正确传递；在loadUsersPosts$ Effect里添加日志，追踪每个步骤的数据流。

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