O projeto está inativo

Exemplo de aplicação React com Redux

Nesta documentação, vamos construir um webapp para uma agência de viagens utilizando o React, e o Redux como gerenciador de seus estados.

47

Conhecendo o Redux

O Redux é uma implementação da arquitetura Flux que propõe uma solução ao problema de compartilhamento de estados em aplicações web que consiste em criar um fluxo unidirecional de dados que poderá ser consumido por qualquer parte da aplicação.

Embora tenha sido construído com o React em mente, ele é independente a um framework, ou seja, pode ser usado com o Angular, Vue.js ou o jQuery por exemplo.

O Redux é fortemente inspirado em linguagens funcionais, como o Elm, como as funções puras, que veremos mais à frente. Além disso, ele possui uma tríade de princípios que conheceremos a seguir.

Single source of truth

O princípio um único ponto da verdade serve como uma solução para armazenar informações em um único lugar, chamado store, onde qualquer acesso aos dados armazenados na aplicação deve ser feito através dela. Sendo assim, quando um determinado dado é atualizado, uma notificação é enviada a todos os componentes que foram inscritos para receber essa informação a fim de que eles possam atualizar-se, evitando incoerências de dados em determinadas partes da aplicação.

A Figura 1 exibe um comparativo entre duas aplicações, com e sem Redux. Visualizamos como a store pode facilitar a gestão dos dados quando a aplicação começa a ganhar um porte maior, isso porque a store passa a ser responsável por monitorar as mudanças e notificar a todos os que precisam saber delas. Já uma aplicação sem o Redux é obrigada a desencadear eventos entre vários componentes, tornando-os fortemente acoplados. Isso dificulta a manutenção do projeto, uma vez que um componente pode depender de diversos outros para funcionar.

Compartilhamento de estado em uma aplicação com e sem redux
Figura 1. Compartilhamento de estado em uma aplicação com e sem redux

State is read-only

No Redux todas as informações são salvas como somente leitura, ou seja, imutáveis. Isso significa que para executar alguma alteração em nossa store, essa ação precisa ser feita a partir de uma action, que serve para informar a nossa aplicação que um estado foi modificado gerando um novo estado que substituirá o anterior.

A store conta com alguns métodos importantes:

  • o getState() permite que informações armazenadas na store sejam recuperadas. Entretanto esses dados são retornados apenas para a leitura.
  • o subscribe() serve para notificar quando uma mudança ocorre na store.

Temos um exemplo prático desses métodos a seguir:

const store = createStore(reducer)

store.subscribe(() =>
  console.log('store foi modificada', store.getState())
)

Qualquer mudança na store deve ser feita a partir do objeto action, que possui duas propriedades. A type é obrigatória e contém o tipo da ação que está sendo solicitada. Já a propriedade opcional payload tem o conteúdo que será enviado junto a essa ação, como vemos no exemplo abaixo:

{
  type: 'EXCLUI_PACOTE_VIAGEM',
  payload: {
    id: 1
  }
}

No exemplo acima, estamos executando a ação do tipo “EXCLUI_PACOTE_VIAGEM”, que solicita a store que um pacote seja excluído e enviamos junto o payload com os dados que serão necessários para encontrar o mesmo, no caso, o { id: 1 }.

Em alguns casos é necessário enviar propriedades específicas a uma action, para isso podemos utilizar um Action Creators, que são funções simples que retornam um objeto formatado. No exemplo abaixo veremos a prática desse tipo de action:

// actions.js
export const ADD_PACOTE = 'ADD_PACOTE'

/**
 * action creator para adicionar pacote
 * 
 * @param  id
 * @param  nome
 */ 
export const adicionaPacote = (id, nome) => ({
  type: ADD_PACOTE,
  payload: {
    id,
    nome
  }
})

No exemplo abaixo utilizamos o método dispatch, responsável por enviar a store a ação que será executada. No nosso caso utilizaremos a action creators adicionaPacote, criada no exemplo anterior:

// index.js
...
// dispara o action creator
store.dispatch(adicionaPacote(1, 'Viagem para pernanbuco'))

Changes are made with pure functions

Uma função pura é aquela que não causa efeitos colaterais, ou seja, não muda nenhum estado da aplicação e sempre gera o mesmo resultado ao receber os mesmos argumentos, sendo considerada determinística.

No Redux, para descrever um state que posteriormente será alterado é necessário criar um reducer utilizando uma função pura. Esta é chamada cada vez que uma action é acionada, recebendo o state atual e os valores da action, retornando a evolução daquele estado como resultado.

É importante lembrar que os reducers funcionam como modelos para a store e sempre retornam o mesmo resultado, além de não se basearem em nada que esteja fora de seu escopo para atingir tal resultado, como no exemplo abaixo:

// @flow
import { ADD_PACOTE } from '../actions'

function reducer (state = 0, action: { type: string, payload: any }) {
  switch(action.type) {
    case ADD_PACOTE:
      return state
        .filter(pacote => pacote.id !== action.payload.id)
        .push(action.payload)
    default:
      return state
  }
}

Considere que o nosso reducer executará a condição do switch ADD_PACOTE, onde é criado um novo state a partir do anterior. A diferença para o state anterior é que ele utiliza o método filter para procurar no estado atual do reducer se existe um item de mesmo id que será inserido através do método push.

Lembrando que o Redux utiliza o conceito de imutabilidade e no exemplo acima é possível perceber que não retornamos o mesmo valor. Na verdade será retornado um novo resultado, que é construído a partir do state junto com a action, passados como argumentos para o reducer.

Confira a seguir como ficará o projeto pronto ao final do curso:

GoTour GoTour
Descubra mais sobre Redux
Veja esse ebook
Crie sua conta grátis e baixe o e-book
Dê um upgrade no início da sua jornada.

Perguntas frequentes

Quem somos?
A DevMedia é uma escola de formação de programadores com mais de 20 anos de mercado. Já formamos mais de 100 mil programadores. A DevMedia ensina programação web, (desenvolvimento de site e aplicativos para celulares). A programação web é a área que mais contrata programadores em todo o mundo, sendo a maior porta de entrada para a área da tecnologia.
Por que a programação se tornou a profissão mais promissora da atualidade?
Nunca o mundo necessitou tanto de programadores como atualmente. Com a quarentena estabelecida pela Covid-19, lojas, restaurantes, escritórios e escolas, que tiveram suas atividades paralisadas, perceberam a urgente necessidade de adaptar seus negócios para o mundo digital. Em contrapartida as empresas de tecnologias, durante esse período, cresceram como nunca tanto em faturamento quanto em número de usuários. Com isso a necessidade de programadores cresceu muito. Empresas de grande e pequeno porte estão com vagas abertas e não conseguem contratar por falta de profissionais qualificados. No momento estima-se que o número de oportunidades no Brasil seja acima de 200 mil!
Como faço para começar a estudar?
Programação é um universo amplo, existem muitos caminhos e por isso é muito fácil se perder. Nosso conselho é: NÃO ESTUDE SOZINHO. Infelizmente 78% das pessoas que começam a estudar sozinhas desistem da profissão por não conseguirem aprender. Com uma boa orientação elas teriam conseguido! Se você tomou a decisão de entrar nesse mercado, faça um investimento no seu futuro e busque aprender com quem sabe. Isso vai triplicar suas chances de dominar a programação e conquistar uma vaga no mercado.
Em quanto tempo de estudo vou me tornar um programador?
O tempo depende, claro, da dedicação de cada estudante. A DevMedia ensina programação há 20 anos e com toda essa experiência montamos uma metodologia que tem como objetivo principal acelerar os seus estudos. Você terá um Plano de Estudo para te orientar em todos os passos do aprendizado. Desenvolverá diversos projetos reais para colocar em prática os conhecimentos e contará com o melhor suporte ao aluno da web. Todas as suas dúvidas serão respondidas de imediato. Seguindo nossa metodologia e se dedicando, entre 6 meses e um ano você já estará programando.
Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!
Ser programador é uma das maiores oportunidades que o Brasil oferece para quem não tem condições de fazer uma faculdade. Muitas empresas contratam sem fazer questão de diploma, o que importa para elas é que o candidato seja um bom técnico e consiga atender suas necessidades. Os salários iniciais para programadores são de R$2.500 mil, podendo chegar aos R$15 mil para aqueles que se dedicam. Com disciplina e um estudo correto, que não te faça perder tempo, é possível se tornar um programador em menos de um ano de estudo. Quando você já estiver empregado, aí sim você pode se aprimorar ainda mais fazendo uma faculdade na área.
O que eu irei aprender estudando pela DevMedia?
Nossas trilhas de estudo te permitem virar um programador Full Stack, que é aquele programador mais completo, ele domina o desenvolvimento Front-end, Back-end e Mobile. Você ficará apto para criar sistemas para computadores e aplicativos para celulares. Utilizamos como base a linguagem JavaScript que é a linguagem mais utilizada no mundo. Outra vantagem do JavaScript é a quantidade de oportunidades no mercado de trabalho. É sem dúvida a linguagem que mais possui vagas e a que mais dá oportunidade para os iniciantes.
Principais diferenciais da DevMedia
Suporte ao aluno - O aluno conta com a ajuda de professores para tirar dúvidas durante toda a jornada de ensino. As perguntas são respondidas em menos de uma hora por professores experientes e atuantes no mercado. Gamificação - A plataforma de ensino é divertida e motivante. É como se o aluno estivesse dentro de um game. Ele terá seu card pessoal, que poderá ser customizado utilizando as moedas que ele ganha quando acerta os exercícios. Ele poderá também trocar suas moedas por outros produtos dentro da plataforma. Além disso, seus acertos contam pontos no ranking mensal dos alunos. Tudo isso deixa os estudos mais leves e motivantes. Didática - A DevMedia já ensina programação há mais de 20 anos. Desenvolvemos ao longo desse tempo uma metodologia que ensina a programar de verdade, com menos aulas e mais prática, são dezenas de projetos e exercícios que desenvolvem a mente programadora no aluno. Projetos reais - Durante os estudos os alunos irão desenvolver dezenas de projetos em cada uma das carreira (front-end, back-end e mobile). Mas o principal é que os projetos da DevMedia não são “copia e cola” como se encontra por aí. Aqui o aluno vai desenvolver os projetos de forma autônoma, recebendo claro a nossa mentoria e suporte, mas o aluno terá condições para desenvolvê-los sozinho. Milhares de exercícios - Programação é prática, por isso a cada nova matéria o aluno passará por um bloco de exercícios para fixar o conteúdo e cada acerto será bonificado com pontos e moedas e valem uma posição no ranking dos alunos.
Qual o investimento financeiro que preciso fazer para me tornar um programador?
Na internet é possível encontrar cursos de todos os preços, desde 50,00 a R$15.000,00. Os cursos de 50,00 são cursos avulsos, que explicam apenas pedaços de uma determinada matéria. Para criar um conhecimento completo você precisaria comprar no mínimo de 15 a 20 cursos avulsos e correria o risco deles não se complementarem tão perfeitamente e seu conhecimento ficaria cheio de "buracos". Os cursos de R$15.000,00 não fazem nenhum sentido. Deixe para investir em cursos caros quando quiser se especializar. Por esse preço você pode inclusive estudar fora do pais. Na DevMedia, você terá um plano de estudo montado por quem já formou mais de 100 mil alunos, e já está nesse mercado há mais de 20 anos. Somos a única plataforma que oferece Suporte ao Aluno em tempo real e uma experiência de estudos gamificada para te manter motivado durante todo o período de estudo. E o melhor, nosso pagamento é recorrente, você não precisa usar o limite do seu cartão de crédito para investir no seu futuro. Aproveite para se matricular agora mesmo.
Como funciona a forma de pagamento da DevMedia?
Para que você possa investir nos seus estudos sem complicar sua vida financeira, a DevMedia cobra o valor da assinatura de forma recorrente, Igual o Netflix. Todos os meses debitamos o valor da parcela em seu cartão de crédito, sem comprometer o limite total do cartão. :) As primeiras 3 parcelas custam R$89,90 e a partir do 4o mês sua parcela diminui para R$49,90! Assim ela pesa cada vez manos no seu bolso! Nesse modelo, a gente te ajuda a pagar seus estudos, mas você precisa ajudar a gente a pagar nossos custos. Por isso a assinatura recorrente tem uma fidelidade de um ano. Essa fidelidade também vai te ajudar a se manter comprometido com os seus estudos. Temos um trato?

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar