React Frontend Developer

Question 1

Для чего используется функция connect в React Redux? Какие параметры принимает?

Accepted Answer

connect связывает React-компоненты с состоянием и действиями Redux. Она принимает две функции: mapStateToProps для подключения состояния и mapDispatchToProps для передачи действий в компонент. В результате компонент получает доступ к необходимым данным и возможностям изменения состояния.

Question 2

Как работает хранилище (store) в Redux?

Accepted Answer

Хранилище (store) в Redux управляет состоянием всего приложения. Оно предоставляет методы для получения текущего состояния (getState), отправки действий (dispatch) и подписки на изменения (subscribe). Хранилище связывает редьюсеры с действиями, чтобы обновлять состояние.

Question 3

Как подключить React-компонент к Redux-store?

Accepted Answer

Чтобы подключить компонент к Redux-store, используется библиотека React Redux. Для получения данных из состояния применяется хук useSelector, а для отправки действий — useDispatch. Эти инструменты позволяют интегрировать Redux-логику в React-компоненты без необходимости дополнительной настройки.

Question 4

Почему селекторы вызываются при любом изменении store?

Accepted Answer

Селекторы вызываются при любом изменении store, потому что Redux не знает, какие данные реально изменились.
Store сообщает подписчикам о любом обновлении состояния.
Селекторы сами решают, изменился ли нужный им фрагмент.
Это нормальное поведение Redux.

Question 5

Как связать состояние вне React (external store) с React-рендерингом?

Accepted Answer

React сам по себе не знает о внешнем состоянии, поэтому его нужно явно “подключить” к процессу рендера. Обычно это делается через подписку на изменения внешнего стора и принудительный ререндер компонента. Современный и рекомендуемый способ — использовать useSyncExternalStore. Именно так работают Redux, Zustand и другие state-менеджеры.

Question 6

Что такое useSyncExternalStore и для чего он нужен?

Accepted Answer

useSyncExternalStore — это хук React для безопасного подключения внешнего состояния к рендерингу. Он позволяет подписаться на внешний стор и гарантирует, что компонент всегда рендерится с актуальными данными. Этот хук решает проблемы, которые возникают при ручных подписках в условиях concurrent rendering и Strict Mode. Его используют как основу для state-менеджеров.

Question 7

Как получить тип store в TypeScript (например, через ReturnType)?

Accepted Answer

Тип store можно получить, взяв тип возвращаемого значения функции его создания. Для этого используется ReturnType. Такой подход избавляет от ручного дублирования типов. Он автоматически подстраивается под изменения в реализации. Это повышает надёжность типизации и снижает количество ошибок.

Question 8

Что такое action, reducer и store?

Accepted Answer

Redux — это библиотека для управления состоянием приложения. Action — это простой объект, описывающий, что произошло (например, 'USER_LOGGED_IN'). Reducer — это чистая функция, которая принимает предыдущее состояние и action, и возвращает новое состояние. Store — это единый централизованный объект, который хранит всё состояние приложения и предоставляет методы для его обновления (dispatch) и подписки на изменения (subscribe). Вместе они образуют предсказуемый цикл обновления данных.

Вопросы React Frontend Developer