DEV Community

Cover image for Gerenciamento de Estado em Aplicações React com Redux e TypeScript
Vitor Rios
Vitor Rios

Posted on

2 1 1 1 2

Gerenciamento de Estado em Aplicações React com Redux e TypeScript

Introdução

Neste artigo, exploraremos como usar Redux em conjunto com TypeScript para gerenciar o estado em aplicações React. Abordaremos como a tipagem forte do TypeScript pode aprimorar a gestão de estados, tornando seu código mais previsível, fácil de manter e menos propenso a erros.

Por Que Redux com TypeScript?

Redux é uma biblioteca popular para gerenciamento de estado em aplicações JavaScript, e TypeScript é um superset de JavaScript que adiciona tipagem forte. A combinação desses dois oferece:

  • Previsibilidade: Saber exatamente o tipo de dados que estão sendo manipulados.
  • Manutenção Facilitada: Código mais fácil de entender e manter.
  • Redução de Bugs: A tipagem forte ajuda a evitar erros comuns relacionados ao tipo de dados.

Configurando o Ambiente

Primeiro, certifique-se de que React, Redux e TypeScript estão instalados no seu projeto. Se necessário, instale-os via npm ou yarn.

npm install react redux react-redux @types/react-redux typescript
Enter fullscreen mode Exit fullscreen mode

Estruturando a Store Redux

Definindo o Estado Inicial

Em TypeScript, você define o tipo de estado inicial:

interface AppState {
  counter: number;
}

const initialState: AppState = {
  counter: 0,
};

export default initialState;
Enter fullscreen mode Exit fullscreen mode

Criando Reducers

Um reducer é uma função que recebe o estado e a ação como argumentos e retorna o próximo estado:

import { Action } from 'redux';
import initialState, { AppState } from './initialState';

function rootReducer(state: AppState = initialState, action: Action) {
  // Lógica do reducer
}

export default rootReducer;
Enter fullscreen mode Exit fullscreen mode

Criando Actions

Actions em Redux são objetos que indicam que algo aconteceu. Com TypeScript, você pode definir um tipo para cada ação:

interface IncrementAction {
  type: 'INCREMENT';
}

export function increment(): IncrementAction {
  return { type: 'INCREMENT' };
}

// Defina mais actions conforme necessário
Enter fullscreen mode Exit fullscreen mode

Configurando a Store

Agora, configure a store Redux:

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);
export default store;
Enter fullscreen mode Exit fullscreen mode

Conectando Redux com React

Provider Redux

Envolva seu componente principal com Provider do react-redux:

import { Provider } from 'react-redux';
import store from './store';
import App from './App';

const Root = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

export default Root;
Enter fullscreen mode Exit fullscreen mode

Usando connect

Use connect para conectar componentes React à store Redux:

import React from 'react';
import { connect } from 'react-redux';
import { AppState } from './store/initialState';

interface Props {
  counter: number;
}

const CounterComponent: React.FC<Props> = ({ counter }) => (
  <div>{counter}</div>
);

const mapStateToProps = (state: AppState) => ({
  counter: state.counter,
});

export default connect(mapStateToProps)(CounterComponent);
Enter fullscreen mode Exit fullscreen mode

Usando Hooks

Com hooks, o processo é ainda mais simples:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment } from './store/actions';
import { AppState } from './store/initialState';

const CounterComponent: React.FC = () => {
  const counter = useSelector((state: AppState) => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      {counter}
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
};

export default CounterComponent;
Enter fullscreen mode Exit fullscreen mode

Conclusão

A combinação de Redux e TypeScript em aplicações React oferece uma abordagem robusta e segura para o gerenciamento de estado. Com as vantagens da tipagem forte do TypeScript, você pode construir aplicações mais confiáveis e fáceis de manter. Este artigo oferece uma visão geral de como estruturar e usar Redux com TypeScript em um projeto React.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay