Angular NgRx新手求助：服务调用后无法获取当前状态及代码优化

Hey there! Let's tackle your NgRx issue step by step—first we'll cover how to properly access state after a service call, then go through key optimizations for your code.

If you're not seeing updated state after your service call, here are the core steps to fix this:

1. Use Selectors with the Store in Components
   Always inject the Store into your component and use typed selectors to pick state slices. Avoid directly drilling into state objects—it's error-prone and hard to maintain.
   Example code:

   import { Store } from '@ngrx/store';
   import { selectUserList, selectUserLoading } from './user.selectors';
   
   constructor(private store: Store) {}
   
   ngOnInit() {
     // Subscribe to state slices (use async pipe in template to avoid memory leaks)
     this.userList$ = this.store.select(selectUserList);
     this.isLoading$ = this.store.select(selectUserLoading);
   }
   

   In your template, use the async pipe to automatically handle subscriptions:

   <div *ngIf="isLoading$ | async">Loading users...</div>
   <ul *ngIf="userList$ | async as users">
     <li *ngFor="let user of users">{{ user.name }}</li>
   </ul>
   

2. Verify Reducer Handles Actions Correctly
   Make sure your reducer properly updates state when the success action (from your service call) is dispatched. For example:

   case UserActions.loadUsersSuccess:
     return {
       ...state,
       users: action.payload,
       loading: false,
       error: null
     };
   

   Double-check that you're spreading the existing state (...state) before updating specific fields—this preserves immutability, which is critical for NgRx.

3. Access State in Effects (If Needed)
   If you need to reference current state within an effect, use withLatestFrom instead of directly subscribing to the store:

   loadUsers$ = createEffect(() => 
     this.actions$.pipe(
       ofType(UserActions.loadUsers),
       withLatestFrom(this.store.select(selectSomeRelevantState)),
       switchMap(([action, currentState]) => {
         // Use currentState for any pre-service logic
         return this.userService.getUsers().pipe(
           map(users => UserActions.loadUsersSuccess({ users })),
           catchError(err => of(UserActions.loadUsersFailure({ error: err.message })))
         );
       })
     )
   );
   

Here are key improvements to make your NgRx implementation cleaner and more maintainable:

• Standardize Selectors
  Create dedicated feature and slice selectors instead of inline state access. This makes selectors reusable and type-safe:

  import { createFeatureSelector, createSelector } from '@ngrx/store';
  import { UserState } from './user.state';
  
  // Feature selector for the entire user state
  export const selectUserState = createFeatureSelector<UserState>('users');
  // Slice selectors for specific state fields
  export const selectUserList = createSelector(selectUserState, state => state.users);
  export const selectUserError = createSelector(selectUserState, state => state.error);
  

• Add Loading/Error State
  Extend your state interface with loading and error fields to improve UI feedback:

  export interface UserState {
    users: User[];
    loading: boolean;
    error: string | null;
  }
  
  export const initialState: UserState = {
    users: [],
    loading: false,
    error: null
  };
  

  Update your reducer to set these values when dispatching load, success, and failure actions.

• Use Entity Adapter for Collections
  If you're working with lists (like user data), use NgRx's EntityAdapter to simplify CRUD operations without writing custom array logic:

  import { createEntityAdapter, EntityState } from '@ngrx/entity';
  import { User } from './user.model';
  
  export interface UserState extends EntityState<User> {
    loading: boolean;
    error: string | null;
  }
  
  const userAdapter = createEntityAdapter<User>();
  export const initialState: UserState = userAdapter.getInitialState({
    loading: false,
    error: null
  });
  
  // In reducer:
  case UserActions.loadUsersSuccess:
    return userAdapter.setAll(action.payload, {
      ...state,
      loading: false,
      error: null
    });
  

• Avoid Manual Subscriptions
  Always prefer the async pipe in templates over manual subscribe() calls—it automatically cleans up subscriptions to prevent memory leaks.

内容的提问来源于stack exchange，提问作者Hel_UI