diff --git a/src/App.js b/src/App.js index f54312b..f2b666f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,19 @@ import React, {Component} from 'react'; import './App.css'; import {connect} from 'react-redux'; -import {addProduct} from './actions/index'; +import {addProduct, removeProduct} from './actions/index'; import Chance from 'chance'; export const chance = Chance(); -const Product = (props) =>
{props.name}
; +const Product = (props) =>
{props.name}
; const DaBest = ({name}) =>

The Best: {name}

; const AdderButton = ({add}) => +const RemoverButton = ({remove, id}) => + class App extends Component { @@ -30,12 +32,12 @@ class App extends Component { } render() { - const {productList, add, whoIsTheBest} = this.props; + const {productList, add, remove, whoIsTheBest} = this.props; debugger; return (
- {productList.map(product => )} + {productList.map(product => )}
@@ -47,6 +49,7 @@ class App extends Component { // React x REDUX STUFF const mapStateToProps = state => { + debugger; return { productList: state.products.productList, whoIsTheBest: 'Della', @@ -58,6 +61,7 @@ const mapStateToProps = state => { const mapDispatchToProps = { add: addProduct, + remove: removeProduct, }; export default connect(mapStateToProps, mapDispatchToProps)(App); diff --git a/src/actions/index.js b/src/actions/index.js index 79e204e..ae35ae6 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -1,5 +1,6 @@ export const ACTION_TYPES = { addProduct: 'ADD_PRODUCTS', + removeProduct: 'REMOVE_PRODUCTS', }; export function addProduct(product) { @@ -11,3 +12,13 @@ export function addProduct(product) { } } } + +export function removeProduct(product) { + debugger; + return { + type: ACTION_TYPES.removeProduct, + payload: { + product, //mudar + } + } +} diff --git a/src/reducers/index.js b/src/reducers/index.js index 5cb12f1..87849e5 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -15,6 +15,9 @@ export const products = (state = INITIAL_STATE, {type, payload}) => { case ACTION_TYPES.addProduct: // using object spread, I am saying - I want to return the old state, except change the productList property return {...state, productList: state.productList.concat(payload.product)}; + case ACTION_TYPES.removeProduct: + // using object spread, I am saying - I want to return the old state, except change the productList property + return {...state, productList: state.productList.filter(prod => prod.id !== payload.product.id)}; } return state; };