关于NgRx更新Store的困惑：有序数组插入新元素的实现方案

嘿，这个场景我刚好在项目里遇到过，咱们来拆解下你的几个方案问题，再给出靠谱的解决思路！

首先先分析你提到的三个方案的痛点：

• Reducer中直接处理：确实，Reducer的核心要求是纯函数、简洁单一职责，如果把复杂的插入/排序逻辑硬塞进去，会让Reducer变得臃肿，后续维护和测试都麻烦，不符合NgRx的设计理念。
• Service方法中处理并在Reducer调用：如果Service里的方法是纯函数（没有依赖外部状态、无副作用），其实理论上可行，但这么做会打破Reducer的独立性，而且如果后续Service引入了副作用，就会直接污染Reducer的纯特性，风险很高。
• Effect中处理但无法访问sortedNums：这个问题很好解决——你可以通过withLatestFrom操作符从Store中获取当前的sortedNums状态，再在Effect里完成插入逻辑，最后分发更新Store的action。

接下来给你两个最实用的方案，根据你的场景选就行：

方案一：抽离纯工具函数，在Reducer中调用（优先推荐） #

把插入有序数组的逻辑单独写成一个纯函数，完全独立于NgRx的各个模块，然后在Reducer里直接调用它生成新数组。这样既保持了Reducer的纯特性，又把复杂逻辑抽离，方便测试和维护。

代码示例： #

// 新建工具函数文件 utils/sorted-array.utils.ts
export function insertIntoSortedArray(sortedArr: number[], newNum: number): number[] {
  // 找到第一个大于新数字的索引，确定插入位置
  const insertIndex = sortedArr.findIndex(num => num > newNum);
  // 复制原数组避免直接修改
  const newArray = [...sortedArr];
  
  if (insertIndex === -1) {
    // 新数字比所有元素大，直接追加
    newArray.push(newNum);
  } else {
    // 在对应位置插入
    newArray.splice(insertIndex, 0, newNum);
  }
  
  return newArray;
}

然后在Reducer里调用这个工具函数：

// reducer.ts
import { insertIntoSortedArray } from '../utils/sorted-array.utils';

const initialState = {
  sortedNums: [1, 3, 5, 6, 7, 9]
};

export function numsReducer(state = initialState, action: NumsActions) {
  switch (action.type) {
    case '[Nums] Add New Number':
      return {
        ...state,
        sortedNums: insertIntoSortedArray(state.sortedNums, action.payload)
      };
    default:
      return state;
  }
}

这个方案的优势：

• 完全符合NgRx对Reducer纯函数的要求
• 逻辑抽离后，单独测试工具函数非常简单
• 代码结构清晰，后续修改排序规则只需要改工具函数即可

方案二：在Effect中处理（适合结合异步操作的场景） #

如果你的插入逻辑需要和异步操作结合（比如先验证数字合法性、或者依赖其他Store状态），可以在Effect中获取当前的sortedNums，处理插入后再分发更新Store的action。

代码示例： #

// effects.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { Store } from '@ngrx/store';
import { of } from 'rxjs';
import { map, switchMap, withLatestFrom } from 'rxjs/operators';
import { AppState } from '../app.state';
import { NumsActions } from './nums.actions';

@Injectable()
export class NumsEffects {
  addNewNumber$ = createEffect(() => 
    this.actions$.pipe(
      // 监听添加数字的请求action
      ofType(NumsActions.requestAddNumber),
      // 获取当前Store中的sortedNums状态
      withLatestFrom(this.store.select(state => state.nums.sortedNums)),
      switchMap(([action, currentSortedNums]) => {
        // 这里可以加入异步逻辑，比如调用后端验证数字
        // 假设验证通过，处理插入逻辑
        const insertIndex = currentSortedNums.findIndex(num => num > action.payload);
        const newSortedNums = [...currentSortedNums];
        
        if (insertIndex === -1) {
          newSortedNums.push(action.payload);
        } else {
          newSortedNums.splice(insertIndex, 0, action.payload);
        }
        
        // 分发更新Store的成功action
        return of(NumsActions.addNumberSuccess({ payload: newSortedNums }));
      })
    )
  );

  constructor(private actions$: Actions, private store: Store<AppState>) {}
}

然后在Reducer里接收成功action更新状态：

// reducer.ts
export function numsReducer(state = initialState, action: NumsActions) {
  switch (action.type) {
    case '[Nums] Add Number Success':
      return {
        ...state,
        sortedNums: action.payload
      };
    default:
      return state;
  }
}

注意：如果有多个并发的插入请求，建议把switchMap换成concatMap，这样可以保证插入顺序和请求顺序一致，避免后面的请求覆盖前面的结果。

总结 #

• 如果只是单纯的纯逻辑插入，优先选方案一，代码简洁规范，最符合NgRx的设计原则。
• 如果需要结合异步操作或依赖其他状态，用方案二，通过withLatestFrom获取当前状态再处理。

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