[SOLVED] Redux and React. Uncaught TypeError: Cannot read property 'dispatch' of undefined

I'm trying to call dispatch from deeply nested component. I'm using Redux and React.

My app structure is:

[App]

----[Main]

--------[ShopCoffee]

--------[Other components]

When I call 'dispatch' from app.jsx it works.

When I call 'dispatch' from Main component it works, when I call dispatch from render() method (it has warnings, but still works), but doesn't work when I call 'dispatch' from other place.

I pass store using Provider and addNewItemToCart() as props, but when I call addNewItemToCart from the ShopCoffee component, there is an error: "Uncaught TypeError: Cannot read property 'dispatch' of undefined"

Here is my program:

App.jsx

import React from "react";
import ReactDOM from "react-dom";

import Main from "./components/main.component.jsx";
import { createStore } from "redux";
import { Provider } from "react-redux";

var app = document.getElementById("app");

function mainAppReducer(state, action) {
	if (!state) return {
		text: 'test text 1231'
	}
	switch (action.type) {
		case 'ADD_TO_CART' : console.log('ADD_TO_CART');
		return Object.assign({}, state, { text : action.text });
	}
}
const store = createStore(mainAppReducer);

store.dispatch ({
	type : 'ADD_TO_CART',
	text : 'One more message! ;)'
});

store.dispatch ({
	type : 'ADD_TO_CART',
	text : 'Text text message from redux! ;)'
});

console.log("store.getState() == ", store.getState());

var render = () => ReactDOM.render(<Provider store={store}><Main /></Provider>, app);
store.subscribe(render);
render();

console.log("store.getState() == ", store.getState());

main.component.jsx

import React from "react";
import Header from "./header.component.jsx";
import Footer from "./footer.component.jsx";
import Cart from "./cart.component.jsx";
import Checkout from "./checkout.component.jsx";
import ShopCoffee from "./shop-coffee.component.jsx";
import Rent from "./rent.component.jsx";
import Repair from "./repair.component.jsx";
import Contacts from "./contacts.component.jsx";
import { connect } from "react-redux";

export class Main extends React.Component {
	constructor(props) {
		super(props);
	}
	addNewItemToCart(itemsInCart) {
		console.log("works");
		console.log("addNewItemToCart() :: itemData == ", itemsInCart);		
		console.log("from Main: this.props", this.props);
		this.props.dispatch({type : 'ADD_TO_CART'});
	
	}

	getItemsInCart(itemsInCart) {
		console.log("getItemsInCart() :: itemData == ", itemsInCart);
		return itemsInCart;
	}

	render() {
		console.log('(from render) this.props == ', this.props);
		console.log('dispatch==', this.props.dispatch);
		
		return (
			<main>
				<Header />
				<Cart getItemsInCart = {this.getItemsInCart} />
				<Checkout />
				<ShopCoffee addNewItemToCart = {this.addNewItemToCart}/>
				<Rent />
				<Repair />
				<Contacts />				
				<Footer />
			</main>
		);
	}
}

export default connect((store) => store)(Main);

shop-coffee.component.jsx

import React from "react";

export default class ShopCoffee extends React.Component {
	constructor(props) {
		super(props);
		console.log("ShopCoffee /constructor()");
		console.log("ShopCoffee / this.props", this.props);
		this.state = {shopItems : [], itemsInCart : []};
	}

// =============== Добавляет выбранный товар в корзину ===============
	addItemToCart(i) {
		console.log("addItemToCart() i == ",i);
		console.log("addItemToCart() :: this.props", this.props);
		let newSelectedItem = this.state.shopItems[i];
		this.state.itemsInCart.push(newSelectedItem);
		this.props.addNewItemToCart(this.state.itemsInCart);


	}

	getData() {
		const url="/data/coffee.json";
		fetch(url)
			.then((resp) => resp.json())
			.then((data) => {
				this.state.shopItems = data;
			})
		.catch((error) => console.error("Ошибка загрузки данных из файла", url));
		
	}


	componentWillMount() {
		this.getData();
	}
	 componentDidMount() {
        setInterval(() => this.setState(this.state), 1000);
    }

	render() {
		var itemsArr = [];
		var itemsRow = [];

		//console.log("this.state.shopItems ===", this.state.shopItems);
		for (let i=0; i < this.state.shopItems.length; i++) {

			let item = this.state.shopItems[i];

			
			itemsArr.push(
							<div className="shop-coffee__item" key={"item"+i}> 
								<div className="shop-coffee__item__inner">
									<div className="row">
										<div className="shop-coffee__item__kg">
											<p className="shop-coffee__item__kg__text">{item.weight}</p>
										</div>
										<div className="shop-coffee__item__space">
										</div>
										<div className="shop-coffee__item__price">
											<p className="shop-coffee__item__price__text">{item.price}</p>
										</div>	
									</div>	
									<div className="row">												
										<div className="shop-coffee__item__image">
											<img className="shop-coffee__item__image__img" src="img/template-img__coffee-shop.jpg" />
										</div>
									</div>
									<div className="row">
										<div className="shop-coffee__item__description">
											<p className="shop-coffee__item__description__text">
												{item.title}
											</p>
											<p className="shop-coffee__item__description__text">
												{item.description}
											</p>
										</div>
									</div>
									<div className="row">
										<div className="shop-coffee__item__button-container">
											<button className="shop-coffee__item__button-container__button" onClick={this.addItemToCart.bind(this, i)}>
												Заказать
											</button>
										</div>
									</div>
								</div>
							</div> 
			);
			
			if ( ((i>0) && (i%3 == 0)) || (i == this.state.shopItems.length-1)) {
				itemsRow.push(
							<div className="row" key={"row"+i}>
								{itemsArr}
							</div>);
				itemsArr = [];

			}

		}
		return (
				<section className="shop-coffee">
					<div className="container">
						<div className="row">
							<div className="shop-coffee__title-container">
								<h2 className="shop-coffee__title-container__title">
									Магазин кофе
								</h2>
							</div>
						</div>

				
							{itemsRow}

						
					</div>
				</section>
		);
	}
}