如何在Angular+NgRx中通过Reducer同时处理前后端数据更新

首先得明确NgRx的核心规则：Reducer是纯函数，绝对不能在里面执行异步操作（比如API调用），它只能同步更新Store状态。后端请求这类异步逻辑，得交给NgRx Effects来处理。下面是完整的实现步骤：

1. 完善Action定义 #

需要定义三类Action，分别对应“发起更新请求”、“更新成功”、“更新失败”：

// product.actions.ts
import { createAction, props } from '@ngrx/store';
import { Product } from './product.model'; // 假设你有Product类型定义

// 发起更新请求
export const updateProductRequest = createAction(
  '[Product] Update Request',
  props<{ productId: number; productData: Partial<Product> }>()
);

// 更新成功
export const updateProductSuccess = createAction(
  '[Product] Update Success',
  props<{ product: Product }>()
);

// 更新失败
export const updateProductFailure = createAction(
  '[Product] Update Failure',
  props<{ error: any }>()
);

2. 修改Reducer处理状态更新 #

Reducer只响应成功/失败的Action，同时可新增加载状态优化用户体验：

// product.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { updateProductRequest, updateProductSuccess, updateProductFailure } from './product.actions';
import { Product } from './product.model';

export interface ProductState {
  products: Product[];
  loading: boolean;
  error: any;
}

export const initialState: ProductState = {
  products: [],
  loading: false,
  error: null
};

export const productReducer = createReducer(
  initialState,
  // 发起请求时设置加载状态
  on(updateProductRequest, (state) => ({
    ...state,
    loading: true,
    error: null
  })),
  // 更新成功，替换对应产品并结束加载
  on(updateProductSuccess, (state, { product }) => ({
    ...state,
    products: state.products.map(p => p.id === product.id ? product : p),
    loading: false
  })),
  // 更新失败，记录错误并结束加载
  on(updateProductFailure, (state, { error }) => ({
    ...state,
    loading: false,
    error
  }))
);

3. 用NgRx Effects处理异步API请求 #

创建Effects类，监听发起更新的Action，调用ProductService的API，根据结果派发成功或失败的Action：

// product.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 { ProductService } from './product.service';
import { updateProductRequest, updateProductSuccess, updateProductFailure } from './product.actions';

@Injectable()
export class ProductEffects {
  updateProduct$ = createEffect(() =>
    this.actions$.pipe(
      ofType(updateProductRequest),
      mergeMap(({ productId, productData }) =>
        this.productService.updateProduct(productId, productData).pipe(
          map((updatedProduct) => updateProductSuccess({ product: updatedProduct })),
          catchError((error) => of(updateProductFailure({ error })))
        )
      )
    )
  );

  constructor(
    private actions$: Actions,
    private productService: ProductService
  ) {}
}

4. 组件中派发更新请求Action #

在产品详情页组件中，点击保存按钮时，派发updateProductRequest而不是直接操作Store：

// product-detail.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { updateProductRequest } from './product.actions';
import { Product } from './product.model';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html'
})
export class ProductDetailComponent {
  currentProduct: Product; // 假设已从Store获取当前产品

  constructor(private store: Store) {}

  onSave(productData: Partial<Product>) {
    this.store.dispatch(
      updateProductRequest({
        productId: this.currentProduct.id,
        productData
      })
    );
  }
}

流程总结 #

1. 组件触发保存操作，派发updateProductRequest Action
2. Effects监听该Action，调用ProductService的后端API
3. API请求成功：派发updateProductSuccess Action，Reducer更新Store中的产品数据
4. API请求失败：派发updateProductFailure Action，Reducer记录错误状态
5. 组件订阅Store中的状态（products、loading、error），自动更新UI

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