Artigo original: https://www.freecodecamp.org/news/how-to-connect-react-to-redux-a-diagrammatic-guide-d2687c14750a/
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 omapStateToProps
e omapDispatchToProps
do Redux funcionavam e estavam disponíveis para um componente React. Aqui está um guia diagramático para entender melhor como oconnect
do Redux funciona com o React.
Digamos que temos um componente Search
.
E um store clássico do Redux.
![KgSZIWLrfkK8rjXnpFypjFVbDKoAbXsQcmGs](https://www.freecodecamp.org/portuguese/news/content/images/2022/07/KgSZIWLrfkK8rjXnpFypjFVbDKoAbXsQcmGs.png)
Vamos preencher esse store com Action
dispatchers (ações de envios) e o state Reducer
.
![emKlOkw4wHukOHIfz6gH0jkILnJOrs1iZ78S](https://www.freecodecamp.org/portuguese/news/content/images/2022/07/emKlOkw4wHukOHIfz6gH0jkILnJOrs1iZ78S.png)
![WmHJjNMWtHHyBsBbSnRs4YJkta7GnEirCtkp](https://www.freecodecamp.org/portuguese/news/content/images/2022/07/WmHJjNMWtHHyBsBbSnRs4YJkta7GnEirCtkp.png)
O defaultState
do Reducer é assim. O parâmetro action
dentro da função Reducer
vem do Action
enviado.
![HRHjMZducEgR-5YbL6O2JmI7HsTBV3NbpMoX](https://www.freecodecamp.org/portuguese/news/content/images/2022/07/HRHjMZducEgR-5YbL6O2JmI7HsTBV3NbpMoX.png)
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](https://www.freecodecamp.org/portuguese/news/content/images/2022/07/PW4bKo1FbTcCmOL4cJxO0wQ02ZKxWkgqp8kn.png)
- Conecte o React ao Redux.
- O
mapStateToProps
e omapDispatchToProps
lidam com os stores Reduxstate
edispatch
, respectivamente. - Os reducers
state
e as açõesdispatch
estão disponíveis através dothis.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](https://www.freecodecamp.org/portuguese/news/content/images/2022/07/xkGNd8KHWKzjY-ZAnIisJXRXTmZ0NPdluxFw.png)
- Clique no botão
submit
no componente Search do React - A função
click
faz o dispatch de uma ação. A funçãodispatch
se conecta ao componente Search viamapDispatchToProps
e é disponibilizada para othis.props
- (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 - O state do Reducer é atualizado com os novos dados da busca disponíveis na Etapa 3.
- O state do Reducer já está conectado ao
this.props
no componente Search pelomapStateToProps
- 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.