Этот пост предназначен для людей, которые уже знакомы с React и Redux. Это поможет им лучше понять, как все работает под капотом.
Когда я впервые попал во вселенную React 🌐, ~ 3 года назад, мне было очень трудно понять, как
mapStateToProps
иmapDispatchToProps
Redux работают и доступны для компонента React. Вот схематическое руководство, чтобы лучше понять, какconnect
Redux работает с React.
Допустим, у нас есть Search
компонент.
И классический магазин Redux.
Давайте заполним магазин Redux Action
диспетчерами и Reducer
состоянием.
Редуктор defaultState
выглядит так. Параметр action
внутри функции Reducer
происходит от dispatchedAction.
Давайте подключим компонент поиска React к магазину Redux. Библиотека React-Redux имеет официальные привязки React для Redux.
Он предоставляет функцию connect
для подключения компонента к магазину.
mapDispatchToProps
означает сопоставление функции dispatch
действия с this.props
компонента React.
То же самое относится к mapStateToProps
, где состояние Reducer сопоставляется с this.props
компонента React.
- Подключите React к Redux.
mapStateToProps
иmapDispatchToProps
относятся кstate
иdispatch
магазина Redux соответственно.state
редуктора иdispatch
действия доступны черезthis.props
компоненту React.
Давайте резюмируем весь рабочий процесс React to Redux connect с помощью нажатия кнопки в компоненте поиска React.
- Нажмите кнопку
submit
в компоненте React search. - Функция
click
отправляет действие. Функция Actiondispatch
подключена к компоненту поиска черезmapDispatchToProps
и доступна дляthis.props
- (за рамками этого поста) Отправленное действие отвечает за
fetch
данные и отправляет другое действие для обновления состояния редуктора - Состояние Reducer обновляется новыми данными поиска, доступными на шаге 3.
- Состояние Reducer уже подключено к
this.props
в компоненте поиска черезmapStateToProps
this.props
содержит последние данные поиска, и представление теперь перерисовывается, чтобы отобразить обновленные результаты поиска.