Introdução ao Redux

Redux

O que é?

É uma biblioteca JS que tem como objetivo resolver problemas de fluxo de informação de uma aplicação front-end. O Redux pode ser usado junto de qualquer framework front-end e até mesmo com JS puro "Vanilla JS".
De forma mais generalista, podemos pensar no Redux como um “Banco de Dados do Front-end”, já que ele irá armazenar todos os estados de nossa aplicação, os disponibilizando em todo e qualquer componente.

Instalando

O Redux não vem por padrão na criação de um projeto React através do npx, logo temos que instalá-lo manualmente, para isso podemos utilizar o seguinte comando.

npm i redux

---

Peças do Redux

Quais são?

O Redux é formado por quatro partes principais, sendo elas:

• Store
• Reducer
• Action
• Dispatch

---

Store

O que fazem?

É uma entidade de armazenamento central, responsável por armazenar todos os estados de nossa aplicação. “Banco de dados do front”.

Sintaxe

Para inicializarmos nossa Store utilizamos o método .createStore(), esse que deverá receber por parâmetro o(s) Reducer(s) que iremos utilizar em nossa aplicação. Lembrando que é necessário importar de forma explícita o Redux dentro de nosso arquivo.

const store = Redux.createStore(reducer);

---

Reducer

O que fazem?

É uma função cuja única responsabilidade é receber e tratar pedidos de atualização provenientes das Actions, enviando o estado atualizado para o Store.

Sintaxe

As funções Reducer podem ser criadas a partir de Arrow Functions ou funções tradicionais, sendo que ambas recebem dois parâmetros obrigatórios, o estado inicial e a Action.

Reducers normalmente possuem uma estrutura simples de switch/case, onde irá ocorrer apenas a identificação da ação e o retorno do novo estado, qualquer “trabalho” muito elaborado para modificar o estado deve ser feito antes mesmo de enviar a Action ao Reducer.

O estado inicial deve possuir um valor padrão, visto que em sua inicialização o Reducer não recebe o valor do estado de outro lugar, seria o equivalente a definir um valor inicial ao estado de um componente de classe ou funcional.

Por questões de legibilidade o estado inicial é definido fora do parâmetro, afinal ele pode ser um objeto complexo e caso fosse inicializado dentro dos parâmetros, tornaria a função ilegível.

function reducer(state = INITIAL_STATE, action) {
  switch () {
    case:
      return newState;
    default:
      return state;
  }
}

const reducer = (state = INITIAL_STATE, action) => {
  switch () {
    case:
      return newState;
    default:
      return state;
  }
}

---

Action

O que fazem?

É um objeto que contém as alterações que queremos fazer em algum estado, possuindo duas chaves, type para identificar a ação e payload que irá conter os valores a serem atualizados. Comumente chamada de intenção.

Sintaxe

As Actions são objetos, logo podemos criá-las de duas formas, a estática e a dinâmica, por motivos óbvios a forma dinâmica é a mais utilizada. Sendo que a forma dinâmica é conhecida como actionCreator, que refere-se a uma função que retorna um objeto no formato esperado de uma Action.

const action = { type: /* tipo da ação */, payload: /* novo valor */ };

const actionCreator = (value) => ({ type: /* tipo de ação */, payload: value });

---

Dispatch

O que fazem?

É uma função que envia o objeto Action para o Reducer, pois as Actions não possuem acesso aos Reducers.

Sintaxe

O Dispatch é um método simples do Store, que tem como responsabilidade enviar a Action ao Reducer. Sua sintaxe é extremamente simples, chamamos o método .dispatch() e passamos por parâmetro a Action a ser enviada.
Apesar da simplicidade, temos que ter o cuidado de sempre importar o Store, pois sem ele não temos acesso ao Dispatch.

store.dispatch(/* Action */);

---

Combinando Reducers

Como fazer?

Como vimos até agora, só conseguimos passar um Reducer para a nossa Store, porém não é nem um pouco viável criar uma Store para cada Reducer, sendo assim o Redux disponibiliza uma função chamada combineReducers(), que tem como objetivo agrupar todos os Reducers, possibilitando assim a nossa Store receber quantos Reducers forem necessários.

Sintaxe

A sintaxe dessa função é extremamente simples, passamos por parâmetro um objeto que irá armazenar todos os nossos Reducers, sendo que cada chave condiz com um Reducer.
Lembrando que é necessário importar essa função do Redux.

const rootReducer = combineReducers({
  someReducer,
  otherReducer,
});

const store = createStore(rootReducer);