Introdução ao Redux
Tags: webdev, javascript, beginners, redux
Published: 2022-01-04 22:00:50

## 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.

``` bash
npm i redux
```

---

## Peças do Redux

### Quais são?
O Redux é formado por quatro partes principais, sendo elas:
- [Store](#store)
- [Reducer](#reducer)
- [Action](#action)
- [Dispatch](#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.

``` js
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 <u>estado inicial deve possuir um valor padrão</u>, visto que em sua inicialização o Reducer não recebe o valor do estado de outro lugar, <u>seria o equivalente a definir um valor inicial ao estado de um componente</u> 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.

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

``` js
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, <u>type</u> para identificar a ação e <u>payload</u> 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.

``` js
const action = { type: /* tipo da ação */, payload: /* novo valor */ };
```
``` js
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.

``` js
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, <u>sendo que cada chave condiz com um Reducer.</u>
Lembrando que é necessário importar essa função do Redux.

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

const store = createStore(rootReducer);
```