Troca de dados entre uma aplicação Redux e o servidor

Esta seção será para alunos experientes, que não pararam no que foi alcançado no Redux e decidiram ir até o fim deste tutorial. Nas próximas duas seções, abordaremos o trabalho de uma aplicação Redux com lógica assíncrona, conectaremos nossa aplicação com o backend e a ensinaremos a trocar dados com ele.

Das seções anteriores, sabemos que a base do funcionamento de uma aplicação Redux é um mecanismo síncrono. As etapas principais de funcionamento consistem no envio de ações quando algum evento ocorre na aplicação, depois na atualização do estado na store pela função redutora, na notificação dos componentes da aplicação sobre a mudança de estado e, consequentemente, na exibição do novo valor de estado nos componentes.

Na vida real, muitas vezes a aplicação também precisa de lógica assíncrona, por exemplo, ao trabalhar com requisições de API HTTP e obter dados de algum servidor externo. Portanto, para que nossa store Redux 'síncrona' possa funcionar com essa lógica assíncrona, é usado o chamado middleware - um software que atua como um intermediário ou conexão entre a store da nossa aplicação e, por exemplo, o servidor, com o qual começaremos a trabalhar neste capítulo do tutorial.

Para o Redux, muitos desses middlewares foram criados, no entanto, o mais amplamente difundido entre eles e ainda oficialmente recomendado para o trabalho de aplicações Redux com lógica assíncrona ainda é Redux Thunk. Este software nos ajuda a usar funções comuns (ou thunks), que podem conter lógica assíncrona, como setTimeout, Promises, async/await, para interagir com nossa store. Quanto ao próprio termo, um thunk é um trecho de código que faz algum trabalho tardio.

Agora que nos familiarizamos um pouco com como trabalhar com lógica assíncrona no Redux, podemos começar a implementar esta etapa em nossa aplicação. Precisamos fazer com que nossa aplicação possa interagir com algum servidor externo, recebendo e enviando dados para ele. Em outras palavras, nos espera um tópico emocionante e muito importante. Vamos começar.