Ngrx v12中updateOne更新实体导致ids数组排序异常问题排查

我完全懂你现在的头疼——明明官方说v10就修复了updateOne打乱排序的bug，结果到v12还是碰到了更新实体后，ids数组直接把该实体顶到最前面、破坏原有排序的情况。结合你的代码和版本信息，我整理了几个实用的解决方案：

1. 修复sortComparer的实现逻辑 #

你的sortByCreatedAt用了toLocaleString()来比较createdBy，这里可能藏着两个坑：

• 如果createdBy是日期类型，用字符串比较很容易出问题（不同 locale 的格式差异会导致排序逻辑不稳定），直接用时间戳对比更可靠：

  export function sortByCreatedAt(a: InvoiceInterface, b: InvoiceInterface): number {
    // 先处理null/undefined的边界情况
    if (!a.createdBy && !b.createdBy) return 0;
    if (!a.createdBy) return 1;
    if (!b.createdBy) return -1;
    // 用日期时间戳做数值比较，结果更稳定
    return new Date(a.createdBy).getTime() - new Date(b.createdBy).getTime();
  }
  

• 另外，如果你的排序函数对相同实体返回的结果不稳定（比如undefined处理逻辑有漏洞），NgRx可能无法正确识别实体的原有排序位置，直接把它移到数组开头。

2. 更新后手动强制触发重新排序 #

如果调整排序函数后还是不行，可以在reducer里更新实体后，手动调用sort()方法强制按照你的规则重新整理ids数组：

on(updateInvoiceSuccess, (state, action) => {
  const updatedState = invoicesAdapter.updateOne(action.invoice, state);
  // 手动触发排序，确保规则被严格执行
  return invoicesAdapter.sort(sortByCreatedAt, updatedState);
}),

这个方法虽然直接，但能彻底避免updateOne内部逻辑带来的排序偏差。

3. 尝试用upsertOne替代updateOne #

有时候updateOne对已存在实体的处理逻辑会有特殊情况，你可以换成upsertOne试试——它会自动判断实体是否存在，存在则更新、不存在则添加，v12版本中它的排序稳定性可能更好：

on(updateInvoiceSuccess, (state, action) => {
  return invoicesAdapter.upsertOne(action.invoice, state);
}),

注意：要确保你的customizedInvoiceId能正确识别实体，避免出现重复添加的问题。

4. 检查更新时是否意外修改了排序字段 #

如果API返回的发票详情里，createdBy字段的格式或值和原数据不一致（比如原数据是时间戳，更新后变成了字符串），那排序位置自然会变化。你可以在更新前对比原实体和新实体的createdBy值，确保这个排序用的核心字段没有被意外改动。

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