Правильный способ получить доступ к Redux store в компоненте — это использовать функцию connect() из react-redux. Это рекомендуемый подход, потому что он даёт лучшую оптимизацию производительности и снижает вероятность ошибок по сравнению с прямым доступом к store.
connect() — это Higher-Order Component (HOC), который оборачивает твой компонент и автоматически управляет отображением state и dispatch. Он передаёт данные store как props, так что твой компонент автоматически обновляется, когда store меняется.
Базовый паттерн включает две функции отображения:
mapStateToProps — отображает Redux state в props компонентаmapDispatchToProps — отображает action creators в props компонентаimport { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'
const mapStateToProps = (state, ownProps) => ({
active: ownProps.filter === state.visibilityFilter
})
const mapDispatchToProps = (dispatch, ownProps) => ({
onClick: () => dispatch(setVisibilityFilter(ownProps.filter))
})
const FilterLink = connect(
mapStateToProps,
mapDispatchToProps
)(Link)
export default FilterLink
Хотя connect() остаётся стандартом, избегай прямого доступа к store через Context API (this.context.store), потому что это обходит механизмы оптимизации Redux и считается менее поддерживаемым решением.
Функция connect() — это Higher-Order Component, которая автоматически подписывает компонент на обновления store и передаёт данные store как props, вместо того чтобы требовать прямого доступа к store.
Новый — ещё не проверен сообществом
Вы