Guia bsico de configurao do Redux com React

Este um guia bsico 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 no conhece sobre o Redux vou deixar aqui o link da documentao.

Criando nossa aplicao React

• Primeiro criaremos nossa aplicao React com o seguinte
  comando npx create-react-app my-app-redux

• Agora 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 organizao que gosto na criao de um projeto.

• Primeiro crie um diretrio store e dentro dele um arquivo store.js
• Depois crie um diretrio reducers e dentro dele um arquivo combineReducers.js e myFirstReducer.js
• E por ltimo crie um diretrio actions e dentro dele um arquivo actions.js

Lembrando que esta uma organizao que gosto de seguir, porm voc est livre para organizar da forma que achar melhor!

Importando Provider e a Store

• Primeiro de tudo no arquivo index.js do React iremos comear importando o Provider e tambm o arquivo store que ser nosso prximo 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

• Prximo passo criarmos a Store que importamos no passo anterior, dentro do diretrio store crie um arquivo store.js , aqui onde os componentes da nossa aplicao vai acessar nosso estado global, copie o cdigo 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 cdigo window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() a configurao do React Devtools veja mais neste link.

Criando Reducers

• Nesta estapa iremos criar nossos Reducers os Reducers sero nosso estado global da nossa aplicao, neste exemplo iremos criar somente um Reducer para imprimir o nome Redux na nossa tela, ento s iremos ler o nosso estado global, no 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 funo 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 combinao de reducers?

Mesmo tendo somente 1 Reducer temos que pensar na escalabilidade da nossa aplicao, por este motivo j estamos criando esta combinao de Reducers.

• Dentro do diretrio reducers crie um arquivo chamado index.js e adicione o seguinte cdigo:

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.js do React usaremos uma funo para acessar nosso estado global esta funo o mapStateToProps ou poderia ser qualquer outro nome, copie o cdigo a seguir e cole no arquivo App.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.js importamos o connect do react-redux, ele que vai fazer est conexo entre o react e o redux ligando assim todo esse quebra-cabea do redux, a funo mapStateToProps vai receber nosso estado global no parmetro state, esta funo 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 utilizando state.redux.name.

Pronto acabamos de utilizar nosso primeiro Redux juntos