使用ngrx/effects库实现数据副作用，并在reducers中使用多个action处理状态更新。

在Angular应用中使用ngrx库可以方便地管理状态。在一些情况下需要处理异步操作或副作用，此时可以使用ngrx/effects库。

以一个简单的例子为例，假设我们需要从服务器获取一个列表并在应用中显示。首先，我们创建一个actions.ts文件定义对应的Action和ActionType：

import { Action } from '@ngrx/store';

export enum ListActionTypes {
  LOAD_LIST = '[List] Load List',
  LOAD_LIST_SUCCESS = '[List] Load List Success',
  LOAD_LIST_FAILURE = '[List] Load List Failure'
}

export class LoadList implements Action {
  readonly type = ListActionTypes.LOAD_LIST;
}

export class LoadListSuccess implements Action {
  readonly type = ListActionTypes.LOAD_LIST_SUCCESS;
  constructor(public payload: any[]) {}
}

export class LoadListFailure implements Action {
  readonly type = ListActionTypes.LOAD_LIST_FAILURE;
  constructor(public payload: string) {}
}

export type ListActions = LoadList | LoadListSuccess | LoadListFailure;

在effects.ts文件中定义ListEffects类，使用HttpClient从服务器获取数据：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { of } from 'rxjs';

import * as ListActions from './actions';

@Injectable()
export class ListEffects {
  constructor(private actions$: Actions, private http: HttpClient) {}

  loadList$ = createEffect(() =>
    this.actions$.pipe(
      ofType(ListActions.ListActionTypes.LOAD_LIST),
      mergeMap(() =>
        this.http.get('https://your-server-url/list').pipe(
          map(data => new ListActions.LoadListSuccess(data)),
          catchError(error => of(new ListActions.LoadListFailure(error)))
        )
      )
    )
  );
}

在reducer中定义对应的处理函数：

import * as ListActions from './actions';

export interface State {
  list: any[];
  loading: boolean;
  error: string;