Por que usar o Redux no React pode ser uma ótima opção

Hoje vamos falar sobre Redux, que pode nos ajudar a construir aplicativos incríveis usando o React. Vamos descobrir por que o Redux é tão legal e até mesmo fazer um exemplo prático para entendermos como usá-lo. Vamos lá!

O Redux é uma biblioteca de gerenciamento de estado muito usado para aplicações em JavaScript, especialmente populares em projetos React. "Gerenciamento de estado" pode parecer complicado, mas é basicamente como mantemos todas as informações do nosso aplicativo organizadas.

Imagine que você está brincando com um quebra-cabeça enorme, com muitas peças diferentes. Se você não mantiver as peças organizadas, pode ser difícil encontrar o que precisa quando quiser montar uma parte específica.

O Redux nos ajuda a manter nosso aplicativo organizado e facilita a busca pelas informações de que precisamos.

Por que usar o Redux no React? Agora você pode estar se perguntando: "Mas por que precisamos usar o Redux se já temos o React?".

Bem, o React é excelente para criar interfaces de usuário incríveis, mas pode ficar complicado quando temos muitos componentes compartilhando informações e precisamos atualizar tudo corretamente.

O Redux entra em cena e nos ajuda a lidar com essas situações complexas. Ele permite que compartilhemos informações entre os componentes de maneira mais eficiente e organizada. Além disso, o Redux torna mais fácil acompanhar as alterações feitas no estado do aplicativo, para que possamos entender melhor o que está acontecendo em nosso código.

Exemplo prático: vamos criar um exemplo simples para mostrar como usar o Redux no React.

Vamos fazer um contador que pode aumentar ou diminuir um número na tela. Vamos lá!

Passo 1: abra um terminal dentro da pasta do seu projeto e instale as dependências:

npm install react react-dom
npm install redux react-redux

Passo 2: crie um arquivo chamado 'store.js e adicione o seguinte código:

import { createStore } from 'redux';

// Definindo a ação (action) de incremento
const increment = () => {
return {
  type: 'INCREMENT'
};
};

// Definindo a ação (action) de decremento
const decrement = () => {
return {
  type: 'DECREMENT'
};
};

// Reducer
const counter = (state = 0, action) => {
switch (action.type) {
  case 'INCREMENT':
    return state + 1;
  case 'DECREMENT':
    return state - 1;
  default:
    return state;
}
};

// Criando a store
const store = createStore(counter);

export { increment, decrement, store };

Passo 3: vamos criar um component chamado Counter.js e adicionar o seguinte código:

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

const Counter = () => {
const count = useSelector((state) => state);
const dispatch = useDispatch();

return (
  <div>
    <h1>{count}</h1>
    <button onClick={() => dispatch(increment())}>+</button>
    <button onClick={() => dispatch(decrement())}>-</button>
  </div>
);
};

export default Counter;

Passo 4: Dentro do arquivo App.js importe o component Counter.jsque voce havia criado anteriormente:

import React from 'react';
import Counter from './Counter'; // não se esqueça de verificar se está importando da pasta certa.

const App = () => {
return (
  <div>
    <h1>Meu Contador</h1>
    <Counter /> // aqui esta o component que voce importou, lembre-se de verificar se a importação está correta.
  </div>
);
};

export default App;

Passo 5: Por fim, dentro do arquivo global index.js vamos importar o Provider de dentro do React-redux e o store.jsque voce havia criado no inicio desse artigo:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';  //import o Provider do react-redux;
import { store } from './store'; // import o aquivo store que voce criou;
import App from './App';

ReactDOM.render(
<Provider store={store}>  //voce precisa deixar o Providerporcima de toda aplicação para que não de erro.
  <App />
</Provider>,
document.getElementById('root')
);

Conclusão: Com o Redux, podemos manter nossos aplicativos organizados e facilitar o compartilhamento de informações entre os componentes. Espero que tenham gostado deste artigo.

siga-me no meu github

vamos nos conectar no Linkedin