Redux中proxy-memoize缓存失效问题排查与解决方案咨询

你的问题出在selector的依赖追踪范围过宽，以及reducer修改对象时的引用变化导致缓存失效：

1. selectEtagsConstraints直接返回state.constraints.etagsConstraints的引用，当reducer中替换数组内的某个constraint对象（即使只修改value属性），该数组的元素引用发生变化。
2. selectEtagsUser依赖selectEtagsConstraints的结果，当数组元素引用变化时，即使name属性值未变，proxy-memoize会认为需要重新执行map逻辑，生成新的数组对象，导致selectAllEtags的结果引用更新，触发组件重绘。

1. 优化selectEtagsUser，直接追踪必要属性 #

去掉对selectEtagsConstraints的依赖，让selectEtagsUser直接从state读取并仅追踪name属性，缩小依赖范围：

// Returns the etags created by the user
export const selectEtagsUser = memoize(state =>
  state.constraints.etagsConstraints
    .map(c => c.name)
    .filter(Boolean)
    .map(e => ({ key: e, label: e, labelShort: e }))
);

这样proxy-memoize只会追踪每个constraint的name属性，只有当name实际变化时才会重新计算，即使修改value属性也不会触发缓存失效。

2. 简化嵌套selector的依赖链 #

如果selectEtagsConstraints没有其他业务用途，可以直接删除它，避免不必要的引用传递，减少缓存失效的潜在风险。

3. 验证缓存行为（可选） #

可以在selector中添加日志，确认优化后的执行时机，比如：

export const selectEtagsUser = memoize(state => {
  console.log("selectEtagsUser 执行");
  return state.constraints.etagsConstraints
    .map(c => c.name)
    .filter(Boolean)
    .map(e => ({ key: e, label: e, labelShort: e }))
});

修改value属性时，如果日志未打印，说明缓存生效，组件不会无故重绘。

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