title: WHY I am not able to get state from redux to my React app?
body: <p>Here's my code. I want to fetch ingredients and totalPrice from redux state but when I fetch it in main app, it is giving my undefined (this.props.ingredients and this.props.totalPrice).</p>
  <p>reducer.js</p>
  <pre><code>
  const initialState = {
      ingredients: {
          salad: 0,
          bacon: 0,
          cheese: 0,
          meat: 0,
      },
      totalPrice: 4.0
  }
  
  const reducer = (state = initialState, action) =&gt; {
      switch (action.type) {
          case 'ADD_INGREDIENTS':
              break;
  
          default:
              return state;
      }
  };
  
  export default reducer
  </code></pre>
  <p>Main App (Connecting with app)</p>
  <pre><code>......
  const mapStateToProps = state =&gt; {
      return {
          ings: state.ingredients,
          tp: state.totalPrice
      }
  }
  
  export default connect(mapStateToProps)(Burgerbuilder, axios)
  </code></pre>
  <p>This is giving me undefined</p>
  <pre><code>console.log(this.props.ings) 
  console.log(this.props.tp)
  </code></pre>
  <p>Here's how it connected it with store</p>
  <pre><code>import {Provider} from 'react-redux'
  import {createStore} from 'redux'
  import reducer from './redux/reducer';
  
  
  const store = createStore(reducer)
  
  const app = (
    &lt;React.StrictMode&gt;
      &lt;Provider store={store}&gt;
        &lt;BrowserRouter&gt;
          &lt;App /&gt; 
        &lt;/BrowserRouter&gt;
      &lt;/Provider&gt;
    &lt;/React.StrictMode&gt;
  )
  </code></pre>