Redux nunca mais! Gerenciamento de estados do jeito certo.
Tags: javascript, react, webdev, typescript
Published: 2023-08-24 13:05:22

Vamos discutir o conceito de gerenciamento de estados globais no React e como o Zustand pode ser uma escolha vantajosa para essa tarefa. Além disso, abordaremos brevemente a **arquitetura Flux** e destacaremos as vantagens do [**Zustand**](https://zustand-demo.pmnd.rs/) em comparação com outras bibliotecas, como o Redux.

## O que é Gerenciamento de Estados Globais no React?
No desenvolvimento de aplicativos React, muitas vezes nos deparamos com a necessidade de compartilhar e gerenciar estados que são relevantes para várias partes da nossa aplicação. O gerenciamento de estados globais é uma abordagem que permite armazenar e acessar esses estados de forma centralizada, facilitando a comunicação entre componentes que estão distantes na hierarquia de componentes.

## Arquitetura Flux
Antes de entrarmos em detalhes sobre o **Zustand**, é importante mencionar a arquitetura Flux. O Flux é uma arquitetura de gerenciamento de estados que foi desenvolvida pelo Facebook (Meta) para lidar com os desafios de gerenciar estados em aplicações **React**. Ela consiste em quatro partes principais:

- **Actions**: São eventos que descrevem uma mudança de estado. Elas são despachadas para o Dispatcher.

- **Dispatcher**: É o ponto central que recebe as ações e as encaminha para os Stores apropriados.

- **Stores**: São os objetos que contêm o estado e a lógica de negócios. Quando uma ação é despachada, os stores atualizam seu estado correspondente.

- **Views**: São os componentes React que exibem o estado dos stores. Quando os stores são atualizados, as views são re-renderizadas.

A arquitetura Flux fornece um fluxo unidirecional de dados, o que simplifica o rastreamento de como o estado é modificado e propagado pela aplicação.

## Vantagens do Zustand
Agora que entendemos o contexto do gerenciamento de estados globais, vamos explorar as vantagens do Zustand em comparação com outras bibliotecas populares, como o Redux:

1. **Simplicidade de Implementação**:
O Zustand é incrivelmente simples de configurar e usar. Ele não requer uma quantidade excessiva de código ou configuração, o que acelera o desenvolvimento.

2. **Sintaxe Minimalista**:
A sintaxe do Zustand é minimalista e fácil de entender, tornando-o uma ótima escolha para desenvolvedores iniciantes e experientes.

3. **Performance**:
O Zustand é conhecido por seu desempenho eficiente. Ele utiliza estratégias inteligentes para otimizar as re-renderizações de componentes, evitando renderizações desnecessárias.

4. **Tamanho Reduzido**:
A biblioteca é pequena em tamanho, o que significa que adicioná-la ao seu projeto não aumentará significativamente o tamanho final da sua aplicação.

5. **Compatibilidade com TypeScript**:
O Zustand tem um ótimo suporte para TypeScript, o que facilita a tipagem segura do seu código.

6. **Flexibilidade**:
Ele não impõe estruturas rígidas ou padrões específicos, permitindo que você escolha a melhor maneira de organizar seu estado e lógica.
Implementando o Zustand
Aqui está um exemplo simplificado de como implementar o Zustand em um aplicativo React:

## Instalação:

```bash
pnpm add zustand
```

### Criar um Store:

```typescript
import create from 'zustand';

interface StoreState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useStore = create<StoreState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useStore;
```

### Usar o Store em um Componente:

```typescript
import React from 'react';
import useStore from './useStore';

function Counter() {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Contagem: {count}</p>
      <button onClick={increment}>Incrementar</button>
      <button onClick={decrement}>Decrementar</button>
    </div>
  );
}

export default Counter;
```

Com estas poucas linhas de código, você criou um store Zustand e o utilizou em um componente React. O Zustand lida automaticamente com as atualizações de estado e re-renderiza os componentes quando necessário.

Em resumo, o Zustand é uma biblioteca de gerenciamento de estados globais para React que se destaca por sua simplicidade, desempenho e compatibilidade com TypeScript. É uma excelente escolha para projetos de qualquer tamanho, especialmente quando você precisa de um gerenciamento de estados eficiente e fácil de usar.