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

Question

[lexstile]

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

Есть варианты:

// 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();

Answer 1

[profesor08]

Как правильно использовать useSelector

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

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

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

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

Comments

[lexstile]

Правильно ли я понимаю, что второй вариант по производительности самый оптимальный?
Где-то читал, что если использовать первый и изменится любое другое свойство объекта userInfo, использование useSelector теряет смысл..?!
А если привязываться к конкретному свойству объекта, то мы абстрагируемся от других свойств текущего объекта userInfo...?!

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

P. S. Могу быть не прав, но был бы рад любому комментарию на этот счет.

[profesor08]

lexstile, Кроме двойного выполнения кода разницы нет. Ты в любом случае получишь объект в свой селектор и будешь работать уже с ним, доставать из него свойства любимым способом. И если любое из низ изменится, твой компонент обновится.

[lexstile]

profesor08,

если любое из низ изменится, твой компонент обновится.

любое из доставаемых (в примере: name и age) или и тех, которые мы не используем?

[profesor08]

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

Answer 2

[Alex Karo]

В Redux Style Guide рекомендуют 2-й вариант
https://redux.js.org/style-guide/style-guide#call-...

Comments

[Mikhail Osher]

lexstile считаю это плохим советом конкретно в данном контексте.

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

В Вашем случае, у Вас один небольшой объект userInfo, который выгодно получить один раз, а не по частям.

Если котротко, то первый вариант + не забывайте, что всю инфу из стора желательно получать селекторами, независимо от того, используется typescript или нет, и используется connect или useState.

[Alex Karo]

Mikhail Osher, это всё таки рекомендация, а не обязательное правило.
Моё мнение:
1) В данном кейсе это не так уж важно
2) Стоит смотреть, как данные будут обновлятся - целиком или частично
3) Как и написано в доке "However, try to find an appropriate balance of granularity."

[Mikhail Osher]

Alex Karo, да, всё верно