17
Redux com React
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
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__(),
);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.
A sintaxe continua exatamente a mesma;
const newAction = (payload) => ({ type: “NEW_ACTION”, payload });É um componente provido pela biblioteca reat-redux.
Tem como função disponibilizar funcionalidades do Redux dentro dos componentes React. O Provider faz isso através do encapsulamento do componente principal App.
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’);
);É um método que nos dá acesso à Store do Redux.
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);É a transformação de estados armazenados no Redux para props do componente.
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.
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.
É 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.
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,
});É 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.
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)),
});17