Artigo original escrito por: Princiya
Artigo original: How to connect React to Redux — a diagrammatic guide
Traduzido e adaptado por: Thiago Costa Barbosa

Este post é voltado para pessoas que já conhecem React e Redux. Isso os ajudará a entender melhor como as coisas funcionam por debaixo dos panos.
Quando entrei no universo React? Há mais ou menos 3 anos atrás, e tive muita dificuldade em entender como o mapStateToProps e o mapDispatchToProps do Redux funcionavam e estavam disponíveis para um componente React. Aqui está um guia diagramático para entender melhor como o connect do Redux funciona com o React.

Digamos que temos um componente Search.

E um store clássico do Redux.

KgSZIWLrfkK8rjXnpFypjFVbDKoAbXsQcmGs
O store do Redux

Vamos preencher esse store com Action dispatchers (ações de envios) e o state Reducer.

emKlOkw4wHukOHIfz6gH0jkILnJOrs1iZ78S
Store Redux com Action dispatchers e o state Reducer
WmHJjNMWtHHyBsBbSnRs4YJkta7GnEirCtkp
O defaultState (state inicial) do Reducer

O defaultState do Reducer é assim. O parâmetro action dentro da função Reducer vem do Action enviado.

HRHjMZducEgR-5YbL6O2JmI7HsTBV3NbpMoX
Conecte o componente React ao store Redux

Vamos conectar o componente de pesquisa do React com o store do Redux. A biblioteca React-Redux tem conexões oficiais do React com o Redux.

Ela fornece a função connect para conectar nosso componente ao store.

Já o mapDispatchToProps mapeia as funções dispatch do Action para o componente this.props do React.

O mesmo se aplica ao mapStateToProps, onde o state do Reducer é mapeado para o this.props do componente React.

PW4bKo1FbTcCmOL4cJxO0wQ02ZKxWkgqp8kn
Fluxo de conexão do React para o Redux
  1. Conecte o React ao Redux.
  2. O mapStateToProps e o mapDispatchToProps lidam com os stores Redux state e dispatch, respectivamente.
  3. Os reducers state e as ações dispatch estão disponíveis através do this.props para o componente React.

Vamos resumir todo o fluxo de trabalho conectado do React para o Redux através de um clique de botão no componente Search do React.

xkGNd8KHWKzjY-ZAnIisJXRXTmZ0NPdluxFw
Fluxo de conexões do React para o Redux através do clique do botão
  1. Clique no botão submit no componente Search do React
  2. A função click faz o dispatch de uma ação. A função dispatch se conecta ao componente Search via mapDispatchToProps e é disponibilizada para o this.props
  3. (fora do escopo deste artigo) A ação enviada (dispatched) é responsável por fazer o fetch(a busca) dos dados e também o dispatch de outra ação para atualizar o state do Reducer
  4. O state do Reducer é atualizado com os novos dados da busca disponíveis na Etapa 3.
  5. O state do Reducer já está conectado ao this.props no componente Search pelo mapStateToProps
  6. Como o this.props agora tem os dados de pesquisa mais recentes, ele renderiza novamente o que é exibido na tela para mostrar os resultados da busca atualizados.