Descubra o que são as Sagas e como elas podem ajudá-lo a escrever códigos mais robustos e flexíveis.
React e Redux são ferramentas populares de desenvolvimento da Web para gerenciar o estado e desenvolver interfaces de usuário dinâmicas.
Acessar informações pode ser difícil e demorado, especialmente ao lidar com eventos assíncronos. O Redux-Saga, um pacote de middleware fácil de usar que gerencia atividades assíncronas, pode simplificar esse processo.
Aprenda como React para construir um aplicativo que recupera dados do Redux-Saga.
Entendendo o Redux-Saga
Redux-Saga é um pacote de middleware que simplifica o gerenciamento e o teste de efeitos colaterais, como acesso ao armazenamento do navegador e solicitações de API assíncronas. O uso de funções geradoras faz com que o código assíncrono pareça síncrono, facilitando o raciocínio e a depuração.
O Redux-Saga funciona procurando ações específicas do Redux e acionando Sagas, que são funções geradoras de efeitos colaterais. O Sagas pode executar operações assíncronas, como obter dados de uma API e, em seguida, despachar uma nova ação do Redux para atualizar o estado.
Veja o exemplo de uso do Redux-Saga para gerenciar chamadas de API assíncronas. Comece criando uma ação Redux que inicia o procedimento de coleta de dados:
exportarconst FETCH_DATA = 'FETCH_DATA';
exportarconst buscarData = (parâmetros) => ({
tipo: FETCH_DATA,
carga útil: parâmetros,
});
A carga útil da ação, FETCH_DATA, inclui todos os parâmetros essenciais, como o endpoint da API e os parâmetros de solicitação.
Em seguida, defina um Saga que ouça a atividade FETCH_DATA e faça a coleta de dados:
importar { ligar, colocar, pegar o mais recente } de'redux-saga/efeitos';
importar axios de'axios';exportarfunção* buscarDataSaga(Ação) {
tentar {
const resposta = colheita call (axios.get, action.payload.endpoint, {
parâmetros: action.payload.params,
});colheita colocar({ tipo: 'FETCH_DATA_SUCCESS', carga útil: resposta.data });
} pegar (erro) {
colheita colocar({ tipo: 'FETCH_DATA_ERROR', carga útil: erro });
}
}
exportarfunção* watchFetchData() {
colheita takeLatest (FETCH_DATA, fetchDataSaga);
}
Este Saga faz uma chamada de API para o axios biblioteca usando o chamar efeito. Em seguida, ele envia os dados buscados como uma nova carga de ação do Redux com o tipo FETCH_DATA_SUCCESS. Se ocorrer um erro, ele enviará uma nova ação Redux com o objeto de erro como carga útil e um tipo de FETCH_DATA_ERROR.
Por fim, você precisa registrar o Saga na loja Redux usando o middleware redux-saga:
importar { applyMiddleware, createStore } de'Restaurado';
importar createSagaMiddleware de'redux-saga';
importar rootReducer de'./redutores';
const sagaMiddleware = createSagaMiddleware();
const store = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);
Ao registrar o watchFetchData Saga com o novo middleware de instância, esse código cria outro redux-saga. O middleware é configurado na loja Redux usando AplicarMiddleware.
O Redux-Saga, em geral, fornece uma abordagem forte e versátil para gerenciar atividades assíncronas dentro Redux do React formulários. Você pode simplificar a busca de dados e gerar código mais fácil para testar, manter e atualizar usando Sagas para controlar erros de código.
Problemas comuns de busca de dados em aplicativos React
Existem algumas dificuldades que os desenvolvedores frequentemente encontram ao usar a busca de dados do React. Aqui estão alguns exemplos:
- Gerenciando ações assíncronas: são informações fornecidas por uma interface de programação que rastreia operações não simultâneas sem interferir na interface do usuário (UI). Trabalhar com várias solicitações de API ou dados que dependem de outros dados pode tornar isso difícil.
- Lidando com erros: as chamadas de API podem falhar e é vital que você lide com esses erros corretamente. Isso inclui fornecer mensagens de erro ao usuário e permitir que ele reenvie a solicitação.
- Atualizando a loja Redux: Você deve salvar as informações adquiridas de uma API na loja Redux para que outros componentes possam acessá-la. É crucial atualizar a loja sem interferir ou corromper os dados já existentes.
Como usar o Redux-Saga para busca de dados no React
Usar Redux-Saga para busca de dados permite separar a lógica para fazer chamadas de API e lidar com a resposta de seus componentes React. Como resultado, você pode se concentrar em renderizar os dados e reagir às interações do usuário enquanto o Sagas lida com a recuperação assíncrona de dados e o gerenciamento de erros.
Você precisa registrar o watchFetchData Saga com o Redux-Saga middleware para usar o Sagas em nossa loja Redux:
// src/store.js
importar { createStore, applyMiddleware } de'Restaurado';
importar createSagaMiddleware de'redux-saga';
importar rootReducer de'./redutores';
importar { watchFetchData } de'./sagas/dataSaga';const sagaMiddleware = createSagaMiddleware();
const store = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);
exportarpadrão loja;
Este código registra o sagaMiddleware com a loja Redux usando o applyMiddleware função e o createSagaMiddleware método do redux-saga pacote. Então, usando o correr método, ele executa o watchFetchData Saga.
Sua configuração do Redux-Saga está completa agora que cada componente está no lugar. A saga usa o fetchDataApi função para buscar os dados quando seu componente React envia a ação FETCH_DATA_REQUEST. Se a busca de dados agendada for bem-sucedida, ela despacha outra atividade com os dados buscados. Se houver um erro, ele envia uma nova ação com o objeto de erro.
// src/components/DataComponent.jsimportar Reagir, { useEffect } de'reagir';
importar { useDispatch, useSelector } de'reagir-redux';
importar { buscarDataRequest } de'../actions/dataActions';const DataComponent = () => {
const dispatch = useDispatch();
const { dados, isLoading, erro } = useSelector((estado) => estado.dados);useEffect(() => {
dispatch (fetchDataRequest({ param1: 'valor1', param2: 'valor2' }));
}, [Despacho]);se (está carregando) {
retornar<div>Carregando...div>;
}se (erro) {
retornar<div>Erro: {error.message}div>;
}retornar (
{data.map((item) => ({item.name}</div>
))}
</div>
);
};
exportarpadrão DataComponent;
No exemplo acima, você usa o useSelector gancho em seu componente React para obter os dados, está carregando, e erro valores da loja Redux. Além disso, você despacha a ação FETCH_DATA_REQUEST usando o gancho useEffect() quando o componente é montado. Você renderiza os dados, mensagem de carregamento ou mensagem de erro, dependendo do dados valores, está carregando, e erro.
Aproveitando o Redux-Saga para busca de dados, gerenciando solicitações de API assíncronas em um aplicativo React pode ser significativamente simplificado. Você pode criar um código mais sustentável e modular isolando a lógica de chamada da API de seus componentes e gerenciando o fluxo assíncrono no Sagas.
Melhores práticas para usar o Redux-Saga para busca de dados
Siga estas práticas recomendadas ao usar o Redux-Saga para busca de dados:
- Use Sagas distintas para cada operação de busca de dados. É aconselhável separar um Saga para cada processo de busca de dados, em vez de incluir toda a lógica em um único Saga. Manter e alterar o código é mais simples, pois você pode encontrar imediatamente as Sagas relevantes para determinadas atividades.
- Use o tratamento de erros integrado do Redux-Saga. Você pode usar o bloco try/catch do Redux-Saga para lidar com erros automaticamente. Isso nos permite gerenciar falhas centralmente e fornecer aos usuários mensagens de erro uniformes.
- Use sagas canceláveis para melhor desempenho. Quando você usa um componente React, ele pode acionar muitas chamadas de API. Situações de corrida e chamadas de interface de programação desnecessárias podem resultar desse gatilho de API. Ao cancelar todas as chamadas de API em andamento ao fazer uma nova solicitação, você pode evitar isso.
- Use os dados mais atuais. Ao fazer várias solicitações de API para os mesmos dados, é crucial garantir que eles usem os dados mais recentes. Usando o mais recente efeito, o Redux-Saga ajuda você a conseguir isso. O efeito garante que você esteja usando as chamadas de API mais recentes ou mais recentes e cancela todas as solicitações de API pendentes para os mesmos dados.
- Use um arquivo separado para sagas. Você deve manter as Sagas separadas do arquivo de armazenamento do Redux. Como resultado, suas Sagas serão mais fáceis de controlar e testar.
Buscar dados com Redux-Saga
O Redux-Saga oferece um método confiável e flexível para lidar com tarefas assíncronas em aplicativos React. Usando o Sagas, você pode criar um código mais robusto, testável e flexível que separa as preocupações.
A busca de dados pode ser uma operação difícil e propensa a erros, mas você pode simplificar com a ajuda do Redux-Saga. O Redux-Saga melhora a experiência do usuário, permitindo que você gerencie de maneira confiável e previsível muitos processos assíncronos.
Devido aos seus muitos benefícios e recursos, o Redux-Saga é uma adição fantástica à sua coleção de ferramentas de desenvolvimento React.
