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.js que 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.