React Tunk e React Saga são bibliotecas de middleware para lidar com efeitos colaterais em aplicativos React, especialmente para gerenciar operações assíncronas como chamadas de API. Ambos são comumente usados ​​com Redux, mas servem a propósitos e abordagens ligeiramente diferentes.

Reagir Thunk

1. Visão geral:

React Thunk é um middleware que permite escrever criadores de ações que retornam funções em vez de objetos de ação. Isto é útil para lidar com operações assíncronas, como solicitações de API ou lógica síncrona complexa (como envio condicional de ações). A função retornada recebe dispatch e getState como argumentos, permitindo despachar outras ações ou acessar o estado atual dentro da função.

2. Conceitos-chave:

• Middleware: Thunk é um middleware que amplia a capacidade da loja de lidar com funções (ou seja, thunks).
• Ações assíncronas: Com o Thunk, você pode atrasar o envio de uma ação ou despachá-la condicionalmente com base em um determinado estado ou lógica.
• Simples: O Thunk é relativamente simples, tornando-o fácil de usar na maioria dos casos de uso.

3. Como funciona:

• Normalmente, os criadores de ações retornam objetos JavaScript simples (ações).
• Com Thunk, um criador de ação pode retornar uma função (o "thunk") que recebe expedição e getState. Dentro desta função, você pode executar lógica assíncrona (por exemplo, buscar dados de uma API) e então despachar a ação real.

4. Exemplo:

Aqui está um exemplo básico de como você usaria redux-thunk em um aplicativo React:

   // Action Creator with Thunk
   export const fetchUser = () => {
     return async (dispatch) => {
       dispatch({ type: 'FETCH_USER_REQUEST' });
       try {
         const response = await fetch('/api/user');
         const data = await response.json();
         dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
       } catch (error) {
         dispatch({ type: 'FETCH_USER_FAILURE', payload: error });
       }
     };
   };

5. Vantagens do Thunk:

• Simplicidade: O Thunk é fácil de entender e implementar.
• Pequeno tamanho: É leve e não requer configurações complexas.
• Controle direto sobre o envio: Você tem mais controle sobre quando e como as ações são enviadas.

6. Desvantagens:

• Difícil de escalar: Para fluxos assíncronos complexos, o Thunk pode ficar confuso, com lógica aninhada e muitas chamadas de despacho.
• Menos estrutura: O Thunk não impõe uma estrutura específica para gerenciar efeitos colaterais, o que pode levar a código inconsistente se não for tratado corretamente.

Saga de reação

1. Visão geral:

React Saga é um middleware que permite lidar com efeitos colaterais de uma forma mais organizada usando funções geradoras. Em vez de retornar funções como Thunk, ele usa um sistema de “efeitos” para gerenciar operações assíncronas e controlar o fluxo de sua lógica. Sagas são processos em segundo plano de longa duração que podem ouvir ações despachadas e executar efeitos colaterais como chamadas de API, busca de dados e outras tarefas.

2. Conceitos-chave:

• Funções geradoras: Sagas são implementadas usando funções geradoras ES6 (função*), que permitem escrever código assíncrono que parece síncrono.
• Vigilantes e trabalhadores: As sagas são frequentemente divididas em sagas de "observadores" (que ouvem ações despachadas) e sagas de "trabalhadores" (que lidam com os efeitos colaterais).
• Take, put, call: Redux-Saga fornece criadores de efeitos (take, put, call, etc.) para controlar quando acionar efeitos colaterais, despachar ações e chamar APIs.

3. Como funciona:

• Com Redux-Saga, você define sagas (tarefas em segundo plano de longa duração) que são responsáveis ​​por lidar com efeitos colaterais.
• As sagas são normalmente escritas como funções geradoras e produzem efeitos como call (para invocar funções) e put (para despachar ações).
• As sagas também podem esperar por ações específicas com take ou ouvir quaisquer ações com takeEvery ou takeLatest.

4. Exemplo:

Aqui está um exemplo básico de como redux-saga pode ser usado:

   import { call, put, takeLatest } from 'redux-saga/effects';

   // Worker saga: will be fired on FETCH_USER_REQUEST actions
   function* fetchUser(action) {
     try {
       const response = yield call(fetch, '/api/user');
       const data = yield response.json();
       yield put({ type: 'FETCH_USER_SUCCESS', payload: data });
     } catch (e) {
       yield put({ type: 'FETCH_USER_FAILURE', message: e.message });
     }
   }

   // Watcher saga: spawns a new fetchUser task on each FETCH_USER_REQUEST
   function* mySaga() {
     yield takeLatest('FETCH_USER_REQUEST', fetchUser);
   }

   export default mySaga;

5. Vantagens da Saga Redux:

• Melhor para efeitos colaterais complexos: A abordagem baseada em efeitos do Saga é mais escalonável e adequada para gerenciar fluxos assíncronos complexos (por exemplo, lidar com novas tentativas, debouncing ou chamadas de API em cascata).
• Testável: Sagas são fáceis de testar, pois são construídas em torno de funções geradoras.
• Declarativo: O uso de efeitos deixa mais claro quais efeitos colaterais acontecerão, tornando o fluxo mais previsível.
• Cancelamentos e sequências: O Saga facilita o cancelamento de tarefas em andamento ou a aplicação de fluxos de sequência de eventos (como esperar por múltiplas ações).

6. Desvantagens:

• Curva de aprendizado mais acentuada: Usar funções de gerador e o padrão geral da saga pode ser difícil de entender para iniciantes.
• Despesas gerais: Para aplicações pequenas, pode parecer um exagero em comparação com soluções mais simples como Thunk.
• Verbose: Sagas tendem a envolver mais código padrão em comparação com Thunk.

Comparação: React Thunk vs. React Saga

Quando usar qual?

• Use React Thunk se:

  • Seu aplicativo tem necessidades assíncronas relativamente simples, como solicitações básicas de API e envio com base em condições.
  • Você deseja uma solução leve e fácil de entender, sem muitos clichês.

• Use React Saga se:

  • Você precisa gerenciar fluxos assíncronos mais complexos, como novas tentativas, sequência de ações, condições de corrida ou múltiplas tarefas que dependem umas das outras.
  • Você prefere a abordagem declarativa e deseja melhor controle sobre os efeitos colaterais.
  • Seu aplicativo requer melhor testabilidade e capacidade de manutenção do código no longo prazo.