Reselect 常见问题解析：从原理到实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00096/article/details/148374621

Reselect 常见问题解析：从原理到实践

reselect reduxjs/reselect: Reselect 是一个用于 Redux 的选择器库，可以用于优化 Redux 应用程序的性能，支持多种 Redux 功能和工具，如 Redux，React-Redux，Reselect 项目地址: https://gitcode.com/gh_mirrors/re/reselect

Reselect 是 Redux 生态中一个强大的选择器库，它通过记忆化（memoization）技术优化状态派生计算。本文将深入解析 Reselect 使用中的常见问题，帮助开发者更好地理解和应用这个工具。

选择器不更新的常见原因

当选择器没有在输入状态变化时重新计算，最常见的原因是状态更新方式与记忆化机制不兼容。Reselect 默认使用严格相等（===）来检测输入变化，这意味着：

不可变更新原则：如果状态管理库（如 Redux）直接修改了现有对象而不是创建新对象，选择器将无法检测到变化
引用不变性问题：即使对象内容变化，如果引用不变，选择器会认为输入未改变

解决方案：

确保状态更新总是返回新对象/数组
使用不可变更新工具（如 Immer）
考虑自定义相等比较函数

选择器意外重新计算的排查方法

当选择器在不应该重新计算时却重新计算了，可以采取以下调试步骤：

启用输入稳定性检查：设置 inputStabilityCheck 为 'always' 或 'once'
利用调试字段：
- recomputations()：获取结果函数的重新计算次数
- dependencyRecomputations()：获取依赖选择器的重新计算次数
参数变化追踪：使用 argsMemoizeOptions 配置参数记忆化行为

const selectItems = createSelector(
  [state => state.items, (state, type) => type],
  (items, type) => items.filter(item => item.type === type),
  {
    argsMemoize: lruMemoize,
    argsMemoizeOptions: {
      equalityCheck: (a, b) => {
        if (a !== b) console.log('参数变化:', a, '→', b)
        return a === b
      }
    }
  }
)

独立使用 Reselect

虽然 Reselect 常与 Redux 配合使用，但它不依赖任何状态管理库，可以独立应用于：

React 组件状态
任何遵循不可变更新的 JavaScript 数据
自定义状态管理方案

关键要求：数据更新必须遵循不可变原则，即通过创建新对象而非修改现有对象来实现更新。

带参数的选择器设计

创建接受参数的选择器时，需要注意：

参数传递机制：所有输入选择器都会接收到相同的完整参数集
类型一致性：确保参数类型在所有输入选择器中保持一致
参数筛选：每个输入选择器应只使用它需要的参数

const selectItemsByCategory = createSelector(
  [
    (state: RootState) => state.items,
    (state: RootState, category: string) => category,
    (state: RootState, category: string, excludeId: number) => excludeId
  ],
  (items, category, excludeId) =>
    items.filter(item => 
      item.category === category && item.id !== excludeId
    )
)

记忆化行为定制

Reselect 提供了多种方式来定制记忆化行为：

更换记忆化函数：内置 lruMemoize 可替换为自定义实现
调整 LRU 缓存大小：通过 maxSize 参数控制缓存条目数
使用 WeakMapMemoize：适用于需要弱引用缓存的场景
自定义相等比较：通过 equalityCheck 定义自己的相等逻辑

选择器单元测试

由于选择器是纯函数，测试相对简单：

test('选择器应正确记忆化', () => {
  const selectCompletedTodos = createSelector(
    [state => state.todos],
    todos => todos.filter(todo => todo.completed)
  
  const result1 = selectCompletedTodos(state)
  const result2 = selectCompletedTodos(state)
  
  // 引用相等
  expect(result1).toBe(result2)
  // 计算结果正确
  expect(result1).toEqual([{id: 1, completed: true}])
  // 记忆化效果
  expect(selectCompletedTodos.recomputations()).toBe(1)
})

测试要点：

验证计算结果正确性
检查记忆化效果（引用相等）
监控重新计算次数

跨组件实例共享选择器

在多组件实例间共享选择器时，需要注意：

参数变化处理：不同实例可能传入不同参数
缓存策略选择：
- 增大 lruMemoize 的 maxSize（v4.1+）
- 使用 WeakMapMemoize（v5.0+）

TypeScript 支持

Reselect 完全使用 TypeScript 编写，提供完善的类型支持：

自动类型推断：根据输入选择器推断结果类型
参数类型检查：确保选择器参数类型一致
深度嵌套限制：v5+ 支持最多 30 层嵌套选择器

遇到 "Type instantiation is excessively deep" 错误时，通常是因为选择器嵌套过深，可以考虑重构为扁平结构。

柯里化选择器模式

柯里化选择器可以提升使用便利性，特别是在 React 组件中：

// 创建柯里化选择器工具函数
export const currySelector = <S, R, P extends any[]>(
  selector: (state: S, ...args: P) => R
) => {
  return (...args: P) => (state: S) => selector(state, ...args)
}

// 使用示例
const curriedSelector = currySelector(baseSelector)
const result = useSelector(curriedSelector(id)) // 在组件中使用

柯里化优势：