This content originally appeared on DEV Community and was authored by Thiago Felipe
Este é um guia básico que sigo para configurar o Redux com React, entender o fluxo do Redux para um iniciante como eu é bem desafiador, por este motivo desenvolvi este passo a passo para facilitar este entendimento.
Se você ainda não conhece sobre o Redux vou deixar aqui o link da documentação.
Criando nossa aplicação React
Primeiro criaremos nossa aplicação React com o seguinte
comandonpx create-react-app my-app-reduxAgora iremos instalar o redux e o react-redux com o seguinte comando
npm install --save redux react-redux
Criando estrutura de pastas Redux
Cada um pode seguir sua estrutura de pastas, vou utilizar uma organização que gosto na criação de um projeto.
- Primeiro crie um diretório store e dentro dele um arquivo store.js
- Depois crie um diretório reducers e dentro dele um arquivo combineReducers.js e myFirstReducer.js
- E por último crie um diretório actions e dentro dele um arquivo actions.js
Lembrando que esta é uma organização que gosto de seguir, porém você está livre para organizar da forma que achar melhor! ?
Importando Provider e a Store
- Primeiro de tudo no arquivo
index.jsdo React iremos começar importando o Provider e também o arquivo store que será nosso próximo passo, ficando desta maneira:
import React from "react";
import ReactDOM from "react-dom";
import store from "../src/store/store";
import { Provider } from "react-redux";
import App from "./App";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
document.getElementById("root")
);
Criando Store
- Próximo passo é criarmos a Store que importamos no passo anterior, dentro do diretório store crie um arquivo
store.js, é aqui onde os componentes da nossa aplicação vai acessar nosso estado global, copie o código a seguir:
import { createStore } from "redux";
import reducers from "../reducers/index";
const store = createStore(
reducers,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
export default store;
- Esta linha de código
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()é a configuração do React Devtools veja mais neste link.
Criando Reducers
- Nesta estapa iremos criar nossos Reducers os Reducers serão nosso estado global da nossa aplicação, neste exemplo iremos criar somente um Reducer para imprimir o nome
Reduxna nossa tela, então só iremos ler o nosso estado global, não criaremos actions para modificar este estado.
primeiro iremos criar nosso arquivo myFirstReducer.js, este arquivo será o nosso estado global onde vai armazenar o nome Redux, ficando da seguinte forma:
const INITIAL_STATE = {
name: "Redux",
};
const myFirstReducer = (state = INITIAL_STATE) => state;
export default myFirstReducer;
Criando o Combine Reducers
- Nesta etapa criaremos o combine Reducers, combineReducers é uma função do redux que retorna um objeto com todos os nossos reducers, nessa hora você está se perguntando: mais espera!!! a gente tem somente 1 reducer, pra que fazer está combinação de reducers?
Mesmo tendo somente 1 Reducer temos que pensar na escalabilidade da nossa aplicação, por este motivo já estamos criando esta combinação de Reducers.
- Dentro do diretório reducers crie um arquivo chamado
index.jse adicione o seguinte código:
import { combineReducers } from "redux";
import myFirstReducer from "./myFirstReducer";
export default combineReducers({ redux: myFirstReducer });
Lendo nosso estado Global
Agora é a hora de lermos nosso estado global e mostrar a palavra Redux na tela.
- Dentro do aquivo
App.jsdo React usaremos uma função para acessar nosso estado global esta função é omapStateToPropsou poderia ser qualquer outro nome, copie o código a seguir e cole no arquivoApp.js:
import { connect } from "react-redux";
function App(props) {
const { chave } = props;
return <h1>{chave}</h1>;
}
const mapStateToProps = (state) => ({
chave: state.redux.name,
});
export default connect(mapStateToProps)(App);
- No
App.jsimportamos oconnectdo react-redux, ele que vai fazer está conexão entre o react e o redux ligando assim todo esse quebra-cabeça do redux, a funçãomapStateToPropsvai receber nosso estado global no parâmetrostate, esta função retorna um objeto com chave e valor, nossa chave seráchave:ou poderia ser qualquer outro nome, e o nosso valor será o que a gente quer acessar no nosso estado, por exemplo o name utilizandostate.redux.name.
Pronto acabamos de utilizar nosso primeiro Redux juntos ?
This content originally appeared on DEV Community and was authored by Thiago Felipe
Thiago Felipe | Sciencx (2021-08-23T17:06:05+00:00) Guia básico de configuração do Redux com React ⚛️. Retrieved from https://www.scien.cx/2021/08/23/guia-basico-de-configuracao-do-redux-com-react-%e2%9a%9b%ef%b8%8f/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.