Redux com React

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.

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.

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.

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.

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;

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.

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.

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.

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 nomeadas por convenção 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.

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.

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