Redux Reselect 入门指南：掌握高效状态选择器-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00718/article/details/148374691

Redux Reselect 入门指南：掌握高效状态选择器

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

什么是 Reselect？

Reselect 是一个专门用于创建记忆化（memoized）"选择器"函数的 JavaScript 库。它最初是为 Redux 设计的，但实际上可以用于任何基于不可变数据的 JavaScript 应用。选择器的主要作用是高效地从状态中派生出数据，避免不必要的重复计算。

为什么需要 Reselect？

在复杂的前端应用中，我们经常需要从全局状态中派生出一些衍生数据。例如：

从待办事项列表中筛选出已完成的事项
计算购物车中商品的总价
根据用户权限过滤可访问的菜单项

如果不使用 Reselect，每次组件渲染时都会重新计算这些衍生数据，即使原始数据没有变化。这会导致性能问题，特别是在大型应用中。

核心特性

记忆化计算：只有当输入值发生变化时才会重新计算结果
组合性：选择器可以作为其他选择器的输入
高效性：避免不必要的重新渲染，优化 React 应用性能
引用一致性：相同输入总是返回相同的引用，便于 React 的浅比较优化

安装方式

Reselect 可以通过两种方式使用：

通过 Redux Toolkit：如果你使用 Redux Toolkit，它已经内置了 Reselect，无需额外安装
```
import { createSelector } from '@reduxjs/toolkit'
```
独立安装：如果你不使用 Redux Toolkit 或需要单独使用
```
npm install reselect
# 或
yarn add reselect
```

基础使用示例

让我们通过一个简单的例子来理解 Reselect 的工作原理：

import { createSelector } from 'reselect'

// 模拟应用状态
const state = {
  todos: [
    { id: 0, completed: false },
    { id: 1, completed: true }
  ]
}

// 普通选择器 - 每次调用都会执行计算
const selectCompletedTodos = state => {
  console.log('普通选择器执行了')
  return state.todos.filter(todo => todo.completed)
}

// 记忆化选择器 - 只有输入变化时才重新计算
const memoizedSelectCompletedTodos = createSelector(
  [state => state.todos],  // 输入选择器
  todos => {              // 结果函数
    console.log('记忆化选择器执行了')
    return todos.filter(todo => todo.completed)
  }
)

// 测试调用
selectCompletedTodos(state)  // 打印"普通选择器执行了"
selectCompletedTodos(state)  // 再次打印
selectCompletedTodos(state)  // 再次打印

memoizedSelectCompletedTodos(state)  // 打印"记忆化选择器执行了"
memoizedSelectCompletedTodos(state)  // 不打印
memoizedSelectCompletedTodos(state)  // 不打印

从控制台输出可以看到，普通选择器每次调用都会执行过滤操作，而记忆化选择器只在第一次调用时执行计算，后续调用直接返回缓存结果。