wesleymonaro

const app = require('express')();

app.get('/users', (req, res) => res.send('Hello Users API'));

app.listen(3001, () => console.log(`Users API listening on port 3001!`));

wesleymonaro

const app = require('express')();

app.get('/products', (req, res) => res.send('Hello Products API'));

app.listen(3002, () => console.log(`Products API listening on port 3002!`));

wesleymonaro

module.exports = {
  USERS_API_URL: 'http://localhost:3001',
  PRODUCTS_API_URL: 'http://localhost:3002',
};

wesleymonaro

const express = require('express');
const httpProxy = require('express-http-proxy');
const app = express();
const port = 3000;
const {
  USERS_API_URL,
  PRODUCTS_API_URL,
} = require('./URLs');

const userServiceProxy = httpProxy(USERS_API_URL);

wesleymonaro

import React, { Component } from "react";
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">Teste Redux</header>
      </div>
    );
  }
}

wesleymonaro

import ReduxThunk from "redux-thunk";
import reducers from "./appReducers";

import { applyMiddleware, createStore } from "redux";

const middleware = [ReduxThunk];

const store = createStore(reducers, applyMiddleware(...middleware));

export default store;

wesleymonaro

export const compraMateriais = () => {
  return dispatch => {
    // Código para fazer requisição a uma API

    dispatch({
      type: "COMPRA_MATERIAL",
      payload: {
        nome: "Caixa de canetas",
        qtd: 20
      }

wesleymonaro

const INITIAL_STATE = {
  materiais: []
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case "COMPRA_MATERIAL":
      return { ...state, materiais: [...state.materiais, action.payload] };

    default:

wesleymonaro

import { combineReducers } from "redux";
import reducer from "./reducer";

const reducers = combineReducers({
  reducer,
  // caso tenha mais reducers, inclua aqui
});

export default reducers;

wesleymonaro

import React, { Component } from "react";
import { Provider } from "react-redux";
import store from "./store";

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <div className="App">
          <header className="App-header">Teste Redux</header>