Question

我创建了一个小应用程序，允许用户使用ngrx状态登录和注销。用户登录效果很好。我可以登录并使用AuthGuard，可以在刷新页面后检查用户是否仍在应用程序中登录。现在，我应该注销用户。这是我的动作：

export const LOGOUT = '[Auth] Logout';
export const logout = createAction(
    LOGOUT
  );

比效果

logout$ = createEffect(() =>
        this.actions$
            .pipe(
                ofType(userActions.logout),
                tap(action => {
                    localStorage.removeItem('user');
                    this.router.navigate(['login']);
                })
            )
    ,{dispatch: false});

还有我们的减速器：

export const authReducer = createReducer (
    defaultUser,

    on(userActions.logout, (state, action) => {
        return {
            user: undefined
        }
    })
)

然后，我可以在组件中使用此按钮创建注销按钮

onLogout(){
    this.store.dispatch(logout())
  }

我希望分派先调用操作，然后再调用效果。在效果内部，应将用户从localStorage中删除。但是即使我尝试调试效果，它也不会进入tap操作符中。它不会删除项目，也不会重定向到登录名。我在这里还想念什么吗？

Answer 1

如official doc中所述，

编写了效果类后，必须注册它，以便效果开始运行。要注册根级效果，请添加 EffectsModule.forRoot()方法，对您的效果产生一系列影响 AppModule。

如果在这种情况下，effect模块被称为AuthEffect，则我们应该在AppModule中包含以下代码段：

import { EffectsModule } from '@ngrx/effects';
import { AuthEffects } from './effects/auth.effects';

@NgModule({
  imports: [
    EffectsModule.forRoot([ AuthEffects ])
  ],
})
export class AppModule {}

如果身份验证是在feature module内部进行管理的，则应使用此代码来在AuthEffect内部注册AuthModule：

import { EffectsModule } from '@ngrx/effects';
import { AuthEffects } from './effects/auth.effects';

@NgModule({
  imports: [
    EffectsModule.forFeature([ AuthEffects ])
  ],
})
export class AuthModule {}

NgRx注销效果未触发

1 个答案: