Этот пост предназначен для людей, которые уже знакомы с 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.

  1. Подключите React к Redux.
  2. mapStateToProps и mapDispatchToProps относятся к state и dispatch магазина Redux соответственно.
  3. state редуктора и dispatch действия доступны через this.props компоненту React.

Давайте резюмируем весь рабочий процесс React to Redux connect с помощью нажатия кнопки в компоненте поиска React.

  1. Нажмите кнопку submit в компоненте React search.
  2. Функция click отправляет действие. Функция Action dispatch подключена к компоненту поиска через mapDispatchToProps и доступна для this.props
  3. (за рамками этого поста) Отправленное действие отвечает за fetch данные и отправляет другое действие для обновления состояния редуктора
  4. Состояние Reducer обновляется новыми данными поиска, доступными на шаге 3.
  5. Состояние Reducer уже подключено к this.props в компоненте поиска через mapStateToProps
  6. this.props содержит последние данные поиска, и представление теперь перерисовывается, чтобы отобразить обновленные результаты поиска.