Cfrgtkky

i am new to redux i have created a code and while accessing connect method for state in store, i am getting error and undefined.code is given below.

action:

export const ADD_INGREDIENT = 'ADD_INGREDIENT';

export const REMOVE_INGREDIENT = 'REMOVE_INGREDIENT';

reducer:

import * as actionTypes from './actions';



const initialState={

    ingredients: {

        salad:0,

        meat:0,

        cheese:0,

    },

    totalprice:40

}



const reducer = (state=initialState, action)=>{

    switch (action.type) {

        case actionTypes.ADD_INGREDIENT:

            return {

                ...state,

                ingredients:{

                    ...state.ingredients,

                    [action.ingredientName] : state.ingredients[action.ingredientName]+1

                },

            };

        case actionTypes.REMOVE_INGREDIENT:

        return {

            ...state,

            ingredients:{

                ...state.ingredients,

                [action.ingredientName] : state.ingredients[action.ingredientName]-1,

            },

        };

        default:

            return state;

    }

};

export default reducer;

my component:

import React, {Component} from 'react';

import Burger from "../../components/burger/burger";

import Aux from '../../hoc/aux';

import classes from './BurgerBuilder.css';

import BuildControls from '../../components/burger/BuildControls/BuildControls';

import Totalprice from '../../components/burger/TotalPrice/TotalPrice';

import * as actionTypes from '../../store/actions';

import { connect } from 'react-redux';

import {store} from '../../App';



const ingredientCost = {

    cheese:20,

    meat:30,

    salad:10,

};



class BurgerBuilder extends Component{

    constructor(props){

        super(props);

        this.state={

            initialValue: store.getState().ingredients,

            totalPrice:0,

        }

    }



    render(){

        const disabledInfo ={

            ...this.props.ings

        }

        if(this.props.ings){

        return(

            <Aux>

                <h1 className={classes.Header}>Burger</h1>

                <Burger ingredients={this.props.ings}/>

                <div>

                {this.state.totalPrice !== 0 ?

                (<Totalprice

                totalAmount={this.state.totalPrice}

                />):(<div></div>)}

                <BuildControls

                increaseIngredientCount={this.props.newIngredientAdd}

                decreaseIngredientCount={this.props.newIngredientRemove}

                /></div>

            </Aux>

        )

    }



else{

    return(

<Aux>

<h1 className={classes.Header}>Burger</h1>

                <Burger

                ingredients={this.state.initialValue}/>

                <div>

                {this.state.totalPrice !== 0 ?

                (<Totalprice

                totalAmount={this.state.totalPrice}

                />):(<div></div>)}

                <BuildControls

                increaseIngredientCount={this.props.newIngredientAdd}

                decreaseIngredientCount={this.props.newIngredientRemove}

                /></div>

</Aux>

    )

}

}

}



const mapStateToProps = state =>{

    return console.log(state);

}

const mapDispatchToProps = dispatch =>{

    return{

        newIngredientAdd: (ingName)=>dispatch({type:actionTypes.ADD_INGREDIENT,ingredientName:ingName}),

        newIngredientRemove: (ingName)=>dispatch({type:actionTypes.REMOVE_INGREDIENT,ingredientName:ingName})

    }

}



export default connect(mapDispatchToProps,mapStateToProps)(BurgerBuilder)

app.js

import React, { Component } from 'react';

import {BrowserRouter} from 'react-router-dom';

import {Provider} from 'react-redux';

import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';

import reducer from './store/reducer';

import {createStore, applyMiddleware } from 'redux';

import thunk from 'redux-thunk';



export const store = createStore(reducer, applyMiddleware(thunk))

class App extends Component {

  render() {

    return (

      <Provider store={store}>

      <BrowserRouter>

        <BurgerBuilder/>

      </BrowserRouter>

      </Provider>

    );

  }

}



export default App;

this is the code which i have and i wrapped app.js with provider and while consoling inside the reducer i am able to get the output but while in mycomponent i am not getting the proper output.

Thanks in advance.

Your problem is in this line:

export default connect(mapDispatchToProps,mapStateToProps)(BurgerBuilder)

You have reversed the order of the functions that you are passing in connect, That's why your console.log outputs the dispatch function.
Try like that:

export default connect(mapStateToProps, mapDispatchToProps)(BurgerBuilder)