22 de mai de 2018

Redux: por que gerenciar aplicações utilizando essa ferramenta?

Udacity Brasil

Em poucas palavras, Redux é um framework para gerenciar aplicações. O que é diferente em relação a outros frameworks do tipo, como Angular e Vue, é seu funcionamento modular: de maneira resumida, ele desacopla suas funções.

Por exemplo, um site totalmente desenvolvido em Angular segue uma arquitetura SPA (State, View, Action) que não permite que você use diferentes frameworks em suas camadas. Já o uso de Redux permite desacoplar totalmente a camada View das outras.

Uma boa escolha para desenvolver as Views é o React, uma biblioteca de JavaScript flexível à forma que você usa para controlar seus States e Actions, o que deixa o uso de Redux responsável por esta parte da aplicação.

Apesar do uso mais comum do Redux ser junto ao React (e React Native, sua opção para desenvolvimento mobile), também existem bindings disponíveis para Angular, Angular 2, Vue, Mithril e muitas outras aplicações.

Assista ao webinar: Conheça o mercado de React

Os 3 princípios do Redux

Se você já programou uma aplicação JavaScript, sabe que um dos maiores problemas é controlar estados – um ponto em que o Redux atua.

E como isso acontece? São três princípios que formam e definem seu conceito:

  1. Há uma única fonte de verdade: todo o estado da aplicação é mantido em apenas um único objeto, chamado de Store
  2. O estado é imutável: o estado da aplicação é inalterável e a única maneira de alterá-lo é emitindo uma Action, ou seja, uma ação com a mudança
  3. Mudanças são feitas apenas por funções puras: Reducers recebem as Actions emitidas e aplicam-nas ao estado, sempre retornando um novo estado

Desenvolvimento previsível das aplicações

A Store (árvore onde os estados são armazenados) do Redux disponibiliza três métodos para a interação com o estado, ou State, através de sua API pública:

  • Subscribe: Este método irá adicionar um listener à sua Store, que irá monitorar qualquer alteração no State
  • getState: Este método irá retornar para você o atual State da aplicação, podendo ser usado para retorná-lo logo após uma alteração do mesmo
  • dispatch: O dispatch irá disparar novas Actions que poderão, ou não, alterar o State

Sendo estes os únicos meios de alterar o State, é possível dizer adeus às “lentidões” ocasionadas por Actions que chamavam métodos, que por sua vez chamavam outros métodos, e cada um desses passos alterava o State.

Leia: React Native: como desenvolver aplicativos React para iOS e Android

Reducers e suas vantagens

Reducers são a ponte entre a Action e a alteração da sua Store. Cada dado contido na Store tem o seu reduce, que lida com todas as ações que o envolvem.

O pedaço de código abaixo esclarece esse ponto:

    let initialState = {
      mensagem: 'Acionando Reducer'
    }

    function acionarReducer(state = initialState, action) {
      switch (action.type) {
    case ENTREGAR_MENSAGEM:
      return Object.assign({}, state, {
        mensagem: action.text
      })

    case APAGAR_MENSAGEM:
      return Object.assign({}, state, {
        mensagem: ''
      })

    default:
      return state
      }
    }

Primeiro, cria-se um State inicial para a aplicação, que irá imprimir a mensagem Acionando Reducer. Depois, cria-se a função acionarReducer. Esta função deverá receber dois parâmetros: o State inicial e uma Action, emitida para acionar este Reducer.

Se o tipo da Action for ENTREGAR_MENSAGEM, o switch irá atribuir o valor que a Action transmitir ao State e a função Object.Assign() será responsável por criar a cópia do estado e enviá-lo à Store.

Perceba que, para alterar o State, não é preciso estar preso ao Redux: é possível alterá-lo utilizando apenas o Reducer.

Leia também: Tecnologias de front-end: 6 maneiras de comparar Angular e React

Funções puras

Redux foi baseado em conceitos da linguagem funcional Elm, o que explica porque a maior do código escrito com Redux é composto por funções puras.

É através das funções puras que é possível manipular o State. Estas funções são os Reducers, que possuem a seguinte assinatura:

(currentState, action) => newState

Você pode alterar um State usando somente a assinatura acima.

Isso também torna os testes unitários – há quatro tipos: Action Tests, Reducers Tests, Middleware Tests e Components Tests – muito fáceis de serem feitos.

Velocidade da evolução do projeto

O começo da migração de um projeto para Redux pode ser um pouco trabalhoso, como em toda mudança de tecnologia, mas todo o processo de desenvolvimento se torna muito mais intuitivo e dinâmico após a curva de aprendizado.

Isso acontece porque a reutilização de código acaba sendo maior e mais eficaz com essa biblioteca. Por ser modular, Redux oferece um controle maior sobre a aplicação e não cria dificuldades na hora de integrar algo novo ao projeto.

Além disso, serve como porta de entrada para muitas pessoas que procuram soluções descomplicadas – algo cada vez mais interessante para desenvolvedores que querem se dedicar mais a inovar em seus códigos e torná-los cada vez mais eficientes.

Leia também:

Udacity Brasil