React redux: o que é e como criar o seu primeiro projeto?

Provavelmente você já ouviu falar sobre React e Redux no mundo do desenvolvimento ou na carreira tech. Bom, podemos dizer que o Redux simplesmente fornece um mecanismo de assinatura que pode ser usado por qualquer outro código.

Ou seja, o React Redux é a conexão da interface do usuário para o app React. Ao utilizá-lo, você vai promover diversas otimizações de desempenho em sua aplicação, além de uma boa arquitetura e um código limpo. Veja o que vamos abordar neste artigo:

Fique com a gente! Depois que experimentar o Redux, você vai se surpreender com a rapidez com que começará a ver seus benefícios em seu código.

O que é o React redux?

Redux é uma biblioteca criada para armazenar estados de aplicações JavaScript em um contêiner de estado previsível, projetado para ajudar pessoas desenvolvedoras a escrever aplicativos que se comportam de forma consistente e que são fáceis de testar. O Redux pode ser usado em ambientes de cliente, servidor e até mesmo nativos.

Quando desenvolvemos aplicações utilizando Javascript, sempre temos que lidar com o gerenciamento de estado. O Redux veio para suprir essa necessidade de simplificar o controle dos estados de uma aplicação. Por isso, ao usar o Redux facilitamos o compartilhamento de estado entre vários componentes diferentes.

Embora seja usado principalmente como uma ferramenta de gerenciamento de estado com o React, você pode também usá-lo com qualquer outro framework ou biblioteca JavaScript, incluindo Angular, Vue, Ember e vanilla JS. Isso porque, apesar do Redux e do React serem usados ​​juntos na maior parte das vezes, eles são independentes um do outro.

Conheça a arquitetura do React redux!

Para entender o fluxo, vamos conhecer os componentes de arquitetura do Redux:

  • Loja (store): 

Apesar de “store” também ter o sentido de armazenamento no Redux (storage), a loja é o lugar onde está pautado todo o estado do aplicativo, como um grande contêiner ou um cérebro central e imutável, responsável por todas as partes do Redux. Ela é responsável por gerenciar o status do aplicativo, recebendo e enviando o que o seu componente precisa, além de possuir a função dispach (action). Inclusive, temos um texto sobre mobile learning muito interessante para você, que se interessa por esse assunto. 

  • Ações (actions): 

São as ações enviadas para a loja, que podem ser criadas exclusivamente pelas action creators. Assim, podemos pensar que uma ação é um objeto feito para guardar as informações do evento de mudança no estado. Ela engloba informações, como o tipo de ação, o tempo de ocorrência, o lugar de ocorrência e para qual estado realizar a alteração. Além disso, a única maneira de gatilhar uma mudança de estado na store é através das ações

  • Redutores (reducers): 

O redutor faz a leitura das cargas úteis das ações e especificar como o estado da aplicação vai mudar conforme a action enviada. Por isso, cada dado presente na loja deve ter seu próprio reducer. O próximo passo é atualizar o local onde as informações são guardadas através do estado referente a ela. Devido à sua função, os redutores são os componentes de arquitetura que permitem retornar a um novo estado a partir do estado inicial.

O fluxo no Redux geralmente funciona assim: um componente gera uma interação, que aciona um action creator e dispara uma ação para o store. Essa ação chega até um redutor, que vai processá-la e fazer a alteração de estado na store, disponibilizando, assim, um novo estado para o componente.

Conheça a sintaxe de um redux!

A sintaxe de um Redux é a seguinte:

state = {
  data: []
}

Qual a relação entre React Native e React redux?

O React Native compõe a biblioteca do JavaScript e tem como objetivo o desenvolvimento de interfaces para o sistema operacional do Android e IOS, utilizando JSV E DOM, além disso, é possível utilizá-lo juntamente com aplicações externas. 

Como mencionamos anteriormente, o React Redux pode ser utilizado com diferentes frameworks e bibliotecas. Por isso, é possível utilizá-lo com o React Native e ter resultados ainda melhores com seu código.

Então, chamamos de “React Native Reducers” as funções puras que especificam como o estado do aplicativo muda em resposta a uma ação. Eles interagem com a carga útil como argumento e retornam um novo estado para a store com base na ação passada para ele, assim como vimos no tópico de arquitetura do React Redux.

Como funções puras, as React Native Reducers não alteram os dados no objeto que é passada para elas, nem realizam nenhum efeito colateral no aplicativo. Ou seja, se damos o mesmo objeto, eles devem sempre produzir o mesmo resultado.

Qual a relação entre React redux e React hooks?

A partir de sua versão 7.1.0, o React Redux passa a contar com “hooks” de API que dão aos componentes de função a capacidade de usar o estado do componente local, executar efeitos colaterais e muito mais. Os React Hooks são descritos pelo desenvolvedor como funções que conectam-se ao state por meio de componentes funcionais. Nesse sentido, hooks não tem funcionalidade dentro das classes. 

O React Redux possui suas próprias APIs de hooks personalizadas, que permitem que seus componentes React assinem o Redux store e despachem ações. Porém também é possível escrever hooks personalizados, que permitem extrair hooks reutilizáveis ​​para adicionar um comportamento personalizado em cima dos hooks internos do React e avaliar o comportamento de state. 

E se você quer se aprofundar nesse assunto com a gente, aqui no blog temos um artigo super completo sobre React Hooks.

Quais as vantagens de usar o React redux?

Para descobrir as vantagens de usá-lo em suas aplicações desenvolvidas em React, primeiro você precisa entender qual problema o Redux soluciona.

Ao desenvolver um aplicativo, muitos bits de código (ou componentes) serão usados ou atualizados. A esses dados que variam com o tempo damos o nome de “estado”. Alguns exemplos de estado de aplicação vão desde a digitação de um e-mail no formulário até o resultado de uma requisição http. Ou seja, essas mudanças podem ou não ser fruto da interação da pessoa usuária com o aplicativo

Porém, quando deixamos o trabalho de atualização para que cada bit de código realize sozinho, isso significa que o código precisará ficar mais complexo. Isso também significa que cada bit de código precisará tentar trabalhar com as alterações que todos os outros bits de código no sistema estão tentando fazer no estado. Não parece um bom cenário, certo?

Esse problema pode ser menos perceptível em aplicativos pequenos, mas todos as grandes aplicações corporativas sofrem com isso.

Para evitar, o Redux fornece uma solução garantindo que o estado da sua aplicação seja encapsulado em um armazenamento central que trata de todas as atualizações e notifica todo o código que se inscreve no armazenamento de atualizações do estado. Assim, você não precisa mais passar o estado por uma árvore de componentes inteira, mas pode assinar essas alterações muito mais perto de onde as informações são necessárias.

Com o Redux, o estado de aplicação é imutável. Ou seja, cada mudança no estado resulta em uma versão totalmente nova do estado, o que vai te permitir escrever um código mais previsível e ter uma melhor experiência de depuração, já que é possível verificar qualquer versão anterior do estado através das ferramentas do desenvolvedor. Além disso, todas as alterações no Redux são feitas em sequência para garantir um resultado final previsível, livre de surpresas e condições de corrida.

Por isso, começar a usar Redux em seus aplicativos vai fazer com que você tenha que escrever menos, manter menos e descomplicar seus códigos! Para resumir, as principais vantagens são:

  • Aumenta a previsibilidade de um estado de aplicação;
  • Permite um código altamente sustentável e de fácil atualização;
  • Evita re-renderizações — o que é muito útil para pessoas desenvolvedoras front-end;
  • Otimiza a performance da aplicação, pois é muito eficaz em manter o estado de um determinado componente mesmo depois de desmontado;
  • Facilita a depuração, já que disponibiliza diversas ferramentas úteis para isso;
  • Útil na renderização do lado do servidor;
  • Facilita os testes de aplicação.

Mas é claro que existem alguns desafios ao usar o React Redux. Veja quais são na próxima sessão.

Quais os principais desafios ao usar o React redux?

Do outro lado da moeda, existem algumas desvantagens em utilizar Redux que as pessoas desenvolvedoras identificaram ao longo dos anos. Aqui estão as mais frequentes:

  • Não há relação direta entre actions e estados, ou seja, qualquer forma de encapsulamento é ineficaz;
  • Sem encapsulamento, os problemas de segurança aumentam à medida que o aplicativo ganha novos componentes;
  • Como não há encapsulamento de dados, qualquer componente pode acessar sua aplicação;
  • Torna os projetos mais rígidos e os estados mais complexos de gerenciar conforme a aplicação cresce;
  • Uso excessivo de memória, já que no Redux todo estado é imutável e, para atualizar um estado, o redutor precisa retornar um novo estado toda vez;
  • Para gerenciar o estado local de um aplicativo pequeno ou médio, o custo-benefício de utilizar o Redux pode ser muito alto, pois a quantidade de entradas no código que ele requer consome muito tempo;
  • Não é possível realizar tarefas assíncronas, apenas por meio de middlewares de terceiros como o redux-thunk e o redux-sagas;
  • Por vezes os estados iniciados com valores nulos quebram componentes.

Ao comparar os prós e contras, você pode perceber a importância de continuar praticando e se especializando cada vez mais. O Redux tornou-se uma ferramenta de gerenciamento de estado dominante no mercado, especialmente para empresas que executam aplicativos voltados para pessoas consumidoras. Sua compatibilidade com diferentes frameworks também aumenta seu alcance em diferentes plataformas. Por isso, é uma habilidade muito importante para adquirir se seu sonho é se tornar uma pessoa desenvolvedora.

Como criar um projeto com React redux? 9 Passos!

1. Criando um app no React Native

O primeiro passo é verificar se você tem todos os pré-requisitos para um app react-native de acordo com a documentação oficial. Para criar um novo aplicativo, inserimos o seguinte código (você pode substituir “meu-app” por um nome da sua escolha).

npx create-react-app meu-app

Esse comando criará um aplicativo básico que você poderá executar em seu dispositivo, seja Android ou IOS.

2. Como instalar o React redux?

Para que o redux rode com o react-native, vamos instalar alguns pacotes. 

yarn

yarn add react-redux
yarn add redux

npm

npm install react-redux
npm install redux

3. Configurando o React Redux: conectando ao react!

No index.js do seu app, você deve fazer as seguintes importações

import { Provider } from ‘react-redux’
import storeConfig from ‘./storeConfig/store’
 
const store = storeConfig()

Teremos algo como:

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById(‘app’)
);

Após a implementação:

ReactDOM.render(
<Provider store={store}>
    <React.StrictMode>
        <App />
    </React.StrictMode>
</Provider>,
    document.getElementById(‘app’)
);

Pronto, agora já temos a integração realizada. 

4. Criando as pastas necessárias

Actions

Em constants, crie um arquivo index.js:

export const teste1 = 'teste1'

As ações têm um tipo e uma carga útil, que no caso será teste 1.; e a carga útil count que atribuímos à variável loja:

import { teste1 } de '../constants';
export function changeCount(count) { 
return { 
type: teste1, 
payload: count 
} 

5. Criando a Redux Store 

Na pasta principal, adicione uma pasta chamada store e um arquivo chamado configureStore.js e, em seguida, passe o redutor para a loja.

6. Passe a Store para o app no React Native

Na pasta raiz, adicione o seguinte código no arquivo index.js:

import { AppRegistry } from 'react-native';
import React from 'react';
import App from './App';
import { name as appName } from './app.json';
import { Provider } from 'react-redux';
 
import configureStore from './store';
 
const store = configureStore()
 
const RNRedux = () => (
  <Provider store = { store }>
    <App />
  </Provider>
)
 
AppRegistry.registerComponent(appName, () => RNRedux)

7. Conecte o React Native à Redux Store

Para realizar essa conexão, usamos a função connect() da biblioteca react-redux:

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Button,
  Text
} from 'react-native';
import { connect } from 'react-redux';
import { changeCount } from './actions/counts';
import { bindActionCreators } from 'redux';
 
 
class App extends Component {
  decrementCount() {
    let { count, actions } = this.props;
    count--;
    actions.changeCount(count);
  }
  incrementCount() {
    let { count, actions } = this.props;
    count++;
    actions.changeCount(count);
  }
  render() {
    const { count } = this.props;
    return (
      <View styles={styles.container}>
        <Button
          title="increment"
          onPress={() => this.incrementCount()}
        />
        <Text>{count}</Text>
        <Button
          title="decrement"
          onPress={() => this.decrementCount()}
        />
      </View>
    );
  }
};

8. Teste o se app React Redux

Pronto, agora é só testar o seu aplicativo e ver a mágica funcionar.

Conclusão

Espero que agora React Redux seja um assunto de fácil compreensão para você. Essa temática frequentemente discutida no mundo mobile e suas diferentes aplicações são muito importantes para quem deseja se aprofundar na área.

Não esqueça de conferir o texto que a gente preparou para você sobre React e fique por dentro desse mundo de desenvolvimento web.