RocketShoes-Web: A JavaScript repository from mauriani

RocketShoes

Projeto

Essa aplicação foi desenvolvida no módulo 07 do curso GoStack/Bootcamp da Rocketseat. O intuito desse módulo foi entender o que é redux e como usar.

Iniciando a Aplicação

$ git clone <https://github.com/mauriani/RocketShoes-Web>

Depois disso acesse a pasta de cada do projeto e instale a dependências com o seguinte comando abaixo

$ yarn install # ou npm install

Para dá start na aplicação precisamos deixar a api rodando juntamente com o nosso react.

npx json-server server.json -p 3333
yarn start

API

Para fazermos o processo de manipulação de uma api usamos JsonServer. Para usar no projeto precisamos criar um arquivo chamado server.json e ao dá start na aplicação a api tem que está rodando também.

Adicionando a biblioteca

yarn global add json-server

Start

npx json-server server.json -p 3333

Tecnologias utilizadas

O que é o Redux?

O Redux é uma biblioteca para gerenciamento de estado que segue os princípios da arquitetura flux.
Redux é um container de estado previsível para aplicações JavaScript.

Configuração

Em nossa aplicação vamos utilizar o redux para controlar todo o processo de adicionar um item ao carrinho, contabilizar quantos itens vamos ter, e até mesmo o total. Quando instalamos o redux vamos disparar um action e ela será responsável por fazer todo os processo. A configuração do processo está descrito abaixo.

Instalando o Redux

Vamos instalar o redux e pacote de interação entre react e redux.

yarn add redux react-redux

Após instalar criamos uma pasta store com as configurações redux. Assim:

import { createStore } from 'redux';

const store = createStore();
export default store;

Mas precisamos ir no App.js e importar de dentro do redux um carinha chamado provider. Esse provider deixa disponível o store da aplicação para todo o ambiente.

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';

import Header from './pages/components/Header';
import GlobalStyle from './pages/styles/global';
import Routes from './routes';

import store from './store';

function App() {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <Header />
        <Routes />
        <GlobalStyle />
      </BrowserRouter>
    </Provider>
  );
}

export default App;

Depois de instalar a biblioteca precisamos criar uma pasta store dentro de src, feito isso foi adicionado um arquivo index.js na raiz.
Dentro de store temos uma pasta modules e outra para o nosso cart, dentro de cart adicionamos um arquivo chamado reducer.
Para fazer mais de um redux, na pasta do modules, na raiz, criamos um arquivo chamado rootReducer.

Estrutura:

Arquivos:

Store/index

import { createStore } from 'redux';
import rootReducer from './modules/rootReducer';

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

modules/rootReducer

Esse arquivo foi criado com o intuito de se em algum momento desejamos criar outros reducer, para adicionar basta import a pasta e adiciona ao comando de combineReducers.

import { combineReducers } from 'redux';

import cart from './cart/reducer';

export default combineReducers({
  cart,
});

cart/reducer.js

export default function cart() {
  
}

Adicionando ao carrinho

No nosso projeto, tudo partiu da nossa página Home.

Primeiro importamos connect para que a conexão fosse estabelecida com redux.
- Assim:
```
import { connect } from 'react-redux';
```
Feito isso, removemos o export default do inicio da classe e colocamos no rodapé da aplicação a configuração de conexão. Assim:

export default connect()(Home);

Assim que realizamos a conexão, temos acesso a propriedade chamada dispatch. Esse dispatch e responsável por disparar as actions (responsável por dizer ao redux que quero alterar algo) do redux.

handleAddProduct = (product) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ADD_TO_CART',
      product,
    });
  };

Dentro do reducer criamos um switch com um case para ele ouvir apenas a minha action.

Primeiro iniciamos um state vazio.
Recebe a action
Pegamos o produto e colocamos dentro do array.

export default function cart(state = [], action) {
  /** adicionando elementos dentro, REDUX são imutaveis */
  switch (action.type) {
    /** switch garante que ele vai ouvir a acao */
    case 'ADD_TO_CART':
      /** copia todos produtos e adiciona o action.product */
      return [...state, action.product];
    default:
      return state;
  }
}

Após configurar a home, vamos na nossa pasta header e fazer o mesmo processo.

Primeiro adicionar o connect

import { connect } from 'react-redux';

exportar no rodapé, nesse caso podemos passar parâmetros.

export default connect((state) => ({
  cartSize: state.cart.length,
}))(Header);

Nosso arquivo fica assim:

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { MdShoppingBasket } from 'react-icons/md';

import { Container, Cart } from './styles';
import logo from '../../assets/images/logo.svg';

// eslint-disable-next-line react/prop-types
function Header({ cartSize }) {
  return (
    <Container>
      <Link to="/">
        <img src={logo} alt="Rocketshoes" />
      </Link>
      <Cart to="/cart">
        <div>
          <strong>Meu carrinho</strong>
          <span>{cartSize} itens</span>
        </div>
        <MdShoppingBasket size={36} color="#fff" />
      </Cart>
    </Container>
  );
}

export default connect((state) => ({
  cartSize: state.cart.length,
}))(Header);

Reactotron + Redux

Iniciando com a instalação das bibliotes.

yarn add reactotron-react-js reactotron-redux

Depois disso temos que criar uma pasta de configuração na dentro do nosso src.

config/ReactotronConfig.js

import Reactotron from 'reactotron-react-js';

import { reactotronRedux } from 'reactotron-redux';

if (process.env.NODE_ENV === 'development') {
  const tron = Reactotron.configure({ host: '192.168.1.148' })
    .use(reactotronRedux())
    .connect();
  tron.clear();
  console.tron = tron;
}

No nosso app.js precisamos importar o nosso arquivo de configuração.

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';

import './config/ReactotronConfig';

import Header from './components/Header';
import GlobalStyle from './pages/styles/global';
import Routes from './routes';

import store from './store';

function App() {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <Header />
        <Routes />
        <GlobalStyle />
      </BrowserRouter>
    </Provider>
  );
}

export default App;

Mesmo assim precisamos fazer a conexão entre reactotron e redux. Para isso na pasta store/index.js e fizemos as seguintes alterações.

import { createStore } from 'redux';
import rootReducer from './modules/rootReducer';

const enhancer =
  process.env.NODE_ENV === 'development' ? console.tron.createEnhancer() : null;

const store = createStore(rootReducer, enhancer);
export default store;

Configurando o Redux-Saga

O que é o Redux saga ?

O Redux Saga é uma biblioteca que visa tornar os efeitos colaterais do aplicativo (ou seja, coisas assíncronas, como busca de dados e coisas sujas, como acessar o cache do navegador) mais fáceis de gerenciar, mais eficientes de executar, mais fáceis de testar e melhores no tratamento de falhas.

Redux-saga é um middleware redux, o que significa que esse encadeamento pode ser iniciado, pausado e cancelado a partir do aplicativo principal com ações normais de redux, ele tem acesso ao estado completo do aplicativo redux e também pode enviar ações redux.

Middleware ele intercepta um action.

Instalação

yarn add redux-saga

Vamos para a pasta src/store/cart e criar um arquivo chamado sagas.js . No sagas vamos criar a chamada a api.

import { call, put, all, takeLatest } from 'redux-saga/effects';

import api from '../../../services/api';
import { addToCartSuccess } from './actions';

// * -> significa um generator ou async
function* addToCart({ id }) {
  // yield - é o generator do await, nossa chamada a api.
  const response = yield call(api.get, `/products/${id}`);

  // put dispara uma action
  yield put(addToCartSuccess(response.data));
}
// ouvindo quando a action for adicionada
export default all([takeLatest('@cart/ADD_REQUEST', addToCart)]);

Depois disso criamos um arquivo chamado sagas.js na raiz do modules.

import { all } from 'redux-saga/effects';

import cart from './cart/sagas';

export default function* rootSaga() {
  return yield all([cart]);
}

As nossas actions tiverem o nome alterado.

export function addToCartRequest(id) {
  return {
    type: '@cart/ADD_REQUEST',
    id,
  };
}

export function addToCartSuccess(product) {
  return {
    type: '@cart/ADD_SUCCESS',
    product,
  };
}

Na nossa pagina home a função que é chamada é a request.

Depois disso precisamos configurar o nosso index para identificar o nosso saga.

import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';

import rootReducer from './modules/rootReducer';
import rootSaga from './modules/rootSaga';

const sagaMiddleware = createSagaMiddleware();

const enhancer =
  process.env.NODE_ENV === 'development'
    ? compose(console.tron.createEnhancer(), applyMiddleware(sagaMiddleware))
    : applyMiddleware(sagaMiddleware);

const store = createStore(rootReducer, enhancer);
sagaMiddleware.run(rootSaga);
export default store;