О проверке равенства useSelector

Question

У меня вопрос о проверке равенства redux useSelector.

См. Документ React Redux Hook (https://react-redux.js.org/api/hooks#equality -comparisons-and-updates )

useSelector будет выполнять сравнение ссылок с возвращаемым значением и предыдущим значением, принудительно выполнить повторную визуализацию, если результат кажется другим

У меня есть состояние хранилища блога по умолчанию, подобное этому

searcherParam: {
  keyword: '',
  categories: [],
  tags: [],
},

В компоненте , Я использую useSelector для получения значения

const searchParam = useSelector(state => state.Blog.searcherParam)

Если я отправлю действие для обновления SearcherParam с тем же значением, компонент будет повторно визуализирован, поскольку возвращаемое значение - объект (мелкое сравнение)

Итак, я получаю значение, вызывая useSelector несколько раз

const keyword = useSelector(state => state.Blog.searchrParam.keyword)
const categories = useSelector(state => state.Blog.searchrParam.categories)
const tags = useSelector(state => state.Blog.searchrParam.tags)

И я отправляю действие, чтобы снова обновить SearchcherParam с тем же значением

компонент не будет повторно отображать

Я не могу понять, почему компонент не перерисовывается?

Если useSelector выполняет сравнение ссылок, значение категорий (массив) не должно совпадать с ref а также теги после отправки

Есть ли у меня недоразумения? Спасибо

---

Причина отказа от повторного рендеринга заключается в том, что я сохраняю категории (из хранилища redux) через useState.

и использую значение useState для отправки, так что это та же ссылка ...

вот коды и ящик, извините за тупой вопрос Q_Q

https://codesandbox.io/s/useselector-test-u6pvg

Answer 1

Итак, когда вы это сделаете:

const newKeyword = useSelector(state => state.Blog.searchrParam.keyword)
const newCategories = useSelector(state => state.Blog.searchrParam.categories)
const newTags = useSelector(state => state.Blog.searchrParam.tags)

Это просто означает, что вы захотите получить последнее значение каждого из них.

Это не означает следующее:

searcherParam: {
  keyword: newKeyword,
  categories: newCategories,
  tags: newTags,
},

Потому что searcherParam всегда будет новой ссылкой при отправке действия.

Если вы просто хотите повторно -render, если какое-либо из 3 свойств изменится, вы можете просто получить state.searcherParam и отправить и выполнить повторную визуализацию.

Получение помощи по отдельным свойствам, когда вы хотите повторно визуализировать только keyword изменение. Вы не хотите повторно выполнять рендеринг, когда изменилось любое из cateogories или tags.

Обратите внимание, что в этом случае, если вы просто выбираете searcherParam, его не будет заботить, какое из 3 свойств изменилось, вы получите повторный рендеринг, потому что это новая ссылка.

Это то, что упоминалось в документации.

После обсуждения в комментариях.

Сделал тривиальную реализацию. Проверьте ниже