Redux com React
Tags: javascript, webdev, beginners, redux
Published: 2022-01-04 22:00:40

## Usando Redux com React

### Instalando

Antes de começarmos a utilizar o Redux em nossas aplicações React, temos que instalá-lo, mas não apenas isso. Além do Redux em si, também é necessária uma biblioteca de _“conexão"_, essa que tem como objetivo interligar o framework com o Redux, no caso do React é a React-Redux.

``` bash
npm i redux react-redux
```

---

## Diferença do Redux _Puro_ para o React-Redux

### Store

#### Sintaxe

A sintaxe geral continua a mesma, chamamos a função `createStore()` e armazenamos seu retorno em uma variável, essa que será exportada.

``` js
const store = createStore(rootReducer);
export default store;
```

Podemos adicionar uma linha de código extra para visualizarmos o **Redux no console do navegador**, porém para isso funcionar deve-se ter a **extensão Redux Devtools instalada**.

``` js
const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);
```

---

### Reducers

#### Sintaxe

A sintaxe dos Reducers também não sofre muita alteração, o que muda é a organização dos arquivos caso tenhamos mais de um Reducer. Sendo esse o caso, cada Reducer deve ficar em um arquivo único dentro da pasta _reducers/_, ao final devemos juntá-los no arquivo _index.js_, esse que deverá estar dentro do diretório _reducers/_ e conter o **rootReducer**.

O rootReducer nada mais é do que o _“compilado”_ de todos os Reducers de nossa aplicação, logo ele deve ser construído a partir da função `combineReducers()`, essa que recebe um objeto com todos os Reducers desejados.

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

Caso tenhamo um **rootReducer**, ele é o único que deverá ser exportado para a nossa Store.

---

### Actions

#### Sintaxe

A sintaxe continua exatamente a mesma;

``` js
const newAction = (payload) => ({ type: “NEW_ACTION”, payload });
```

---

## Provider

### O que é?

É um componente provido pela biblioteca reat-redux.

### O que faz?

Tem como função disponibilizar funcionalidades do Redux dentro dos componentes React. O Provider faz isso através do encapsulamento do componente principal _App_.

### Sintaxe

A sintaxe do Provider é similar a de qualquer outro componente React, com a diferença que ele deve **obrigatoriamente** receber uma prop store, essa por sua vez deve receber a Store criada pelo Redux.

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

---

## connect

### O que é?

É um método que nos dá acesso à Store do Redux.

### Sintaxe

A sintaxe, apesar de incomum, é simples. O método possui dois parênteses, o primeiro deverá receber dois parâmetros, sendo que precisamos passar ao menos um deles, não importando se é o primeiro ou o segundo.

Já o segundo parênteses recebe o componente React que desejamos conectar ao Redux, normalmente é o componente do arquivo em questão.

``` js
export default connect(mapStateToProps, mapDispatchToProps)(Component);
```

Caso optemos por passar apenas um parâmetro no primeiro parênteses, o outro parâmetro sempre deverá receber null.

``` js
export default connect(null, mapDispatchToProps)(Component);
export default connect(mapStateToProps, null)(Component);
```

---

## Estado para Props

### O que é?

É a transformação de estados armazenados no Redux para props do componente.

### Por que fazer?

O acesso aos estados armazenados no Redux, para leitura ou modificação, é feito através de props de um componente de classe ~~ou hooks de um componente funcional~~, logo fazer sua conversão é essencial.

### Como fazer?

O Redux faz essa transformação para nós de forma _"automática"_ através do método `connect()()`, porém para que ele consiga fazer isso, devemos passar funções específicas <u>nomeadas por convenção</u> de **mapStateToProps** e **mapDispatchToProps**.

Ambas as funções devem retornar um objeto.

---

### mapStateToProps

#### O que é?

É uma função que mapeia os valores armazenados no estado para uma props, em palavras mais simples, a função transforma o estado armazenado no Redux em props para o componente React, sendo essas disponíveis apenas para leitura.

#### Sintaxe

A função recebe um parâmetro padrão, normalmente denominado state e deve retornar um objeto, onde as chaves serão os nomes das props recebidas pelo componente e irão conter o estado de um Reducer.

``` js
const mapStateToProps = (state) => ({
  someProps: state.someReducer,
});
```

### mapDispatchToProps

#### O que é?

É uma função que irá disponibilizar o `dispatch()` **já vinculado a uma Action**, assim temos acesso, através das props, a uma função que poderá modificar o estado de nosso Reducer.

#### Sintaxe

Assim como o mapStateToProps, o mapDispatchToProps é uma função que retorna um objeto, sendo que cada chave desse objeto recebe uma função.

A função de cada chave do objeto, deve corresponder a uma Action diferente, como estamos utilizando o Redux devemos utilizar os Dispatchs internamente para _"despachar"_ as ações.

``` js
const mapDispatchToProps = (dispatch) => ({
  someAction: (value) => dispatch(newAction(value)),
});
```