Como conectar o React ao Redux — um guia diagramático

Artigo original: How to connect React to Redux — a diagrammatic guide

Escrito por: Princiya

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.

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

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

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.

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.

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.