DEV Community: sandersonsoares

Redux nunca mais! Gerenciamento de estados do jeito certo.

sandersonsoares — Thu, 24 Aug 2023 13:05:22 +0000

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 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:

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.
Sintaxe Minimalista:
A sintaxe do Zustand é minimalista e fácil de entender, tornando-o uma ótima escolha para desenvolvedores iniciantes e experientes.
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.
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.
Compatibilidade com TypeScript:
O Zustand tem um ótimo suporte para TypeScript, o que facilita a tipagem segura do seu código.
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:

pnpm add zustand

Criar um Store:

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:

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.

Arquitetura avançada e escalável para React

sandersonsoares — Thu, 27 Apr 2023 00:53:00 +0000

Introdução

Encontrar uma forma de estruturar uma aplicação em React que mantenha uma boa manutenibilidade e escalabilidade, com fácil leitura pode parecer uma tarefa difícil. É possível encontrar vários conteúdos sempre de uma forma diferente de estruturar o projeto de uma forma padrão.

Diferentemente do Angular, o React é um biblioteca que dá liberdade para os desenvolvedores construírem as aplicações sem necessariamente seguir um style guide.

Com um bom tempo desenvolvendo diversas aplicações, desde simples projetos, à grandes aplicações com micro-frontends. Pude chegar a uma arquitetura que pudesse deixar os componentes bem reutilizáveis, mantendo uma boa leitura e fácil manutenção, separando bem as responsabilidades, seguindo de forma concisa os princípios do SOLID.

Arquitetura

A arquitetura de cada projeto é pautado no bom senso. A idéia é simplificar o máximo possível, sempre respeitando um padrão de arquitetura e utilizando padrões de projeto e princípios do SOLID.

Para um padrão de arquitetura simples e escalável, definimos um desenho onde seguimos alguns Design Patterns.

Segundo o desenho a arquitetura do projeto contém 4 camadas.

main: Conterá todas as camadas de view da aplicação, desde componentes (Utilizando o Atomic Design), como arquivos de contexto e rotas. Preferencialmente os arquivos .tsx estarão aqui.
common: As camadas que possam ter regras em comum para o projeto e arquivos que possam ser compartilhados em uma ou mais telas, como enums, arquivos de configurações etc.
core: Aqui contém as camadas de regra de negócio de chamadas externas. Utilizando o Factory Pattern nos serviços para facilidade de manutenção e testes. Camada como o Store para uma Arquitetura Flux caso necessário. Posso deixar com uma recomendação o uso do Zustand. E para camada de validações se preciso, pode-se utilizar os esquemas de validações. Uma biblioteca interessante para isso é o Yup.
assets: A mais opcional. Caso seja necessário, aqui podemos colocar as fontes, imagens e ícones*.*

Conclusão

Posso ressaltar que cada projeto pode exigir abordagens diferentes. Tornando dispensáveis o uso de algumas dessas camadas, porém segui-las pode evitar problemas de organização e aproveitamento de código no futuro.

Sempre é bem vindo o uso de padrões de projeto. Posso deixar como um extra, a utilização do Singleton para a configuração de suas chamadas a api. Pode-se criar uma instância de configuração em um arquivo /common/configs/api.config.ts. E usar a instância pronta com baseURL, interceptors, headers e etc, em seus services na camada de core.

ESlint + Prettier in VSCode for Typescript with React

sandersonsoares — Fri, 29 Apr 2022 14:00:37 +0000

Para a configuração de um projeto em Javascript ou Typescript que dê uma boa produtividade, e padrão no estilo do código, é sempre interessante utilizar ferramentas que tragam facilidades no dia a dia para validar esses erros e má formatações do código. Principalmente quando estamos desenvolvendo com um time em um mesmo projeto, fazendo com que evite muita diferenciação em como o código é escrito entre os desenvolvedores.

Para isso, existem ferramentas poderosas como o ESlint que vai fazer toda a verificação de sintax, e o Prettier que vai padronizar todo o estilo do código.

Configurando o Typescript (Caso o projeto esteja em JS)

Abra o terminal e roda o comando para criar um arquivo chamado tsconfig.json ou você pode criá-lo diretamente pelo editor.

touch tsconfig.json

Instale o typescript no projeto rodando o comando:

# with npm
npm install typescript --save-dev

# with yarn
yarn add typescript -D

Para popular as configurações padrões do Typescript, basta rodar o comando:

tsc init

Eu ainda alterei as configurações para:

{
"compilerOptions": {
    "jsx": "react",
    "baseUrl": ".",
    "strict": false,
    "esModuleInterop": true,
    "noImplicitAny": false,
    "paths": {
        "@/*": ["resources/js/*"]
    }
},
"exclude": ["node_modules", "public"]
}

Para mais informações acesse a documentação oficial

Configurando o ESLint

Para instalar o eslint, você pode adicionar o pacote como dependência de desenvolvimento rodando o comando no terminal:

npm install eslint --save-dev

# or

yarn add eslint --dev

Você vai poder inicializar o eslint no projeto rodando:

yarn run eslint --init

No terminal, irá surgir um questionário para ir fazendo a configuração, e você pode ir configurando de sua preferência. Minha escolha foi o React, e gerei o arquivo usando Javascript.

Você pode verificar como instalar na documentação oficial

Adicionando plugins no Lint

Eu gosto de instalar o eslint-plugin-react-hooks para verificação de utilização dos hooks de maneira correta.

Para instalar é só rodar:

# npm 
npm install eslint-plugin-react-hooks --save-dev

# yarn 
yarn add eslint-plugin-react-hooks --dev

e adicionar nas configurações do lint:

{
  "extends": [
    // ...
    "plugin:react-hooks/recommended"
  ]
}

E costomizar os avisos com:

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Configurando o Prettier com o ESlint

Para instalar a extenção do prettier pro lint, é só rodar:

# with npm
npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier
npm install --save-dev eslint-config-prettier

# with yarn 
yarn add prettier@latest eslint-plugin-prettier@latest eslint-config-prettier@latest -D

E adicione no eslintrc. estas configurações:

{
extends: [
    //...
    'prettier',
  ],
plugins: ['prettier'],
rules: {
        // ...
    'prettier/prettier': 'warn',
  },
}

Adicione o arquivo .prettierrc na raiz do projeto, e coloca as suas configurações. Você pode verificar a documentação para personalizar da forma que você achar melhor.

Meu arquivo ficou assim:

{
    "tabWidth": 2,
    "singleQuote": true,
    "semi": true,
    "trailingComma": "all",
    "parser": "flow",
    "printWidth": 120,
    "jsxSingleQuote": true,
    "jsxBracketSameLine": true,
    "arrowParens": "always",
    "endOfLine": "auto"
}

Você pode também, definir as configurações do prettier no próprio arquivo do eslint. Você pode acessar a documentação no github para saber como.

Configurando o ESLint no VSCode

Adicione uma pasta .vscode na raiz do projeto caso ela não exista.
Cria um arquivo com o nome settings.json, caso não exista.

E adicione estas configurações:

{
    "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

Isso vai forçar o ESLint formatar automaticamente sempre que um arquivo for salvo.

Para a integração funcionar, é só instalado o plugin do ESLint para o VSCode:

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Conclusão

De modo geral só foi preciso instalar estas dependências:

"@types/jest": "^27.0.1",
"@types/node": "^16.7.10",
"@types/react": "^17.0.19",
"@types/react-dom": "^17.0.9",
"@typescript-eslint/eslint-plugin": "^4.31.0",
"@typescript-eslint/parser": "^4.31.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.25.1",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "2.3.2",
"typescript": "^4.4.2"

O arquivo .eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'react-hooks', 'prettier'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'react/prop-types': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    'prettier/prettier': 'warn',
  },
};

O arquivo .prettierrc:

{
    "tabWidth": 2,
    "singleQuote": true,
    "semi": true,
    "trailingComma": "all",
    "parser": "flow",
    "printWidth": 120,
    "jsxSingleQuote": true,
    "jsxBracketSameLine": true,
    "arrowParens": "always",
    "endOfLine": "auto"
}

O arquivo settings.json

{
    "typescript.tsdk": "node_modules/typescript/lib",
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}