角度：ngrx 效果不触发

Posted 2023-02-19

【中文标题】角度：ngrx 效果不触发

【英文标题】：angular: ngrx effects not firing

【发布时间】：2019-07-02 16:56:52

【问题描述】：

我已经开发了一些实现 Redux (NgRx) 的 Angular 应用程序。 我无法弄清楚我当前项目的问题。

动作：

export class GetUserFromStorage implements Action 
  readonly type = UserActionTypes.GetUserFromStorage;


export class GetUserFromStorageSuccess implements Action 
  readonly type = UserActionTypes.GetUserFromStorageSuccess;
  constructor(public payload: User | null)  


export class GetUserFromStorageFail implements Action 
  readonly type = UserActionTypes.GetUserFromStorageFail;
  constructor(public payload: string)  

减速机：

case UserActionTypes.GetUserFromStorageSuccess:
    return 
        ...state,
        user: action.payload,
        error: ''
    ;

case UserActionTypes.GetUserFromStorageFail:
    return 
        ...state,
        error: action.payload
    ;

效果：

@Effect() getUserFromStorage$:
Observable<userActions.GetUserFromStorageSuccess | userActions.GetUserFromStorageFail>
    = this.actions$.pipe(
        ofType(userActions.UserActionTypes.GetUserFromStorage),
        tap(() => console.log('GETUserToStorage$', )),
        mergeMap((action: userActions.GetUserFromStorage) =>
            this.storageService.getItem(StorageKeys.USER).pipe(
                map((user: User | null) =>
                    new userActions.GetUserFromStorageSuccess(user)),
                catchError((error: string) =>
                    of(new userActions.GetUserFromStorageFail(error)))
                ))
            );

在 auth.service.ts 中，我订阅了 Store 并调度了一些 Action。

this.store.dispatch(new userActions.GetUserFromStorage());

this.store.pipe(select(userReducer.getUser)).subscribe(
    (user: User) => 
        console.log('user TEST: ', user);
        this.user = user;
    
);

我已经安装了 ReduxDevTools。 GetUserFromStorage 操作会触发，但不会触发 getUserFromStorage$ 效果。 'user TEST' 的 console.logged 值显示 'user' 为 'null'。 任何想法，有人吗？ 谢谢。

【参考方案1】：

确保您确实“激活”了它们。

注射效果：

@Injectable()

export class FooEffects 

  @Effect() getUserFromStorage$:
Observable<userActions.GetUserFromStorageSuccess | userActions.GetUserFromStorageFail>
    = this.actions$.pipe(
        ofType(userActions.UserActionTypes.GetUserFromStorage),
        tap(() => console.log('GETUserToStorage$', )),
        mergeMap((action: userActions.GetUserFromStorage) =>
            this.storageService.getItem(StorageKeys.USER).pipe(
                map((user: User | null) =>
                    new userActions.GetUserFromStorageSuccess(user)),
                catchError((error: string) =>
                    of(new userActions.GetUserFromStorageFail(error)))
                ))
            );

app.module.ts:

import EffectsModule from '@ngrx/effects';

imports: [
  EffectsModule.forRoot([
    FooEffects
  ])
]

【讨论】：

如果你看到我刚刚用自己的手掌拍过自己的脸...你会哭的...非常感谢！

去过那里 :-) 很高兴它有帮助！

回答仍然适用ngrx ^8.6.0和9。或者EffectsModule.forFeature()

对于动态功能模块，您必须确保在当前模块中加载了效果。将效果添加到当前模块将解决问题。