成功获取时从本地存储更新状态的角度效果

Question

我编写了以下效果来侦听页面上的成功获取并从本地存储更新状态：

export const updateStateFromTokensEffect = createEffect(
  (actions$ = inject(Actions), jwtService = inject(JwtHelperService)) => {
    return actions$.pipe(
      ofType(FeedActions.fetchSuccess),
      tap(() => {
        const token = localStorage.getItem('token');
        const {
          sub: userId,
          username,
          email,
          image,
        } = jwtService.decodeToken(token!);
        return AuthActions.loginSuccess({
          user: {
            userId,
            username,
            email,
            image,
          },
        });
      })
    );
  },
  {
    functional: true,
  }
);

我最初想将这个逻辑添加到我的路线守卫中，但决定不这样做。不用说，它不能按预期工作，甚至阻止页面加载，这是通过以下效果实现的：

export const feedEffect = createEffect(
  (actions$ = inject(Actions), feedService = inject(FeedService)) => {
    return actions$.pipe(
      ofType(FeedActions.fetch),
      switchMap(() => {
        return feedService.fetchArticles().pipe(
          map((articles: ArticleInterface[]) => {
            return FeedActions.fetchSuccess({ articles });
          }),
          catchError(() => {
            return of(FeedActions.fetchFailure());
          })
        );
      })
    );
  },
  { functional: true }
);

我有路由保护，只有在状态中有有效令牌时才加载路由。此令牌中包含用户的信息，因此我希望有某种方法可以根据用户的信息在每个页面上填充某些元素。为此，我需要在每次成功的页面加载时将其添加到我的全局状态（每个不是身份验证页面的页面）。

这种方法不好吗？有谁知道为什么第一个效果会破坏第二个效果？像往常一样，我们非常感谢任何帮助

旁注：我的倾向是，效果在某种程度上扰乱了 FeedActions.fetchSuccess 的流程，但我不确定，rxjs 操作很棘手

Answer 1

如果我没记错的话

tap

运算符用于副作用，而不是修改数据流本身。你从 tap() 返回

AuthActions

，我不认为这是使用

tap()

的正确方法。您可以尝试使用

map()

或

swithMap()

看看是否能解决您的问题？让我知道。