Tahuana's solution

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) => <div>{props.name}</div>;
+const Product = (props) => <div>{props.name} <RemoverButton remove={props.remove} id={props.id} /></div>;
 
 const DaBest = ({name}) => <h1>The Best: {name}</h1>;
 
 const AdderButton = ({add}) => <button onClick={() => add({name: 'Sofa'})}>Add Sofa</button>
 
+const RemoverButton = ({remove, id}) => <button onClick={() => remove({id: id})}>Remove item</button>
+
 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 (
       <div>
         <DaBest name={whoIsTheBest}/>
-        {productList.map(product => <Product name={product.name} key={product.id}/>)}
+        {productList.map(product => <Product name={product.name} key={product.id} id={product.id} remove={remove} />)}
 
         <AdderButton {...this.props} />
       </div>
@@ -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);

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
+    }
+  }
+}

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;
 };