Как правильно использовать useSelector и store.getState?

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

Есть варианты:
// 1
const { name, age } = useSelector(state => state.userInfo);

// 2
const name = useSelector(state => state.userInfo.name);
const age = useSelector(state => state.userInfo.age);

// 3
const [name, age] = useSelector((state) => [
    state.userInfo.name,
    state.userInfo.age,
]);


Также, хочется понять, когда лучше использовать store.getState() и стоит ли так делать?

Если, например, нужен весь объект userInfo, лучше его получить через хук или вызвать store.getState()? (ниже примеры)
const userInfo = useSelector(state => state.userInfo);
// or
const { userInfo } = store.getState();
  • Вопрос задан
  • 342 просмотра
Решения вопроса 2
Zraza
@Zraza
Помог ответ? Отметь решением!
В Redux Style Guide рекомендуют 2-й вариант
https://redux.js.org/style-guide/style-guide#call-...
Ответ написан
profesor08
@profesor08
Как правильно использовать useSelector

1. Компактнее, понятнее, всего 1 вызов.
2. В 2 раза больше кода чем в первом варианте.
3. Почти как первый, но данные сначала помещаются в массив, а потом деструктурируются. Ненужная операция исключительно ради того, чтоб везде были квадратные скобочки, вкусовщина.

Если остро стоит вопрос производительности вынуждающий экономить на операциях, то стоит посмотреть во что трансформируются варианты 1 и 2 для прода, и уже там подсчитывать операции.

Как правильно использовать store.getState

Это функция, которая вернет текущий стейт. Это не хук, поэтому компонент не будет реагировать на изменения стейта. ХУк сможешь использовать только в компонентах, а getState позволит получить данные вне компонентов.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы