Redux 5 - 返回新引用（例如对象或数组）的选择器应被记忆，过滤器数组方法会出现警告

Question

我是 Redux 初学者。我有一个 React 18 应用程序。我正在使用 redux 5 和react-redux 9。

当我运行我的应用程序时，我在浏览器中收到以下警告：

AnecdoteList.jsx:14 选择器未知返回不同的结果 使用相同的参数调用。这可能会导致不必要的 重新渲染。返回新引用的选择器（例如对象或 一个数组）应该被记住

警告图片：

警告中的链接是：通过记忆优化选择器。我仍然不确定如何使用下面的代码中的记忆化来过滤数组。

我的

AnecdoteList.jsx

文件如下：

import { useDispatch, useSelector } from 'react-redux';
import { increaseVotes } from '../reducers/anecdoteReducer';

const AnecdoteList = () => {
  const compareAnecdotes = (a, b) => {
    if (a.votes < b.votes) return 1;
    if (a.votes > b.votes) return -1;
    return 0;
  };

  const dispatch = useDispatch();

  // THIS IS CAUSING THE WARNING
  const anecdotes = useSelector(({anecdotes, filter}) => {
    return anecdotes
      .filter(a => a.content.includes(filter))
      .sort(compareAnecdotes);
  });

  return (
    <div>
      {anecdotes.map((anecdote) => (
        <div key={anecdote.id}>
          <div>{anecdote.content}</div>
          <div>
            has {anecdote.votes}
            <button onClick={() => dispatch(increaseVotes(anecdote.id))}>
              vote
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}

export default AnecdoteList;

useSelector

钩子似乎引起了警告。我相信这是

filter

数组方法，但我不确定。我应该如何记住这个？我在这里做错了什么以及如何解决这个问题？

Answer 1

@Drew Reese 向我指出了这个解决方案 useselector 是如何工作的？

以下是我在代码中所做的更新：

import { useDispatch, useSelector, shallowEqual } from 'react-redux'; // added the import for shallowEqual
import { increaseVotes } from '../reducers/anecdoteReducer';

const AnecdoteList = () => {
  ...

  const anecdotes = useSelector(({anecdotes, filter}) => {
    return anecdotes
      .filter(a => a.content.includes(filter))
      .sort(compareAnecdotes);
  }, shallowEqual); // added the second parameter to useSelector

  return ( ... );
}

export default AnecdoteList;

添加

shallowEqual

从控制台中删除了警告。