Блог

Главная - Вопросы по программированию - useSelector вызывает многократную повторную визуализацию

useSelector вызывает многократную повторную визуализацию

#react-native #redux #reducers

#react-native #redux #редукторы

Вопрос:

При использовании react-devtools это говорит мне, что причина, по которой мой корневой компонент повторно визуализировался, заключалась в том, что хуки изменились?

когда я удаляю все useSelectors, мой корневой компонент отображается только один раз, при включении он отображается 6 раз.

каковы некоторые предположения относительно того, почему это происходит?

 import {
  /// Data State Constants...
  SET_USER_DATA,
  SET_BADGE_COUNT,
} from "../Actions/gameState";

const initialState = {
  /// Data state...
  userData: [],
  badgeCount: 0,
};

export default function gameState(state = initialState, action) {
  const { type, payload } = action || {};
  switch (type) {
    /////////////////////////
    /// Data state Reducers...
    /////////////////////////
    case SET_USER_DATA: {
      return { ...state, userData: payload };
    }
    case SET_BADGE_COUNT: {
      return { ...state, badgeCount: payload };
    }

    default:
      return state;
  }
}

Комментарии:

1. Мы никак не можем сказать, что происходит, не видя кода, мое предложение — попытаться воспроизвести проблему на snacks.expo.io

2. Возможно, вы изменяете / переназначаете свойство, которое вы выбираете с помощью useSelectors, после каждого рендеринга, и это изменение вызывает повторный рендеринг компонента. К сожалению, я не могу вам правильно помочь, не видя никаких фрагментов кода.

3. Я использую logger, поэтому я бы видел эти изменения по мере их появления, но никакие свойства не меняются.

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

5. что касается компонента. ничего особенного не происходит. Я получаю состояние из redux следующим образом { someState } = useSelector(state=>state.MyState). и для редуктора это выглядит так: (я только что опубликовал его в OP)

Ответ №1:

Хорошо, дело в том, что useSelector сравнивает новое значение со старым со строгим === . Вы можете либо вызвать один useSelector для каждого поля, либо реализовать shallowEqual from react-redux :

 const someState = useSelector(state=>state.myState.someState, shallowEqual)

Вот документация:
https://react-redux.js.org/next/api/hooks#equality-comparisons-and-updates