如何在不存在 ngModule 的 Angular 17 独立组件中配置多个减速器？

Question

我开始使用 Angular 独立组件并使用 NgRx 状态管理。我正在尝试设置状态登录和管理员登录的两个部分。我为每个创建了两个单独的减速器。现在，当我尝试使用选择器访问时，我无法访问该状态的属性，它显示未定义。我想我搞砸了

app.config

文件中的提供者。我尝试了很多方法，但还是不行。

这是我的第一个减速机

import { createReducer, on } from "@ngrx/store";
import {
  login,
  loginFailure,
  loginSuccess,
  logout,
  resetLogin
} from "./auth.actions";

export interface LoginState {
  token: string | null,
  error: string | null,
  isLoading: boolean,
  user: any
}

const initialState: LoginState = {
  token: null,
  error: null,
  isLoading: false,
  user: null
}

export const loginReducer = createReducer(
  initialState,
  on(login, (state: LoginState) => ({ ...state , isLoading: true })),
  on(loginSuccess, (state: LoginState, { token, user }) => ({ 
    ...state,
    token,
    user,
    isLoading: false
  })),
  on(loginFailure, (state, { error }) => ({
    ...state,
    error,
    isLoading: false
  })),
  on(logout, () => initialState),
  on(resetLogin, () => initialState)
)

我的第二个减速机

import { createReducer, on } from "@ngrx/store";
import {
  adminLogin,
  adminLoginFailure,
  adminLoginSuccess
} from "./adminAuth.actions";

export interface AdminLoginState {
  error: string | null,
  isLoading: boolean,
  admin: any
}

const initialState : AdminLoginState = {
  error: null,
  isLoading: false,
  admin: null
}

export const adminLoginReducer = createReducer(
  initialState,
  on(adminLogin, (state: AdminLoginState) => ({ ...state , isLoading: true })),
  on(adminLoginSuccess, (state: AdminLoginState, { admin }) => ({
    ...state,
    admin,
    isLoading: false
  })),
  on(adminLoginFailure, (state, { error }) => ({
    ...state,
    error,
    isLoading: false
  })),                                                      
)

我尝试在 app.config 文件中设置提供，如下 -

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http';
import {
  StoreModule,
  combineReducers,
  provideState,
  provideStore
} from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';
import { loginReducer } from './states/auth.reducer';
import { LoginEffects } from './states/auth.effects';
import { adminLoginReducer } from './states/adminAuth.reducer';
import { AdminLoginEffects } from './states/adminAuth.effects';

const reducers = combineReducers({
  login: loginReducer,
  adminLogin: adminLoginReducer
});

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withComponentInputBinding()), 
    provideClientHydration(), 
    provideHttpClient(withFetch()), 
    importProvidersFrom(StoreModule.forRoot({
      login: loginReducer,
      adminLogin: adminLoginReducer
    })), 
    provideEffects([LoginEffects, AdminLoginEffects]),
    provideStore(reducers),
    provideState({ name: 'login', reducer: reducers })
  ,]
};

Answer 1

我找到了解决方案。我用我的新减速器添加了一个额外的 ProvideState 。这对我有用。

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes, withComponentInputBinding()), provideClientHydration(), provideHttpClient(withFetch()), 
               provideEffects([LoginEffects,AdminLoginEffects]), provideStore(), provideState({name:'login', reducer: loginReducer}), 
               provideState({name:'adminLogin', reducer: adminLoginReducer})
                ]
};