Introdução
O gerenciamento de estado é uma parte integrante do desenvolvimento do React Native.
Um estado é um objeto JavaScript usado para lidar com o React mutável Dados nativos em um componente.
Em um componente React Native, um estado pode sofrer mutação ao longo do tempo, principalmente como resultado de eventos do usuário.
Um estado local simples no React Native pode ser gerenciado com o método setState ou o gancho useState.
No entanto, conforme nosso aplicativo cresce, você pode precisar de uma biblioteca de gerenciamento de estado porque se torna cada vez mais difícil gerenciar o estado compartilhado entre os componentes.
Dados-fetching Bibliotecas para React Native
Portanto, o gerenciamento de estado é um dos problemas comuns que você pode encontrar ao desenvolver um aplicativo React. E pode ser um aspecto difícil de dominar porque existem toneladas de bibliotecas de gerenciamento de estado no React.
Abaixo estão algumas das mais populares:
Contexto
Os dados fluem unilateralmente no React, de cima para baixo-componente pai para componente filho. A API de contexto fornece uma maneira de passar dados pela árvore de componentes sem perfuração de suporte.
Redux
Redux é uma camada de gerenciamento de estado independente de estrutura. É muito poderoso e ótimo para grandes aplicações. Você pode usar Redux com React, React Native, Vue, etc.
Redux oferece um único objeto de estado global chamado store, e usa vários conceitos como ações, criadores de ação e redutores. Na maioria dos casos, você estaria usando Redux com um middleware como Redux Thunk ou Redux-Saga, e isso apresenta mais complexidade porque você tem mais coisas para aprender. No entanto, Redux é ótimo para gerenciamento de estado do lado do cliente.
Você pode obter um guia abrangente para usar Redux e React Native aqui .
React Query
Este artigo é focado no gerenciamento de estado no React Native usando React Query , uma tecnologia que se descreve como a biblioteca de busca de dados ausente para o React.
Vamos aprender mais sobre React Query na próxima seção.
O que é React Query 3?
O React Query é uma camada de cache leve que reside em nosso aplicativo. Como uma biblioteca de busca de dados, é independente de como buscamos nossos dados. A única coisa que o React Query precisa saber é a promessa retornada por Axios ou Fetch.
Os dois conceitos principais do React Query são consultas e mutações . Enquanto as consultas lidam com a busca de dados, as mutações lidam com a modificação de dados no servidor.
O React Query exporta um gancho useQuery para lidar com as consultas. O gancho useQuery leva dois parâmetros. O primeiro parâmetro é um identificador único para descrever o que estamos buscando. E o segundo identificador é a função de busca-uma função assíncrona responsável por obter seus dados ou gerar um erro.
Considere o código abaixo:
import {useQuery} from’react-query’; importar axios de’axios’; const fetchPosts=async ()=> {const {data}=await axios.get (‘https://jsonplaceholder.typicode.com/posts’); dados de retorno; }; const usePosts=()=> useQuery (‘posts’, fetchPosts);
O gancho useQuery retorna um objeto de consulta e também lida com todo o ciclo de vida em torno de nossa busca, portanto não precisamos usar useEffect.
O objeto de consulta consiste em alguns estados importantes mencionados por Docs da consulta React :
isLoading or status===’carregando’-A consulta não tem dados e está buscando isError ou status===’erro’-A consulta encontrou um erro isSuccess ou status===’sucesso’-A consulta foi bem-sucedida e os dados estão disponíveis isIdle ou status===’ocioso’-A consulta está desativada no momento (você’Aprenderei mais sobre isso em breve)
Uma consulta só pode estar em um desses estados. E além desses estados primários, ele também contém mais informações como:
erro-Se a consulta estiver em um estado isError, o erro estará disponível por meio dos dados de propriedade de erro-Se a consulta estiver em um estado de sucesso, os dados está disponível por meio da propriedade de dados isFetching-Em qualquer estado, se a consulta estiver buscando a qualquer momento (incluindo refetching em segundo plano), isFetching será verdadeiro
Sem React Query, cada um desses estados pode ter sido tratado usando um gancho useState diferente. Portanto, podemos ver que React Query nos ajuda a reduzir nosso clichê. Este é um ganho em experiência de desenvolvedor-ganho DX.
Além disso, o React Query ajuda com o armazenamento em cache pronto para uso. E isso tem um impacto direto em nossos usuários finais, pois torna nosso aplicativo mais rápido e responsivo.
Neste artigo, veríamos como gerenciar o estado React Native usando React Query. Vamos começar com os pré-requisitos na próxima seção.
Pré-requisitos
Conhecimento básico de JavaScript Conhecimento básico de React e React Native
Primeiros passos com React Query e React Native
Primeiro, criamos um novo aplicativo React Native usando Expo CLI como visto abaixo:
npm i–global expo-cli//inicializar um novo projeto expo init -o nome do seu aplicativo->
Será exibida uma lista de modelos:
Escolha o primeiro e mude para o diretório do seu aplicativo executando:
cd -o nome do seu aplicativo->
Em seguida, instale as dependências:
//instalar dependências npm i @ react-navigation/native @ react-navigation/stack axios react-native-gestos-handler react-native-safe-area-context react-native-screens react-query
Estrela no servidor de desenvolvimento:
npm start
Na próxima seção, vamos nos aprofundar no React Query criando um aplicativo simples usando dados de JSON Espaço reservado .
Gerenciamento de estado complexo com React Query
Configure o estilo
Começaremos criando uma pasta de constantes com um arquivo color.js dentro dele. Adicione o seguinte código ao arquivo color.js:
export default {primary:’# 202c41′, border:’# c6c6c6′, white:’#fff’, grey:’# 9ca5ab’};
Isso é usado para estilizar nosso aplicativo.
Configurar navegação
A seguir, configuramos nossa navegação. Crie uma pasta de navegação com um arquivo Main.js dentro dela.
Adicione o seguinte código ao arquivo Main.js:
import React from’react’; importar {createStackNavigator} de’@ react-navigation/stack’; importar {Posts} de’../screens/Posts’; importar {Post} de’../screens/Post’; const MainStack=createStackNavigator (); export const Main=()=> (
No código acima, configuramos a navegação para duas telas, a saber, Home e Post.
Criaremos os componentes Postagens e Postagens em um momento.
Adicionar consulta de reação
Agora temos que configurar o React Query. Modifique nosso arquivo App.js conforme mostrado abaixo:
import React from’react’; import {StatusBar} de’expo-status-bar’; importar {NavigationContainer} de’@ react-navigation/native’; import {QueryClient, QueryClientProvider} de’react-query’; import {Main} de’./navigation/Main’; const queryClient=new QueryClient (); exportar a função padrão App () {return (
No código acima, o React Query usa o QueryClient para interagir com um cache. E o componente QueryClientProvider é usado para conectar e fornecer o QueryClient ao nosso aplicativo.
Crie as telas do aplicativo
Em seguida, vamos criar componentes reutilizáveis para nossas telas. Crie uma pasta de componentes com um arquivo Text.js dentro dela. Adicione o seguinte código ao Text.js:
import React from’react’; import {StyleSheet, Text as RNText} de’react-native’; importar cores de’../constants/colors’; const styles=StyleSheet.create ({defaultText: {color: colors.primary, fontSize: 18}}); exportar const Text=({children, style={}})=> {const textStyles=[styles.defaultText]; textStyles.push (estilo); return
Acima, temos um componente de texto reutilizável com estilo padrão. Usaremos isso em nosso aplicativo para estilizar nossos textos.
Antes de criarmos as telas-os arquivos Post.js e Posts.js-precisamos configurar nossos ganchos para buscar dados renderizados por essas telas.
O arquivo Posts.js renderiza todas as postagens obtidas do JSON Placeholder e serve como a tela inicial enquanto o arquivo Post.js lida com os detalhes de cada postagem.
Crie duas pastas, nomeadamente telas e ganchos. Na pasta de ganchos, crie um arquivo usePosts.js e adicione o seguinte código:
import {useQuery} from’react-query’; importar axios de’axios’; const fetchPosts=async ()=> {const {data}=await axios.get (‘https://jsonplaceholder.typicode.com/posts’); dados de retorno; }; const usePosts=()=> useQuery (‘posts’, fetchPosts); exportar usePosts padrão;
Além disso, crie um arquivo usePost.js e o seguinte código:
import {useQuery} from’react-query’; importar axios de’axios’; const fetchPost=async (postId)=> {const {data}=await axios.get (`https://jsonplaceholder.typicode.com/comments?postId=$ {postId}`); dados de retorno; }; const usePost=(postId)=> useQuery ([‘posts’, postId], ()=> fetchPost (postId)); export usar usarPost padrão;
Nos exemplos de código acima, useQuery recebe um identificador exclusivo denominado posts como seu primeiro argumento e uma função de busca como seu segundo argumento. Agora podemos importar usePosts e usePost para uso em nossas telas.
Na pasta de telas, crie dois arquivos, a saber, Posts.js e Post.js. Adicione o seguinte código ao arquivo Posts.js:
import React from’react’; import {View, StyleSheet, FlatList, TouchableOpacity} de’react-native’; import usePosts de’../hooks/usePosts’; import {Text} de’../components/Text’; importar cores de’../constants/colors’; exportar const Posts=({navegação})=> {const {dados, isLoading, isSuccess}=usePosts (); return (
No código acima, renderizamos um texto de carregamento… se isLoading for verdadeiro. E renderizamos nossa lista de postagens usando FlatList se isSuccess for true.
Agora temos:
Em seguida, no arquivo Post.js, adicione o seguinte código:
import React from’react’; import {View, StyleSheet, ScrollView} de’react-native’; import usePost de’../hooks/usePost’; import {Text} de’../components/Text’; importar cores de’../constants/colors’; export const Post=({route})=> {const {post}=route && route.params; const {dados: comentários, isSuccess, isLoading}=usePost (post.id); return (
No código acima, recebemos a postagem clicada pelo usuário como um parâmetro de rota e buscamos seu comentário usando seu EU IRIA. Abaixo está um exemplo de tela de postagem:
Além disso, no primeiro carregamento, você veria o carregamento da postagem e do comentário, mas depois disso, quando navegar para frente e para trás, você não os verá novamente. Isso ocorre porque o React Query armazena nossos dados em cache, tornando o tempo de carregamento subsequente “instantâneo”.
Conclusão
O React Query é uma biblioteca de busca de dados bem pensada que vem com muitos recursos interessantes. Como vimos, ele oferece um ganho em DX e UX e também melhora o desempenho do nosso aplicativo.
Espero que depois de ler este artigo você tenha aprendido o suficiente para experimentá-lo em seu próximo projeto.
Por último, você pode obter o aplicativo completo no GitHub .
