Gerenciamento de Estados no React Native com Zustand
Durante o desenvolvimento React Native, normalmente nos deparamos com a necessidade de compartilhar o estado do “produto” selecionado em várias partes do aplicativo.
Por exemplo, ao adicionar um produto, queremos que a quantidade de itens selecionados seja refletida no carrinho de compras. Para lidar com essa complexidade de forma eficiente e simplificada precisamos de um gerenciador de estados, e para isso temos o Zustand.
Introdução ao Zustand
O Zustand é uma biblioteca minimalista e prática para gerenciamento de estados no React e React Native. Ele se destaca pela sua simplicidade e por não exigir o uso dos tradicionais Reducers do Redux, o que facilita bastante a gestão de estados sem muita complexidade.
Passos para Implementação com Zustand
Vamos agora detalhar os passos necessários para implementar o gerenciamento de estados com Zustand:
1. Instalação do Zustand
O primeiro passo é instalar o Zustand em nosso projeto. Podemos fazer isso executando o comando adequado dependendo do gerenciador de pacotes que estamos utilizando. Por exemplo, podemos usar npm install zustand ou yarn add zustand.
2. Criação da Store
Após a instalação, criamos uma pasta dedicada para armazenar nossas stores, como store, e dentro dela um arquivo para o estado global, como cartStore.ts.
3. Definição do Estado e Ações
Dentro do arquivo cartStore.ts, importamos create do Zustand e definimos o estado inicial e as ações que serão usadas para atualizar esse estado. Por exemplo, podemos ter um array de produtos e uma função para adicionar produtos ao carrinho.
4. Adição de Propriedades
Podemos estender o objeto de produto para incluir propriedades adicionais, como a quantidade de vezes que um produto foi selecionado.
5. Uso da Store
Em qualquer componente da nossa aplicação onde precisamos acessar ou atualizar o estado do carrinho, utilizamos o hook useStore que é criado pela função create do Zustand. Isso nos fornece uma maneira reativa e eficiente de lidar com mudanças de estado.
Exemplo de Implementação
Aqui está um exemplo simplificado de como configurar a store com Zustand:
// cartStore.ts
import { ProductProps } from "@/utils/data/products"
import create from 'zustand'
import * as cartInMemory from "./helpers/car-in-memory"
export type ProductCartProps = ProductProps & {
quantity: number
}
type StateProps = {
products: ProductCartProps[]
add: (product: ProductProps) => void
}
export const useCartStore = create<StateProps>((set) => ({
products: [],
add: (product: ProductProps) => set((state) => ({
products: cartInMemory.add(state.products, product),
})),
// outras ações...
}));
E para usá-la em um componente:
// Em algum componente React
import { useCartStore } from "@/stores/cartStore"
import { Button } from "@/components/button"
import { LinkButton } from "@/components/link-button"
export default function Product() {
const cartStore = useCartStore()
function handleAddToCart() {
cartStore.add(product)
}
return (
<View className="p-5 pb-8 gap-5">
<Button onPress={handleAddToCart}>
<Button.Icon>
<Feather name="plus-circle" size={20} />
</Button.Icon>
<Button.Text>Adicionar ao pedido</Button.Text>
</Button>
<LinkButton title="Voltar ao cardápio" href="/" />
</View>
);
};
Com essa implementação, nosso componente Product pode adicionar produtos ao estado global do carrinho, e esse estado pode ser acessado ou modificado por qualquer outro componente na aplicação.
O Zustand simplifica o compartilhamento de estado e o mantém acessível em todo o app, tornando-o ideal para situações como a que descrevemos.
