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.