Connecting theBurger Builder Container to our Redux STORE

.gitignore

@@ -126,3 +126,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 package-lock.json*
+.vscode/settings.json

README.md

@@ -106,3 +106,4 @@ Firebase Common API Endpoint: <https://burger-builder-ram.firebaseio.com/>
 1. Setting Up Redux **`STORE`**, **`REDUCER`** & **`ACTIONs`**: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/49e1e3a8308096450f6fc8268cd7caa33d3b716d)
 2. Connecting the Redux **`STORE`** to the `<App />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/257c8bc90ad26b59efa9fa0f0020b293544825b3)
 3. Finishing the **`REDUCER`** for Ingredients: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/45a0123a382061ed1c7807bb39dc54c3f514b515)
+4. Connecting the `<BurgerBuilder />` Container to Redux `**STORE**`: [Commit Details]()

package.json

@@ -3,16 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.2",
-    "@testing-library/react": "^10.4.8",
-    "@testing-library/user-event": "^12.1.0",
-    "axios": "^0.19.2",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^10.4.9",
+    "@testing-library/user-event": "^12.1.3",
+    "axios": "^0.20.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-redux": "^7.2.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.3",
+    "redux": "^4.0.5",
     "styled-components": "^5.1.1"
   },
   "scripts": {

src/containers/BurgerBuilder/BurgerBuilder.component.jsx

@@ -1,6 +1,6 @@
 // LIBRARY IMPORTS
 import React, { Component } from 'react';
-import axios from '../../axios-orders';
+import { connect } from 'react-redux';
 
 // CUSTOM COMPONENTS
 import Aux from '../../hoc/Auxiliary/Auxiliary.hoc';
@@ -11,6 +11,8 @@ import OrderSummary from '../../components/Burger/OrderSummary/OrderSummary.comp
 import Wrapper from '../../components/UI/Wrapper/Wrapper.component';
 import Spinner from '../../components/UI/Spinner/Spinner.component';
 import withErrorHandler from '../../hoc/withErrorHandler/withErrorHandler.closureHOC';
+import axios from "../../axios-orders";
+import * as actionTypes from "../../store/actions";
 
 const INGREDIENT_PRICES = {
   salad: 0.5,
@@ -21,7 +23,6 @@ const INGREDIENT_PRICES = {
 
 class BurgerBuilder extends Component {
   state = {
-    ingredients: null,
     totalPrice: 4,
     purchasable: false,
     orderNow: false,
@@ -133,7 +134,7 @@ class BurgerBuilder extends Component {
   };
 
   render() {
-    const disabledInfo = { ...this.state.ingredients };
+    const disabledInfo = { ...this.props.ings };
     for (let key in disabledInfo) {
       disabledInfo[key] = disabledInfo[key] <= 0;
     }
@@ -144,10 +145,10 @@ class BurgerBuilder extends Component {
     if (this.state.ingredients) {
       burger = (
         <Wrapper>
-          <Burger ingredients={this.state.ingredients} />
+          <Burger ingredients={this.props.ings} />
           <BuildControls
-            ingredientAdded={this.addIngredientHandler}
-            ingredientRemoved={this.removeIngredientHandler}
+            ingredientAdded={this.props.onIngredientAdded}
+            ingredientRemoved={this.props.onIngredientRemoved}
             disabled={disabledInfo}
             purchasable={this.state.purchasable}
             price={this.state.totalPrice}
@@ -158,7 +159,7 @@ class BurgerBuilder extends Component {
 
       orderSummary = (
         <OrderSummary
-          ingredients={this.state.ingredients}
+          ingredients={this.props.ings}
           price={this.state.totalPrice}
           orderCancelled={this.orderCancelHandler}
           orderContinued={this.orderContinueHandler}
@@ -179,4 +180,19 @@ class BurgerBuilder extends Component {
   }
 }
 
-export default withErrorHandler(BurgerBuilder, axios);
+// REDUX STORE SETUP
+const mapStateToProps = state => {
+  return {
+    ings: state.ingredients
+  }
+};
+
+// REDUX ACTIONs & Dispatch Calls
+const mapDispatchToProps = dispatch => {
+  return {
+    onIngredientAdded: ingredientName => dispatch({ type: actionTypes.ADD_INGREDIENT, ingredientName }),
+    onIngredientRemoved: ingredientName => dispatch({ type: actionTypes.REMOVE_INGREDIENT, ingredientName }),
+  }
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(withErrorHandler(BurgerBuilder, axios));