Redux 5中使用filter的Selector未Memoize警告问题及解决方法

为什么会出现这个警告？ #

你在useSelector里直接用filter处理数组的行为，会导致每次组件渲染时都生成一个全新的数组引用。哪怕Redux store里的原始数据完全没变化，这个新数组的引用和上一次渲染时的数组引用也不相等，react-redux就会误判状态发生了变更，触发组件不必要的重渲染，所以弹出了这个警告。

怎么给选择器做记忆化（memoize）？ #

有两种常用方案，选哪种看你的需求：

方案1：用reselect库创建记忆化选择器（官方推荐） #

reselect是Redux官方维护的选择器库，专门用来创建可缓存的选择器，只有当依赖的状态发生真正变化时，才会重新计算结果。

1. 先安装reselect：

npm install reselect

2. 创建单独的选择器文件（比如src/features/anecdotes/selectors.js），把选择逻辑抽离出来：

import { createSelector } from 'reselect';

// 基础选择器：获取store里的原始anecdotes数组
const selectAnecdotes = state => state.anecdotes;

// 记忆化选择器：定义过滤逻辑，只有selectAnecdotes返回的数据变化时才重新计算
export const selectFilteredAnecdotes = createSelector(
  [selectAnecdotes],
  (anecdotes) => anecdotes.filter(anecdote => {
    // 这里写你的过滤条件，比如anecdote.content.includes(searchTerm)
  })
);

3. 在AnecdoteList.jsx里调用这个记忆化选择器：

import { useSelector } from 'react-redux';
import { selectFilteredAnecdotes } from './features/anecdotes/selectors';

function AnecdoteList() {
  const filteredAnecdotes = useSelector(selectFilteredAnecdotes);
  
  // 后续渲染逻辑...
}

如果你的过滤还依赖其他状态（比如搜索关键词），只需要给createSelector添加对应的基础选择器即可：

// 新增基础选择器：获取搜索关键词
const selectSearchTerm = state => state.searchTerm;

// 更新记忆化选择器，依赖两个状态
export const selectFilteredAnecdotes = createSelector(
  [selectAnecdotes, selectSearchTerm],
  (anecdotes, searchTerm) => anecdotes.filter(anecdote => 
    anecdote.content.includes(searchTerm)
  )
);

方案2：用React的useMemo包裹过滤逻辑（无需额外装库） #

如果不想引入新库，可以直接用React的useMemo来缓存过滤后的数组，只有当依赖的原始数据变化时才重新执行过滤：

import { useSelector } from 'react-redux';

function AnecdoteList() {
  // 先获取原始的anecdotes数组
  const anecdotes = useSelector(state => state.anecdotes);
  // 如果有其他依赖（比如搜索词），也要在这里获取
  const searchTerm = useSelector(state => state.searchTerm);

  // 用useMemo缓存过滤结果，依赖项写全所有会影响过滤逻辑的变量
  const filteredAnecdotes = useMemo(() => {
    return anecdotes.filter(anecdote => 
      anecdote.content.includes(searchTerm)
    );
  }, [anecdotes, searchTerm]);

  // 后续渲染逻辑...
}

注意事项 #

• 不管用哪种方案，都要确保依赖项的准确性：所有会影响过滤结果的状态，都要加入依赖列表，不然会出现缓存不更新的问题。
• 推荐用reselect方案，尤其是当你的选择逻辑复杂或者多个组件需要复用同一个过滤逻辑时，它的缓存机制更健壮，也更符合Redux的最佳实践。

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