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