Почему state нужно передавать компонентам через connect?

Question

[Retr0_0]

Почему компонентам мы передаем state через connect? Почему нельзя просто импортировать store в компонент и использовать его?

Answer 1

[teenager_python]

state в Redux является центральным хранилищем данных и представляет собой объект, который содержит все состояние приложения.

При использовании React-Redux библиотеки, компоненты получают доступ к state через функцию connect. Функция connect обеспечивает связь между компонентами и хранилищем Redux. Она предоставляет компоненту доступ к определенным частям хранилища через props.

Когда компонент обновляется, функция connect автоматически обновляет данные в state, если это необходимо. Также функция connect обеспечивает оптимизацию и ускорение производительности компонентов путем уменьшения количества перерисовок.

Импортирование store напрямую в компонент нарушает концепцию Redux, так как это обходит связь между хранилищем и компонентами, которую обеспечивает функция connect. Это может привести к ошибкам и неожиданным поведениям приложения. Поэтому, для правильного использования Redux в React-Redux, рекомендуется передавать state компонентам через функцию connect.

Answer 2

[Alexandroppolus]

Вообще говоря, connect теперь безнадежно устарел и рекомендуется использовать хуки. В частности, useSelector позволяет прочитать данные и ещё и подписаться на их изменение. Причем, изменение не всего стейта, а только этого куска, который мы селектим. Старый добрый connect делал то же самое.

Так же ты можешь затянуть весь стор (не стейт) с помощью useStore и в моменте посмотреть его текущий стейт. Но это без подписки на изменение.

Сам по себе стор хранится в провайдере контекста, и к нему обращаются все упомянутые хуки. По факту - тот же DI, что с архитектурной т.з. лучше импорта.

Но надо заметить, что это уже не redux, а react-redux, т.е. отдельный пакет, хоть и официальный. Ты можешь чисто ради прикола и в учебных целях поюзать redux напрямую - например, для постижения хука useSyncExternalStore.