5
(2)

Aplicações hoje em dia geralmente são escritas em ReactJS por causa da vasta comunidade, ecossistema, recursos disponíveis e flexibilidade.

Na maioria dos casos, o gerenciamento de estado dessas aplicações é feita com Redux. Dependendo da complexidade da aplicação, você acaba tendo que escolher um middleware para gerenciar os efeitos colaterais do gerenciamento do estado no seu Redux.

Por conta disso, eu escolhi as duas bibliotecas mais populares da comunidade para fazer uma comparação e deixar você escolher o que mais faz sentido para o seu projeto. Começando do básico.

O que é Redux?

Redux é um container de estado previsível para aplicações JavaScript.

Ele ajuda a escrever aplicações que se comportam de maneira consistente, rodando em diferentes ambientes e fáceis de testar. Também fornecem uma excelente experiência de desenvolvimento, como um editor em tempo real e debugger com “viagem no tempo” integrada.

O que são Sagas?

O Redux Saga é uma biblioteca que visa tornar os efeitos colaterais do aplicativo (ou seja, coisas assíncronas, como busca de dados e coisas sujas, como acessar o cache do navegador) mais fáceis de gerenciar, mais eficientes de executar, mais fáceis de testar e melhores no tratamento de falhas.

O modelo mental é que uma saga é como um segmento separado em seu aplicativo, que é o único responsável pelos efeitos colaterais. redux-saga é um middleware redux, o que significa que esse encadeamento pode ser iniciado, pausado e cancelado a partir do aplicativo principal com ações normais de redux, ele tem acesso ao estado completo do aplicativo redux e também pode enviar ações redux.

Ele usa um recurso do ES6 chamado Generators para facilitar a leitura, gravação e teste desses fluxos assíncronos. Ao fazer isso, esses fluxos assíncronos se parecem com o código JavaScript síncrono padrão (como async/await, mas os geradores têm alguns recursos mais impressionantes que precisamos).

O termo saga foi usado pela primeira vez em 1987 e não é exclusivo do mundo JavaScript ou Redux. Esse padrão é amplamente usado em arquiteturas de microsserviços para melhorar a consistência na transição de informações entre serviços.

O que são Thunks?

Um thunk é um conceito na programação em que uma função é usada para atrasar a avaliação/cálculo de uma operação.

Redux Thunk é um middleware que permite chamar action creators que retornam uma função em vez de um objeto de ação. Essa função recebe o método dispatch da store, que é usado para despachar ações síncronas regulares dentro do corpo da função depois que as operações assíncronas forem concluídas.

O que justifica o uso dessas tecnologias?

Redux é a arquitetura mais estabelecida do setor em termos de gerenciamento centralizado do estado do aplicativo React. Mas, usando apenas o Redux, temos um segundo problema quando nosso aplicativo cresce muito (ou começa grande).

O grande problema aqui surge ao gerenciar os efeitos colaterais de nosso aplicativo (solicitações assíncronas, processamento paralelo, enfileiramento, ações de cancelamento etc.). Hoje, as soluções mais famosas para gerenciar esses efeitos colaterais no Redux são thunks e sagas.

Redux thunk

import { Types } from '../auth'

export function authSuccess(token) {
  return {
    type: Types.AUTH_SUCCESS,
    payload: token,
  }
}

export function authFailure(error) {
  return {
    type: Types.AUTH_FAILURE,
    payload: error,
  }
}

export function auth(credentials) {
  // Retorna uma função com dispatch
  return dispatch => {
    fetch('/login', { method: 'POST', body: credentials })
      .then(res => res.json())
      .then(res => dispatch(authSuccess(res)))
      .catch(err => dispatch(authFailure(err)))
  }
}

Na maioria dos casos, em projetos menores, o uso do Thunk é mais que suficiente se você precisar fazer muito poucas solicitações assíncronas e seu aplicativo não for complexo.

O Redux Thunk basicamente estende os recursos do seu repositório redux e permite executar operações síncronas mais complexas, bem como operações assíncronas simples, como solicitações AJAX.

PROS

  • Usa Promise e pode usar async/await
  • Simplicidade e facilidade

CONTRAS

  • Callback hell
  • Complexidade para escalar
  • Complexidade para escrever testes
  • Promises não podem ser canceladas, então não temos 100% de controle sobre nossas ações assíncronas.

Redux Saga

import { takeLatest, call, put } from 'redux-safa/effects'
import { Types, authSuccess, authFailure } from '../auth'
import * as api from '../api'

function* authenticate(credentials) {
  try {
    const token = yield call(api.login, credentials)   
    yield put(authSuccess(token))
  } catch(err) {
    yield put(authFailure(err))
  }
}

export default function* () {
  yield takeLatest(Types.AUTH, authenticate)
}

Se o seu aplicativo já foi projetado para escala média ou grande, ou se você tem planos ambiciosos para escalá-lo, o saga é a escolha certa.

O Saga também é um middleware que tem acesso total ao seu repositório redux, mas a diferença é que continua assistindo todas as ações despachadas e decidindo o que fazer com elas, usando as funções Generators, que é um novo recurso do ES6.

PROS

  • Fácil de escalar
  • Sem necessidade de action creators
  • Código é escrito sincronamente
  • Roda no background do Redux
  • Mais fácil de testar

CONTRAS

  • Precisa aprender a usar Generators
  • Adiciona uma nova camada de complexidade na aplicação

Com tudo isso dito, eu sempre parto da premissa de que não existe bala de prata e devemos sempre escolher as melhores ferramentas para solucionar nossos problemas e torná-los mais fáceis.

Postagem original: https://rafaelfragoso.com/redux-thunk-vs-redux-saga-what-to-choose-when-starting-a-new-reactjs-project/

O que você achou disso?

Clique nas estrelas

Média da classificação 5 / 5. Número de votos: 2

Nenhum voto até agora! Seja o primeiro a avaliar este post.

Compartilhar.

Sobre o autor

Full-Stack Developer e Software Engineer, especialista em Python e JavaScript, professor e palestrante de assuntos voltados à programação web, desktop e mobile, ciência de dados entre outros assuntos. Escritor dos Livros Python de A a Z e Flask de A a Z.

Deixe uma resposta