如何使ngrx效果等待异步函数

在Angular应用程序中，ngrx（NgRx）是一个流行的状态管理库，它基于Redux模式。当涉及到异步操作时，如HTTP请求，我们通常需要等待这些操作完成后再更新状态。以下是如何使用ngrx来处理异步操作的基础概念和相关步骤：

基础概念

Actions：描述发生了什么事情的对象。
Reducers：纯函数，根据当前状态和动作来产生新的状态。
Effects：处理副作用，如异步操作，并分发相应的动作。
Selectors：用于从store中选择状态的函数。

类型

Synchronous Actions：立即更新状态。
Asynchronous Actions：通过Effects处理，通常涉及异步调用。

应用场景

数据获取：从API获取数据并在获取后更新状态。
表单提交：处理异步的表单提交操作。
实时更新：如WebSocket连接的数据更新。

实现步骤

定义Actions：

// actions.ts
import { createAction, props } from '@ngrx/store';

export const loadData = createAction('[Data] Load Data');
export const loadDataSuccess = createAction('[Data] Load Data Success', props<{ data: any[] }>());
export const loadDataFailure = createAction('[Data] Load Data Failure', props<{ error: any }>());

创建Reducer：

// reducer.ts
import { createReducer, on } from '@ngrx/store';
import * as DataActions from './actions';

export interface State {
  data: any[];
  loading: boolean;
  error: any;
}

export const initialState: State = {
  data: [],
  loading: false,
  error: null,
};

const _dataReducer = createReducer(
  initialState,
  on(DataActions.loadData, (state) => ({ ...state, loading: true })),
  on(DataActions.loadDataSuccess, (state, { data }) => ({ ...state, data, loading: false })),
  on(DataActions.loadDataFailure, (state, { error }) => ({ ...state, error, loading: false }))
);

export function dataReducer(state, action) {
  return _dataReducer(state, action);
}

设置Effects：

// effects.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import * as DataActions from './actions';
import { DataService } from '../services/data.service';

@Injectable()
export class DataEffects {
  loadData$ = createEffect(() =>
    this.actions$.pipe(
      ofType(DataActions.loadData),
      mergeMap(() =>
        this.dataService.getData().pipe(
          map((data) => DataActions.loadDataSuccess({ data })),
          catchError((error) => of(DataActions.loadDataFailure({ error })))
        )
      )
    )
  );

  constructor(private actions$: Actions, private dataService: DataService) {}
}

在组件中分发Action：

// component.ts
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import * as DataActions from './actions';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {
  constructor(private store: Store) {}

  ngOnInit() {
    this.store.dispatch(DataActions.loadData());
  }
}