Angular 当使用带有响应的效果时，操作会触发，但存储会冻结

这是一个没有合适答案的特定问题，很容易在网上找到

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

/*后台故事-可跳过*/

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

我最近创建了一个新项目，目的是严格遵循Redux模式，同时也使用googlefirestore作为我选择的数据存储

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

因为这是一个新的应用程序，它相对来说是空的——但是，我认为首先在经过身份验证的情况下将信息添加到数据存储中是合适的

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

在过去，我使用一个服务来登录和处理身份验证。不过，这次我使用的是NgRx

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

我已经成功地正确设置了存储，并且在使用选择器、操作和减缩器时，它按照预期工作。然而，问题在于何时需要效果，例如通过谷歌Firestore评估信息时

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

/*后台故事的结尾*/

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

问题

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

问题是，在尝试登录时会触发相应的身份验证操作，但是存储被冻结，并且在遇到致命错误后不会更新

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

因此，我们从未收到用户信息，下图中显示的错误会使存储停止运行

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

上述错误发生在将操作分派到登录之后。启动登录事件，并从状态为200的服务器接收响应。它在“网络”选项卡中返回所需信息。这纯粹是在商店方面的事情，事情失败

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

我想知道为什么

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

项目

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

我有以下项目设置

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

auth.actions.ts

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

auth.effects.ts

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

@Injectable()
export class AuthEffects {
  login$: Observable<Action> = createEffect<any, any, any, any>(() =>
    this.actions$.pipe(
      ofType(authActions.login),
      switchMap(action =>
        this.authService.logIn(action.credentials).pipe(
          switchMap((userResponse: UserCredential) => from([
            authActions.loginSuccess({user: userResponse}),
            authActions.loginFinalize()
          ])),
          catchError(error => from([
            authActions.loginFailure({error}),
            authActions.loginFinalize()
          ]))
        )
      )
    )
  );

  constructor(
    private actions$: Actions,
    private authService: AuthService
  ) {
  }
}

app.module.ts

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule, // firestore
    AngularFireAuthModule, // auth
    AngularFireStorageModule, // storage
    StoreModule.forRoot(reducers),
    EffectsModule.forRoot([AuthEffects]),
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, // Restrict extension to log-only mode
    }),
  ],

概述

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

登录操作在单击按钮时发送

登录操作记录在状态中，并将其请求发送到服务器

接收到带有用户信息的正确响应

登录成功和登录完成操作被调度，但是它们实际上不会改变存储状态，因为它们遇到致命错误，从而有效地“冻结”存储

因此，我们的登录虽然成功，但从未注册过，用户也不会更新

尝试了什么/有用的信息

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

---

如果我成功地从登录中删除了道具，并且没有传递给用户，那么代码就会运行——但显然这是无用的，因为我无法实际地将所需的信息传递回商店

我将按如下方式重构它：

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

对于国家-

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

export interface AuthState {
  authenticated: boolean;
  error: string;
  user: UserCredential;
}

const initialState: AuthState = {
  authenticated: false,
  error: null,
  user: null
};

实际上-

export const getAuthState = createAction('[Auth] Get Auth State');

export const login = createAction('[Auth] Login', props<{ credentials: Credentials }>());
export const loginSuccess = createAction('[Auth] Login Successful', props<{ user: UserCredential }>());
export const loginFailure = createAction('[Auth] Login Failed', props<{ error: any }>());
export const loginFinalize = createAction('[Auth] Login Finalized');

login$: Observable<Action> = createEffect<any, any, any, any>(() =>
    this.actions$.pipe(
      ofType(authActions.login),
      switchMap(action =>
        this.authService.logIn(action.credentials).pipe(
          map((userResponse: UserCredential) => authActions.loginSuccess({user: userResponse})),
          catchError(error => authActions.loginFailure({error}))
        )
      )
    )

---

这实际上并不能解决问题。我很欣赏这个建议，但它会导致同样的错误，并为我提供更少的功能